This palette draws from the image's soothing and subtle pastel tones to create a calm, professional, and approachable brand identity. The light blues and greens provide a fresh, clean feel, while the soft neutrals balance and ground the palette for readability and versatility.
This palette draws from the image's soothing and subtle pastel tones to create a calm, professional, and approachable brand identity. The light blues and greens provide a fresh, clean feel, while the soft neutrals balance and ground the palette for readability and versatility.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors use analogous cool tones mostly in blue and green to evoke calmness and trust, enhancing brand recognition through their harmonious relation.
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 main colors use analogous cool tones mostly in blue and green to evoke calmness and trust, enhancing brand recognition through their harmonious relation.
RolesLogo, Btn Primary Bg, Link
Pale Sky Blue conveys tranquility and reliability, perfect for forming a trustworthy brand core.
#aed9e0174, 217, 224188, 45, 7822, 3, 0, 12RolesBtn Secondary Bg, Headline
Soft Sage Green adds a natural, calming balance to the palette, suggesting stability and growth.
#83b9a6131, 185, 166159, 28, 6229, 0, 10, 27RolesBtn Outlined Border, Btn Outlined Text
Muted Steel Blue serves as a quiet accent that supports and frames primary elements without distraction.
#72a1b2114, 161, 178196, 29, 5736, 10, 0, 30The support colors extend the main palette with gentle blue-green hues that provide subtle contrast and reinforce the serene, professional tone without overtaking the main colors.
RolesIcon, Border, Divider, Outline
Light Powder Blue offers soft, unobtrusive detail highlights that complement the main blues gracefully.
#c9dbe3201, 219, 227198, 32, 8411, 4, 0, 11Dusty Mint Green balances the palette with a slightly earthier tone that enhances the natural and grounded feel.
#a2c4b8162, 196, 184159, 22, 7017, 0, 6, 23Utility colors for backgrounds, text, borders, and balance.
RolesBg Light
#ffffff255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#f5f7f8245, 247, 248200, 18, 971, 0, 0, 3RolesText, Btn Primary Text, Btn Secondary Text
#29324141, 50, 65218, 23, 2137, 23, 0, 75Copy 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-pale-sky-blue: #aed9e0;
--color-soft-sage-green: #83b9a6;
--color-muted-steel-blue: #72a1b2;
--color-light-powder-blue: #c9dbe3;
--color-dusty-mint-green: #a2c4b8;
--color-pure-white: #ffffff;
--color-soft-white: #f5f7f8;
--color-charcoal-navy: #293241;
}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: #aed9e0;
--role-btn-primary-bg: #aed9e0;
--role-link: #aed9e0;
--role-btn-secondary-bg: #83b9a6;
--role-headline: #83b9a6;
--role-btn-outlined-border: #72a1b2;
--role-btn-outlined-text: #72a1b2;
--role-icon: #c9dbe3;
--role-border: #c9dbe3;
--role-divider: #c9dbe3;
--role-outline: #c9dbe3;
--role-bg-light: #ffffff;
--role-bg-dark: #f5f7f8;
--role-text: #293241;
--role-btn-primary-text: #293241;
--role-btn-secondary-text: #293241;
}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.{
"pale-sky-blue": "#aed9e0",
"soft-sage-green": "#83b9a6",
"muted-steel-blue": "#72a1b2",
"light-powder-blue": "#c9dbe3",
"dusty-mint-green": "#a2c4b8",
"pure-white": "#ffffff",
"soft-white": "#f5f7f8",
"charcoal-navy": "#293241"
}