This palette channels sun-faded beach tones with a vivid citrus-red focal point for a relaxed but energetic brand system. The warm accent, coastal blue, and sandy neutrals create a recognizable balance that feels playful, grounded, and easy to use across digital touchpoints.
This palette channels sun-faded beach tones with a vivid citrus-red focal point for a relaxed but energetic brand system. The warm accent, coastal blue, and sandy neutrals create a recognizable balance that feels playful, grounded, and easy to use across digital touchpoints.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors pair a bright citrus red with a deep coastal blue, creating a clear contrast that feels both lively and grounded. Together they evoke a beachside moment with enough visual tension to keep the system memorable and usable.
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 bright citrus red with a deep coastal blue, creating a clear contrast that feels both lively and grounded. Together they evoke a beachside moment with enough visual tension to keep the system memorable and usable.
RolesLogo, Btn Primary Bg
Coral Red delivers the energetic focal point and gives the brand a warm, immediate presence.
#FF3B30255, 59, 483, 100, 590, 77, 81, 0RolesLink, Btn Secondary Bg
Ocean Blue adds structure and trust while echoing the horizon and water in the reference image.
#1F5E8A31, 94, 138205, 63, 3378, 32, 0, 46RolesHeadline, Btn Outlined Border, Btn Outlined Text
Sandy Brown softens the contrast and ties the accent colors back to the beach setting.
#C88A5A200, 138, 9026, 50, 570, 31, 55, 22The support colors extend the coastal mood with quiet, natural undertones that keep the brighter hues balanced. They add depth and usability without competing with the primary red and blue relationship.
RolesIcon, Outline
Sea Glass Gray is a cool, muted bridge between the ocean and sand that works well for UI structure.
#6E7F86110, 127, 134198, 10, 4818, 5, 0, 47RolesBorder, Divider
Driftwood Beige reinforces the sun-warmed shore feeling while staying subtle enough for utility roles.
#D9C7AE217, 199, 17435, 36, 770, 8, 20, 15Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F4F1EB244, 241, 23540, 29, 940, 1, 4, 4RolesBg Dark, Text, Btn Primary Text
#17171723, 23, 230, 0, 90, 0, 0, 91Copy 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-red: #FF3B30;
--color-ocean-blue: #1F5E8A;
--color-sandy-brown: #C88A5A;
--color-sea-glass-gray: #6E7F86;
--color-driftwood-beige: #D9C7AE;
--color-white: #FFFFFF;
--color-ivory: #F4F1EB;
--color-charcoal: #171717;
}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: #FF3B30;
--role-btn-primary-bg: #FF3B30;
--role-link: #1F5E8A;
--role-btn-secondary-bg: #1F5E8A;
--role-headline: #C88A5A;
--role-btn-outlined-border: #C88A5A;
--role-btn-outlined-text: #C88A5A;
--role-icon: #6E7F86;
--role-outline: #6E7F86;
--role-border: #D9C7AE;
--role-divider: #D9C7AE;
--role-bg-light: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-dark: #171717;
--role-text: #171717;
--role-btn-primary-text: #171717;
}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-red": "#FF3B30",
"ocean-blue": "#1F5E8A",
"sandy-brown": "#C88A5A",
"sea-glass-gray": "#6E7F86",
"driftwood-beige": "#D9C7AE",
"white": "#FFFFFF",
"ivory": "#F4F1EB",
"charcoal": "#171717"
}