This summer-inspired palette pairs sunlit coral, sea-glass aqua, and warm marigold to create a lively but balanced identity system. The colors feel seasonal and energetic while the neutrals keep the interface clean, readable, and practical.
This summer-inspired palette pairs sunlit coral, sea-glass aqua, and warm marigold to create a lively but balanced identity system. The colors feel seasonal and energetic while the neutrals keep the interface clean, readable, and practical.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors form a triadic summer system with warm coral, refreshing aqua, and golden marigold. Together they create a recognizable seasonal palette that feels energetic, friendly, and adaptable across branding 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 form a triadic summer system with warm coral, refreshing aqua, and golden marigold. Together they create a recognizable seasonal palette that feels energetic, friendly, and adaptable across branding and interface use.
RolesLogo, Btn Primary Bg, Headline
Coral brings the warm, sun-kissed energy that anchors the palette and gives the brand immediate seasonal recognition.
#FF6F61255, 111, 975, 100, 690, 56, 62, 0RolesLink, Btn Outlined Border, Btn Outlined Text
Aqua adds a cool, refreshing counterpoint that keeps the palette feeling breezy and modern.
#40CFCB64, 207, 203178, 60, 5369, 0, 2, 19RolesBtn Secondary Bg
Marigold adds bright optimism and helps the system feel playful without overpowering the coral.
#F4B400244, 180, 044, 100, 480, 26, 100, 4The support colors soften and extend the summer theme with natural, beach-adjacent undertones. They stay subordinate to the main colors while helping accents, dividers, and structural UI elements feel cohesive.
RolesIcon, Outline
Seafoam bridges coral and aqua with a muted coastal tone that supports interface elements without competing for attention.
#7FB3A8127, 179, 168167, 25, 6029, 0, 6, 30RolesBorder, Divider
Peach adds a warm, sandy transition color that keeps separators and borders aligned with the summer mood.
#D9A48F217, 164, 14317, 49, 710, 24, 34, 15Utility colors for backgrounds, text, borders, and balance.
RolesBg Light
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F6F1E8246, 241, 23239, 44, 940, 2, 6, 4RolesBg Dark, Text, Btn Primary Text, Btn Secondary Text
#1F1F1F31, 31, 310, 0, 120, 0, 0, 88Copy 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-coral: #FF6F61;
--color-aqua: #40CFCB;
--color-marigold: #F4B400;
--color-seafoam: #7FB3A8;
--color-peach: #D9A48F;
--color-white: #FFFFFF;
--color-ivory: #F6F1E8;
--color-charcoal: #1F1F1F;
}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: #FF6F61;
--role-btn-primary-bg: #FF6F61;
--role-headline: #FF6F61;
--role-link: #40CFCB;
--role-btn-outlined-border: #40CFCB;
--role-btn-outlined-text: #40CFCB;
--role-btn-secondary-bg: #F4B400;
--role-icon: #7FB3A8;
--role-outline: #7FB3A8;
--role-border: #D9A48F;
--role-divider: #D9A48F;
--role-bg-light: #FFFFFF;
--role-bg-dark: #1F1F1F;
--role-text: #1F1F1F;
--role-btn-primary-text: #1F1F1F;
--role-btn-secondary-text: #1F1F1F;
}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.{
"coral": "#FF6F61",
"aqua": "#40CFCB",
"marigold": "#F4B400",
"seafoam": "#7FB3A8",
"peach": "#D9A48F",
"white": "#FFFFFF",
"ivory": "#F6F1E8",
"charcoal": "#1F1F1F"
}