This palette pairs a grounded charcoal with a vivid aqua and a clean coral-tinted white, creating a crisp, modern system with high contrast and a bright editorial edge. It feels balanced enough for interface design while still carrying the energetic, fresh character suggested by the image.
This palette pairs a grounded charcoal with a vivid aqua and a clean coral-tinted white, creating a crisp, modern system with high contrast and a bright editorial edge. It feels balanced enough for interface design while still carrying the energetic, fresh character suggested by the image.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors work as a sharp contrast system: charcoal anchors the brand, aqua provides the signature energy, and the pale slate-white keeps the composition bright and usable. Together they create a recognizable visual rhythm that feels contemporary without becoming generic.
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 work as a sharp contrast system: charcoal anchors the brand, aqua provides the signature energy, and the pale slate-white keeps the composition bright and usable. Together they create a recognizable visual rhythm that feels contemporary without becoming generic.
RolesLogo, Headline
This deep graphite gives the brand a stable, premium anchor and keeps the identity visually grounded.
#2F2E2D47, 46, 4530, 2, 180, 2, 4, 82RolesLink, Btn Primary Bg, Btn Outlined Border
This vivid aqua delivers the palette's most memorable energy and makes interactive elements feel immediate and fresh.
#43E4C167, 228, 193167, 75, 5871, 0, 15, 11RolesBtn Secondary Bg, Btn Outlined Text
This pale blue-gray softens the system and supports light UI surfaces without competing with the signature aqua.
#E7EFF0231, 239, 240187, 23, 924, 0, 0, 6The support colors extend the palette with restrained cool accents that improve hierarchy and layout clarity while staying subordinate to the main trio. They reinforce the same crisp, airy mood instead of introducing a new visual direction.
RolesIcon, Border
This softened aqua balance adds usable accent support and echoes the primary blue-green without overpowering it.
#7CCFBE124, 207, 190168, 46, 6540, 0, 8, 19RolesDivider, Outline
This muted blue-gray helps separate interface elements quietly and keeps structure visible without adding visual noise.
#A7B8B5167, 184, 181169, 11, 699, 0, 2, 28Utility colors for backgrounds, text, borders, and balance.
RolesBg Light
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F6F8F7246, 248, 247150, 13, 971, 0, 0, 3RolesBg Dark, Text, Btn Primary Text, Btn Secondary Text
#0E0F1014, 15, 16210, 7, 613, 6, 0, 94Copy 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-graphite-core: #2F2E2D;
--color-aqua-pulse: #43E4C1;
--color-slate-mist: #E7EFF0;
--color-sea-glass: #7CCFBE;
--color-mist-stone: #A7B8B5;
--color-pure-white: #FFFFFF;
--color-soft-frost: #F6F8F7;
--color-ink-black: #0E0F10;
}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: #2F2E2D;
--role-headline: #2F2E2D;
--role-link: #43E4C1;
--role-btn-primary-bg: #43E4C1;
--role-btn-outlined-border: #43E4C1;
--role-btn-secondary-bg: #E7EFF0;
--role-btn-outlined-text: #E7EFF0;
--role-icon: #7CCFBE;
--role-border: #7CCFBE;
--role-divider: #A7B8B5;
--role-outline: #A7B8B5;
--role-bg-light: #FFFFFF;
--role-bg-dark: #0E0F10;
--role-text: #0E0F10;
--role-btn-primary-text: #0E0F10;
--role-btn-secondary-text: #0E0F10;
}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.{
"graphite-core": "#2F2E2D",
"aqua-pulse": "#43E4C1",
"slate-mist": "#E7EFF0",
"sea-glass": "#7CCFBE",
"mist-stone": "#A7B8B5",
"pure-white": "#FFFFFF",
"soft-frost": "#F6F8F7",
"ink-black": "#0E0F10"
}