This palette pairs a crisp, luminous blue with a clean, energizing orange to keep the system minimal but distinctly alive. The balance feels modern and optimistic while the neutrals preserve clarity and generous white space.
This palette pairs a crisp, luminous blue with a clean, energizing orange to keep the system minimal but distinctly alive. The balance feels modern and optimistic while the neutrals preserve clarity and generous white space.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The blue and orange work as a clear complementary pair, creating a minimal system that feels energetic without adding visual clutter. Their contrast keeps the palette memorable while still reading as clean and direct in digital interfaces.
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 blue and orange work as a clear complementary pair, creating a minimal system that feels energetic without adding visual clutter. Their contrast keeps the palette memorable while still reading as clean and direct in digital interfaces.
RolesLogo, Btn Primary Bg, Headline
Azure gives the brand a crisp digital backbone and keeps the system bright and confident.
#1E88E530, 136, 229208, 79, 5187, 41, 0, 10RolesLink, Btn Secondary Bg, Btn Outlined Border, Btn Outlined Text
Coral adds warmth and motion, giving the palette a lively accent that stays easy to recognize.
#FF8A3D255, 138, 6124, 100, 620, 46, 76, 0The support colors are soft, restrained companions that help structure the interface without competing with the two main hues. They keep the palette minimal, readable, and balanced across light and dark surfaces.
RolesIcon, Border
Sky Blue softens the interface and supports the main blue with a quieter, airy presence.
#8FB3C9143, 179, 201203, 35, 6729, 11, 0, 21RolesDivider, Outline
Sand adds a gentle warm boundary that balances the orange without becoming visually loud.
#F2D6A2242, 214, 16239, 75, 790, 12, 33, 5Utility 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-azure: #1E88E5;
--color-coral: #FF8A3D;
--color-sky-blue: #8FB3C9;
--color-sand: #F2D6A2;
--color-white: #FFFFFF;
--color-cloud: #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: #1E88E5;
--role-btn-primary-bg: #1E88E5;
--role-headline: #1E88E5;
--role-link: #FF8A3D;
--role-btn-secondary-bg: #FF8A3D;
--role-btn-outlined-border: #FF8A3D;
--role-btn-outlined-text: #FF8A3D;
--role-icon: #8FB3C9;
--role-border: #8FB3C9;
--role-divider: #F2D6A2;
--role-outline: #F2D6A2;
--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.{
"azure": "#1E88E5",
"coral": "#FF8A3D",
"sky-blue": "#8FB3C9",
"sand": "#F2D6A2",
"white": "#FFFFFF",
"cloud": "#F5F7FA",
"charcoal": "#111827"
}