This palette pairs crisp Blue, fresh Mint, and clear Amber to keep the system minimalistic while still feeling bright and lively. The white and near-white neutrals preserve openness, and the deep charcoal anchors readability without softening the clarity of the color story.
This palette pairs crisp Blue, fresh Mint, and clear Amber to keep the system minimalistic while still feeling bright and lively. The white and near-white neutrals preserve openness, and the deep charcoal anchors readability without softening the clarity of the color story.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors use a bright triadic structure that keeps the palette minimal in feel but lively in energy. Blue provides clarity, Mint adds freshness, and Amber delivers a clean highlight that prevents the system from becoming flat.
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 use a bright triadic structure that keeps the palette minimal in feel but lively in energy. Blue provides clarity, Mint adds freshness, and Amber delivers a clean highlight that prevents the system from becoming flat.
RolesLogo, Btn Primary Bg, Headline
Blue gives the palette its clearest visual anchor and keeps the brand feeling direct and trustworthy.
#2D7FF945, 127, 249216, 94, 5882, 49, 0, 2RolesLink, Btn Secondary Bg
Mint adds a light, optimistic accent that softens the system without making it feel heavy.
#7CE7C5124, 231, 197161, 69, 7046, 0, 15, 9RolesBtn Outlined Border, Btn Outlined Text
Amber introduces a bright accent that adds warmth and makes outlined actions feel more inviting.
#FFB547255, 181, 7136, 100, 640, 29, 72, 0The support colors extend the main palette with quiet sky and seafoam tones that keep the interface bright while preserving a restrained, minimal character.
RolesIcon, Border
Sky lightens interface details and supports the main blue without competing with it.
#A9D8FF169, 216, 255207, 100, 8334, 15, 0, 0RolesDivider, Outline
Seafoam gives soft structural support and helps surfaces stay clean and airy.
#D7F4EA215, 244, 234159, 57, 9012, 0, 4, 4Utility 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-blue: #2D7FF9;
--color-mint: #7CE7C5;
--color-amber: #FFB547;
--color-sky: #A9D8FF;
--color-seafoam: #D7F4EA;
--color-white: #FFFFFF;
--color-ivory: #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: #2D7FF9;
--role-btn-primary-bg: #2D7FF9;
--role-headline: #2D7FF9;
--role-link: #7CE7C5;
--role-btn-secondary-bg: #7CE7C5;
--role-btn-outlined-border: #FFB547;
--role-btn-outlined-text: #FFB547;
--role-icon: #A9D8FF;
--role-border: #A9D8FF;
--role-divider: #D7F4EA;
--role-outline: #D7F4EA;
--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.{
"blue": "#2D7FF9",
"mint": "#7CE7C5",
"amber": "#FFB547",
"sky": "#A9D8FF",
"seafoam": "#D7F4EA",
"white": "#FFFFFF",
"ivory": "#F5F7FA",
"charcoal": "#111827"
}