This palette pairs a soft coral-peach with a slate blue and a pale aqua accent to echo the image’s calm vertical rhythm and cool-warm balance. The result feels clean, approachable, and slightly editorial while staying practical for interfaces and brand systems.
This palette pairs a soft coral-peach with a slate blue and a pale aqua accent to echo the image’s calm vertical rhythm and cool-warm balance. The result feels clean, approachable, and slightly editorial while staying practical for interfaces and brand systems.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors work as a restrained warm-cool system, with coral bringing warmth and slate blue adding structure, while aqua acts as a lighter bridge that keeps the palette feeling fresh and recognizable.
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 restrained warm-cool system, with coral bringing warmth and slate blue adding structure, while aqua acts as a lighter bridge that keeps the palette feeling fresh and recognizable.
RolesLogo, Btn Primary Bg
This coral adds a friendly, memorable anchor that keeps the brand approachable without feeling overly bright.
#F7BFA8247, 191, 16817, 83, 810, 23, 32, 3RolesLink, Headline
This slate blue adds clarity and stability, making it ideal for navigation, emphasis, and a more serious brand voice.
#5E8DA894, 141, 168202, 30, 5144, 16, 0, 34RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text
This muted aqua softens the system and gives secondary actions a lighter, calmer presence that still feels distinct.
#9FC9C2159, 201, 194170, 28, 7121, 0, 3, 21The support colors extend the palette with deeper and slightly softened cool tones that reinforce contrast, usability, and a quiet sense of depth.
RolesIcon, Border
This deeper blue-gray strengthens icons and borders without competing with the primary coral or slate blue.
#4F738779, 115, 135201, 26, 4241, 15, 0, 47RolesDivider, Outline
This pale aqua-tinted neutral keeps dividers and outlines subtle while staying aligned with the palette’s cool undertone.
#D7E7E4215, 231, 228169, 25, 877, 0, 1, 9Utility colors for backgrounds, text, borders, and balance.
RolesBg Light
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F7F4EE247, 244, 23840, 36, 950, 1, 4, 3RolesBg Dark, Text, Btn Primary Text, Btn Secondary 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-soft-coral: #F7BFA8;
--color-slate-blue: #5E8DA8;
--color-mist-aqua: #9FC9C2;
--color-deep-harbor: #4F7387;
--color-sea-glass: #D7E7E4;
--color-pure-white: #FFFFFF;
--color-warm-paper: #F7F4EE;
--color-ink-black: #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: #F7BFA8;
--role-btn-primary-bg: #F7BFA8;
--role-link: #5E8DA8;
--role-headline: #5E8DA8;
--role-btn-secondary-bg: #9FC9C2;
--role-btn-outlined-border: #9FC9C2;
--role-btn-outlined-text: #9FC9C2;
--role-icon: #4F7387;
--role-border: #4F7387;
--role-divider: #D7E7E4;
--role-outline: #D7E7E4;
--role-bg-light: #FFFFFF;
--role-bg-dark: #1F2328;
--role-text: #1F2328;
--role-btn-primary-text: #1F2328;
--role-btn-secondary-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.{
"soft-coral": "#F7BFA8",
"slate-blue": "#5E8DA8",
"mist-aqua": "#9FC9C2",
"deep-harbor": "#4F7387",
"sea-glass": "#D7E7E4",
"pure-white": "#FFFFFF",
"warm-paper": "#F7F4EE",
"ink-black": "#1F2328"
}