This palette pairs a restrained Slate and a clear Sky Blue to keep the system minimal, bright, and calm without feeling sterile. The neutral structure stays crisp and spacious while the single accent adds enough clarity for links, headlines, and primary actions.
This palette pairs a restrained Slate and a clear Sky Blue to keep the system minimal, bright, and calm without feeling sterile. The neutral structure stays crisp and spacious while the single accent adds enough clarity for links, headlines, and primary actions.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
Slate and Sky Blue sit close enough to feel quiet and cohesive, while the blue lift keeps the system bright and easy to scan. Together they create a minimal brand rhythm that reads as clean, modern, and trustworthy.
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.
Slate and Sky Blue sit close enough to feel quiet and cohesive, while the blue lift keeps the system bright and easy to scan. Together they create a minimal brand rhythm that reads as clean, modern, and trustworthy.
RolesLogo, Headline
Slate gives the brand a stable, understated anchor that supports a minimal look without feeling flat.
#5B687591, 104, 117210, 13, 4122, 11, 0, 54RolesLink, Btn Primary Bg
Sky Blue adds brightness and clarity, making the interface feel open and approachable while still restrained.
#79BFE8121, 191, 232202, 71, 6948, 18, 0, 9These accents extend the palette with subtle structure and visibility without competing with the two main colors. They keep small UI details calm and functional while preserving the bright, minimal tone.
RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text
Cool Gray softens secondary actions and borders so they support the main colors instead of pulling focus.
#A8B3BF168, 179, 191211, 15, 7012, 6, 0, 25RolesIcon, Border, Divider, Outline
Silver provides a light structural layer that keeps the interface airy and quiet.
#D6DCE2214, 220, 226210, 17, 865, 3, 0, 11Utility colors for backgrounds, text, borders, and balance.
RolesBg Light
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBtn Secondary Text
#F4F6F8244, 246, 248210, 22, 962, 1, 0, 3RolesBg Dark, Text, Btn Primary Text
#1F232831, 35, 40213, 13, 1423, 13, 0, 84Copy 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: #5B6875;
--color-sky-blue: #79BFE8;
--color-cool-gray: #A8B3BF;
--color-silver: #D6DCE2;
--color-white: #FFFFFF;
--color-snow: #F4F6F8;
--color-charcoal: #1F2328;
}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: #5B6875;
--role-headline: #5B6875;
--role-link: #79BFE8;
--role-btn-primary-bg: #79BFE8;
--role-btn-secondary-bg: #A8B3BF;
--role-btn-outlined-border: #A8B3BF;
--role-btn-outlined-text: #A8B3BF;
--role-icon: #D6DCE2;
--role-border: #D6DCE2;
--role-divider: #D6DCE2;
--role-outline: #D6DCE2;
--role-bg-light: #FFFFFF;
--role-btn-secondary-text: #F4F6F8;
--role-bg-dark: #1F2328;
--role-text: #1F2328;
--role-btn-primary-text: #1F2328;
}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": "#5B6875",
"sky-blue": "#79BFE8",
"cool-gray": "#A8B3BF",
"silver": "#D6DCE2",
"white": "#FFFFFF",
"snow": "#F4F6F8",
"charcoal": "#1F2328"
}