This palette draws inspiration from the image's vibrant blues, greens, and warm oranges, balanced by earthy support tones and clean neutrals for versatility and readability.
This palette draws inspiration from the image's vibrant blues, greens, and warm oranges, balanced by earthy support tones and clean neutrals for versatility and readability.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The three main colors are a triadic mix of vibrant blue, vivid green, and warm orange, creating a lively and balanced visual identity that mirrors the image's energy and contrast.
Clear roles create a consistent brand experience.Assign existing palette colors to brand, typography, and interface roles.
A compact view of the brand, support, and neutral colors that make up this system.
The three main colors are a triadic mix of vibrant blue, vivid green, and warm orange, creating a lively and balanced visual identity that mirrors the image's energy and contrast.
RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text, Headline
This vibrant Blue conveys energy and creativity, serving as the primary brand anchor for attention and trust.
#1E90FF30, 144, 255210, 100, 5688, 44, 0, 0RolesBtn Secondary Bg
The Medium Sea Green adds a fresh, natural balance to the palette, bringing calmness and harmony.
#3CB37160, 179, 113147, 50, 4766, 0, 37, 30Dark Orange provides warmth and vibrancy that energizes interactive elements and highlights.
#FF8C00255, 140, 033, 100, 500, 45, 100, 0The support colors are muted and earthy variations that complement the vivid mains while maintaining visual harmony and subtlety.
RolesIcon, Border, Divider, Outline
Dark Olive Green brings a grounded, natural accent that reinforces the greens and balances the palette with subtle contrast.
#556B2F85, 107, 4782, 39, 3021, 0, 56, 58Steel Blue supports the main Blue with a slightly muted tone, adding depth without competing for attention.
#4682B470, 130, 180207, 44, 4961, 28, 0, 29Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#F5F5F5245, 245, 2450, 0, 960, 0, 0, 4RolesText, Btn Secondary Text
#2F4F4F47, 79, 79180, 25, 2541, 0, 0, 69Copy palette values for design systems, websites, and client handoff.
Use these in CSS when you want every raw palette color available by name. Best for websites, landing pages, and design system variables.
Use when: you need the actual colors.:root {
--color-blue: #1E90FF;
--color-medium-sea-green: #3CB371;
--color-dark-orange: #FF8C00;
--color-dark-olive-green: #556B2F;
--color-steel-blue: #4682B4;
--color-white: #FFFFFF;
--color-white-smoke: #F5F5F5;
--color-dark-slate-gray: #2F4F4F;
}Use these in CSS when colors are assigned to practical jobs like text, buttons, borders, links, and backgrounds.
Use when: you need UI roles, not just swatches.:root {
--role-logo: #1E90FF;
--role-link: #1E90FF;
--role-btn-primary-bg: #1E90FF;
--role-btn-outlined-border: #1E90FF;
--role-btn-outlined-text: #1E90FF;
--role-headline: #1E90FF;
--role-btn-secondary-bg: #3CB371;
--role-icon: #556B2F;
--role-border: #556B2F;
--role-divider: #556B2F;
--role-outline: #556B2F;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-bg-dark: #F5F5F5;
--role-text: #2F4F4F;
--role-btn-secondary-text: #2F4F4F;
}Use this structured palette data in apps, generators, plugins, or tools that need to read the palette programmatically.
Use when: a developer or app needs data.{
"blue": "#1E90FF",
"medium-sea-green": "#3CB371",
"dark-orange": "#FF8C00",
"dark-olive-green": "#556B2F",
"steel-blue": "#4682B4",
"white": "#FFFFFF",
"white-smoke": "#F5F5F5",
"dark-slate-gray": "#2F4F4F"
}