This palette pairs one crisp blue-gray with one restrained sage to keep the system minimal, neutral, and bright without feeling sterile. The contrast between cool clarity and soft organic balance makes the brand feel modern, calm, and easy to use across interfaces and identity.
This palette pairs one crisp blue-gray with one restrained sage to keep the system minimal, neutral, and bright without feeling sterile. The contrast between cool clarity and soft organic balance makes the brand feel modern, calm, and easy to use across interfaces and identity.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The palette uses a cool blue-gray and a soft sage to create a restrained two-color system that feels fresh, balanced, and intentionally understated. Together they read as neutral and bright while still giving the brand enough distinction to feel memorable.
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 palette uses a cool blue-gray and a soft sage to create a restrained two-color system that feels fresh, balanced, and intentionally understated. Together they read as neutral and bright while still giving the brand enough distinction to feel memorable.
RolesLogo, Link, Btn Primary Bg
Slate Blue brings clarity and structure, giving the brand a calm digital presence that still feels distinctive.
#6F86A1111, 134, 161212, 21, 5331, 17, 0, 37RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text, Headline
Sage softens the palette with a quiet organic note that keeps the system approachable and balanced.
#A7B8A0167, 184, 160103, 14, 679, 0, 13, 28The support colors stay muted and airy so they extend the main palette without competing with it. They add subtle depth for borders, icons, and interface accents while preserving the minimal, bright feel.
RolesIcon, Border
Powder Gray adds a clean structural layer that supports the palette without drawing attention away from the main colors.
#D7E0E8215, 224, 232208, 27, 887, 3, 0, 9RolesDivider, Outline
Mist Green echoes the sage undertone in a lighter form, helping separators and outlines feel cohesive and quiet.
#C8D2CC200, 210, 204144, 10, 805, 0, 3, 18Utility colors for backgrounds, text, borders, and balance.
RolesBg Light
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F5F7F8245, 247, 248200, 18, 971, 0, 0, 3RolesBg Dark, Text, Btn Primary Text, Btn Secondary Text
#11182717, 24, 39221, 39, 1156, 38, 0, 85Copy 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-slate-blue: #6F86A1;
--color-sage: #A7B8A0;
--color-powder-gray: #D7E0E8;
--color-mist-green: #C8D2CC;
--color-white: #FFFFFF;
--color-snow: #F5F7F8;
--color-charcoal: #111827;
}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: #6F86A1;
--role-link: #6F86A1;
--role-btn-primary-bg: #6F86A1;
--role-btn-secondary-bg: #A7B8A0;
--role-btn-outlined-border: #A7B8A0;
--role-btn-outlined-text: #A7B8A0;
--role-headline: #A7B8A0;
--role-icon: #D7E0E8;
--role-border: #D7E0E8;
--role-divider: #C8D2CC;
--role-outline: #C8D2CC;
--role-bg-light: #FFFFFF;
--role-bg-dark: #111827;
--role-text: #111827;
--role-btn-primary-text: #111827;
--role-btn-secondary-text: #111827;
}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.{
"slate-blue": "#6F86A1",
"sage": "#A7B8A0",
"powder-gray": "#D7E0E8",
"mist-green": "#C8D2CC",
"white": "#FFFFFF",
"snow": "#F5F7F8",
"charcoal": "#111827"
}