This palette turns the image’s icy blue, soft lavender-white, and coral red into a crisp, modern system with calm contrast and energetic highlights. It works because the cool and warm notes stay clearly separated, creating a recognizable identity that feels clean, optimistic, and editorial.
This palette turns the image’s icy blue, soft lavender-white, and coral red into a crisp, modern system with calm contrast and energetic highlights. It works because the cool and warm notes stay clearly separated, creating a recognizable identity that feels clean, optimistic, and editorial.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors combine a cool sky blue with a vivid coral accent and a soft lavender-tinted white that bridges the temperature shift. Together they create a clear, memorable contrast that feels contemporary without becoming noisy.
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 combine a cool sky blue with a vivid coral accent and a soft lavender-tinted white that bridges the temperature shift. Together they create a clear, memorable contrast that feels contemporary without becoming noisy.
RolesLogo, Btn Secondary Bg
This pale blue gives the brand a calm, trustworthy base with a light digital feel.
#C7DDF0199, 221, 240208, 58, 8617, 8, 0, 6RolesBtn Primary Bg, Headline, Link, Btn Outlined Border
This coral brings urgency and energy, making key actions and messages stand out immediately.
#F95D58249, 93, 882, 93, 660, 63, 65, 2This near-white adds a subtle cool softness that keeps the palette refined and airy.
#F4F1FF244, 241, 255253, 100, 974, 5, 0, 0The support colors extend the cool-warm contrast with muted, practical accents that help the system stay usable across UI states. They stay subordinate to the main palette while adding structure and a deeper tonal anchor.
RolesIcon, Border
This softened blue-gray supports interface structure without competing with the core hues.
#8EA9BF142, 169, 191207, 28, 6526, 12, 0, 25RolesDivider, Outline
This muted lavender reinforces the pale bridge tone and works well for subtle separators.
#D8C9F2216, 201, 242262, 61, 8711, 17, 0, 5Utility colors for backgrounds, text, borders, and balance.
RolesBg Light
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBtn Outlined Text
#F8FAFC248, 250, 252210, 40, 982, 1, 0, 1RolesBg 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-glacier-blue: #C7DDF0;
--color-coral-signal: #F95D58;
--color-lilac-veil: #F4F1FF;
--color-harbor-mist: #8EA9BF;
--color-wisp-lavender: #D8C9F2;
--color-pure-white: #FFFFFF;
--color-frost-white: #F8FAFC;
--color-ink-black: #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: #C7DDF0;
--role-btn-secondary-bg: #C7DDF0;
--role-btn-primary-bg: #F95D58;
--role-headline: #F95D58;
--role-link: #F95D58;
--role-btn-outlined-border: #F95D58;
--role-icon: #8EA9BF;
--role-border: #8EA9BF;
--role-divider: #D8C9F2;
--role-outline: #D8C9F2;
--role-bg-light: #FFFFFF;
--role-btn-outlined-text: #F8FAFC;
--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.{
"glacier-blue": "#C7DDF0",
"coral-signal": "#F95D58",
"lilac-veil": "#F4F1FF",
"harbor-mist": "#8EA9BF",
"wisp-lavender": "#D8C9F2",
"pure-white": "#FFFFFF",
"frost-white": "#F8FAFC",
"ink-black": "#111827"
}