This palette pairs a crisp Charcoal with a clean Sky Blue to keep the system minimal, bright, and highly usable. The neutrals stay airy and modern so the brand feels calm and polished without losing contrast or clarity.
This palette pairs a crisp Charcoal with a clean Sky Blue to keep the system minimal, bright, and highly usable. The neutrals stay airy and modern so the brand feels calm and polished without losing contrast or clarity.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
Charcoal and Sky Blue create a restrained, recognizable pairing that feels minimal but not sterile. The dark neutral-leaning anchor and fresh accent work together to keep the palette bright, balanced, and easy to use across brand and UI systems.
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.
Charcoal and Sky Blue create a restrained, recognizable pairing that feels minimal but not sterile. The dark neutral-leaning anchor and fresh accent work together to keep the palette bright, balanced, and easy to use across brand and UI systems.
RolesLogo, Btn Secondary Bg, Headline
Charcoal gives the brand a grounded, refined anchor that keeps the identity minimal and legible.
#2B2F3343, 47, 51210, 9, 1816, 8, 0, 80RolesLink, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text
Sky Blue adds brightness and openness, giving the palette a fresh, approachable energy without feeling loud.
#5FB6E895, 182, 232202, 75, 6459, 22, 0, 9The support colors extend the main pairing with softer cool values that preserve the calm, bright tone. They add subtle structure and interaction depth without competing with the two main colors.
RolesIcon, Border
Powder Blue supports interface structure with a soft cool edge that stays subordinate to the main colors.
#C9D6E2201, 214, 226209, 30, 8411, 5, 0, 11RolesDivider, Outline
Alice Blue provides a light structural accent that keeps spacing and surfaces crisp without adding visual weight.
#E8EEF2232, 238, 242204, 28, 934, 2, 0, 5Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F7F8FA247, 248, 250220, 23, 971, 1, 0, 2RolesBg Dark, Text, Btn Primary Text
#11141817, 20, 24214, 17, 829, 17, 0, 91Copy 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-charcoal: #2B2F33;
--color-sky-blue: #5FB6E8;
--color-powder-blue: #C9D6E2;
--color-alice-blue: #E8EEF2;
--color-white: #FFFFFF;
--color-snow: #F7F8FA;
--color-near-black: #111418;
}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: #2B2F33;
--role-btn-secondary-bg: #2B2F33;
--role-headline: #2B2F33;
--role-link: #5FB6E8;
--role-btn-primary-bg: #5FB6E8;
--role-btn-outlined-border: #5FB6E8;
--role-btn-outlined-text: #5FB6E8;
--role-icon: #C9D6E2;
--role-border: #C9D6E2;
--role-divider: #E8EEF2;
--role-outline: #E8EEF2;
--role-bg-light: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-dark: #111418;
--role-text: #111418;
--role-btn-primary-text: #111418;
}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.{
"charcoal": "#2B2F33",
"sky-blue": "#5FB6E8",
"powder-blue": "#C9D6E2",
"alice-blue": "#E8EEF2",
"white": "#FFFFFF",
"snow": "#F7F8FA",
"near-black": "#111418"
}