This palette pairs a clean Sky Blue with fresh Mint Green and a crisp Coral accent to keep the system minimal but lively. Bright neutrals and restrained support tones preserve clarity while letting the brand feel modern, open, and easy to use.
This palette pairs a clean Sky Blue with fresh Mint Green and a crisp Coral accent to keep the system minimal but lively. Bright neutrals and restrained support tones preserve clarity while letting the brand feel modern, open, and easy to use.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors form a bright triadic relationship that feels balanced, fresh, and easy to recognize. Their clean separation gives the palette energy without sacrificing the minimal visual structure.
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 form a bright triadic relationship that feels balanced, fresh, and easy to recognize. Their clean separation gives the palette energy without sacrificing the minimal visual structure.
RolesLogo, Link, Btn Primary Bg
Sky Blue establishes the most recognizable brand cue and keeps the system feeling open and contemporary.
#4FA3FF79, 163, 255211, 100, 6569, 36, 0, 0RolesBtn Secondary Bg, Btn Outlined Border
Mint Green adds a fresh supporting note that softens the layout and reinforces the bright, minimal tone.
#7ED957126, 217, 87102, 63, 6042, 0, 60, 15RolesBtn Outlined Text, Headline
Coral provides a vivid accent for emphasis and gives headlines a warm point of focus.
#FF7A59255, 122, 8912, 100, 670, 52, 65, 0These accents extend the main palette with quiet tonal support, keeping the interface bright while adding balance and usability. They stay subordinate so the main triadic colors remain the primary brand signal.
RolesIcon, Border
Powder Blue bridges the brighter blues with a softer utility tone for icons and boundaries.
#8FB8D8143, 184, 216206, 48, 7034, 15, 0, 15RolesDivider, Outline
Pale Mint lightens structural details without competing with the stronger main colors.
#BFE8D0191, 232, 208145, 47, 8318, 0, 10, 9Utility colors for backgrounds, text, borders, and balance.
RolesBg Light
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F5F7FA245, 247, 250216, 33, 972, 1, 0, 2RolesBg 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-sky-blue: #4FA3FF;
--color-mint-green: #7ED957;
--color-coral: #FF7A59;
--color-powder-blue: #8FB8D8;
--color-pale-mint: #BFE8D0;
--color-white: #FFFFFF;
--color-snow: #F5F7FA;
--color-charcoal: #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: #4FA3FF;
--role-link: #4FA3FF;
--role-btn-primary-bg: #4FA3FF;
--role-btn-secondary-bg: #7ED957;
--role-btn-outlined-border: #7ED957;
--role-btn-outlined-text: #FF7A59;
--role-headline: #FF7A59;
--role-icon: #8FB8D8;
--role-border: #8FB8D8;
--role-divider: #BFE8D0;
--role-outline: #BFE8D0;
--role-bg-light: #FFFFFF;
--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.{
"sky-blue": "#4FA3FF",
"mint-green": "#7ED957",
"coral": "#FF7A59",
"powder-blue": "#8FB8D8",
"pale-mint": "#BFE8D0",
"white": "#FFFFFF",
"snow": "#F5F7FA",
"charcoal": "#111827"
}