A punchy retro-pop palette built from warm coral, electric blue, and sandy peach tones. The colors feel energetic and editorial, with enough contrast for clear UI hierarchy while keeping the brand playful and memorable.
A punchy retro-pop palette built from warm coral, electric blue, and sandy peach tones. The colors feel energetic and editorial, with enough contrast for clear UI hierarchy while keeping the brand playful and memorable.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors pair a vivid coral with a bright blue range, creating a recognizable retro-pop system with strong visual energy and clear contrast. The relationship feels expressive but controlled, ideal for brand presence and interface use
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 pair a vivid coral with a bright blue range, creating a recognizable retro-pop system with strong visual energy and clear contrast. The relationship feels expressive but controlled, ideal for brand presence and interface use
RolesLogo, Btn Secondary Bg, Headline
Adds the brand’s warm, upbeat signature and gives secondary actions a lively, attention-grabbing presence.
#F55E49245, 94, 737, 90, 620, 62, 70, 4RolesLink, Btn Primary Bg, Btn Outlined Border
Provides crisp digital authority and anchors primary actions with a confident, high-contrast blue.
#1F5BD831, 91, 216221, 75, 4886, 58, 0, 15The support accents extend the palette with softened, utility-friendly tones that echo the main colors without stealing focus. They add depth for UI states, small highlights, and a
RolesIcon, Border, Divider
A gentler blue that bridges the main blue and coral while staying calm enough for interface structure.
#7EA6E8126, 166, 232217, 70, 7046, 28, 0, 9RolesOutline
A softened coral-orange that supports borders and outlines with warmth while remaining quieter than the primary coral.
#F0A08A240, 160, 13813, 77, 740, 33, 43, 6Utility colors for backgrounds, text, borders, and balance.
RolesBg Dark, Text, Btn Secondary Text
#0E122014, 18, 32227, 39, 956, 44, 0, 87RolesBg Light, Btn Primary Text
#F7F5F2247, 245, 24236, 24, 960, 1, 2, 3RolesBtn Outlined Text
#D7D0C7215, 208, 19934, 17, 810, 3, 7, 16Copy 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-punch-coral: #F55E49;
--color-signal-blue: #1F5BD8;
--color-powder-cobalt: #7EA6E8;
--color-apricot-clay: #F0A08A;
--color-ink-night: #0E1220;
--color-paper-white: #F7F5F2;
--color-soft-stone: #D7D0C7;
}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: #F55E49;
--role-btn-secondary-bg: #F55E49;
--role-headline: #F55E49;
--role-link: #1F5BD8;
--role-btn-primary-bg: #1F5BD8;
--role-btn-outlined-border: #1F5BD8;
--role-icon: #7EA6E8;
--role-border: #7EA6E8;
--role-divider: #7EA6E8;
--role-outline: #F0A08A;
--role-bg-dark: #0E1220;
--role-text: #0E1220;
--role-btn-secondary-text: #0E1220;
--role-bg-light: #F7F5F2;
--role-btn-primary-text: #F7F5F2;
--role-btn-outlined-text: #D7D0C7;
}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.{
"punch-coral": "#F55E49",
"signal-blue": "#1F5BD8",
"powder-cobalt": "#7EA6E8",
"apricot-clay": "#F0A08A",
"ink-night": "#0E1220",
"paper-white": "#F7F5F2",
"soft-stone": "#D7D0C7"
}