This palette pairs a crisp blue-gray with a clean mint for a minimal, bright system that still feels calm and modern. The neutral base keeps the interface airy and readable, while the accent colors add just enough freshness to distinguish actions and brand moments.
This palette pairs a crisp blue-gray with a clean mint for a minimal, bright system that still feels calm and modern. The neutral base keeps the interface airy and readable, while the accent colors add just enough freshness to distinguish actions and brand moments.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The two main colors sit close in cool space, creating a restrained and contemporary system that feels bright without becoming loud. Their shared softness makes the palette easy to recognize across branding and interface use.
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 two main colors sit close in cool space, creating a restrained and contemporary system that feels bright without becoming loud. Their shared softness makes the palette easy to recognize across branding and interface use.
RolesLogo, Link, Btn Primary Bg, Headline
Slate Blue gives the brand its grounded, dependable anchor and works well for primary actions and recognition points.
#4F6D7A79, 109, 122198, 21, 3935, 11, 0, 52RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text
Seafoam adds a light, fresh counterpoint that keeps the palette bright and minimal while supporting secondary UI emphasis.
#8FD3C8143, 211, 200170, 44, 6932, 0, 5, 17These support colors extend the cool, airy direction with quiet structure and a subtle highlight. They stay subordinate to the two main colors while improving usability in text, borders, and accents.
RolesIcon, Border
Powder Blue softens interface details and provides a gentle structural tone that does not compete with the main colors.
#B8C5CC184, 197, 204201, 16, 7610, 3, 0, 20RolesDivider, Outline
Pale Aqua keeps separators and outlines clean and bright, reinforcing the minimal feel without adding visual weight.
#DCE7E6220, 231, 230175, 19, 885, 0, 0, 9Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F5F7F8245, 247, 248200, 18, 971, 0, 0, 3RolesBg Dark, Text, Btn Secondary Text
#1E232630, 35, 38203, 12, 1321, 8, 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: #4F6D7A;
--color-seafoam: #8FD3C8;
--color-powder-blue: #B8C5CC;
--color-pale-aqua: #DCE7E6;
--color-white: #FFFFFF;
--color-snow: #F5F7F8;
--color-charcoal: #1E2326;
}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: #4F6D7A;
--role-link: #4F6D7A;
--role-btn-primary-bg: #4F6D7A;
--role-headline: #4F6D7A;
--role-btn-secondary-bg: #8FD3C8;
--role-btn-outlined-border: #8FD3C8;
--role-btn-outlined-text: #8FD3C8;
--role-icon: #B8C5CC;
--role-border: #B8C5CC;
--role-divider: #DCE7E6;
--role-outline: #DCE7E6;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-bg-dark: #1E2326;
--role-text: #1E2326;
--role-btn-secondary-text: #1E2326;
}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": "#4F6D7A",
"seafoam": "#8FD3C8",
"powder-blue": "#B8C5CC",
"pale-aqua": "#DCE7E6",
"white": "#FFFFFF",
"snow": "#F5F7F8",
"charcoal": "#1E2326"
}