This beach-inspired color palette evokes the serene and refreshing atmosphere of a coastal environment by combining cool ocean blues, warm sandy tones, and soft sunset accents. The harmonious blend balances vibrant main colors with subdued support and neutral shades to create a recognizable and soothing brand identity suitable for lifestyle or hospitality brands.
This beach-inspired color palette evokes the serene and refreshing atmosphere of a coastal environment by combining cool ocean blues, warm sandy tones, and soft sunset accents. The harmonious blend balances vibrant main colors with subdued support and neutral shades to create a recognizable and soothing brand identity suitable for lifestyle or hospitality brands.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors of Ocean Blue, Sandy Beige, and Coral combine to evoke the tranquility of the sea, warmth of the shore, and vibrancy of a coastal sunset, forming a memorable and balanced beach-themed identity.
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 of Ocean Blue, Sandy Beige, and Coral combine to evoke the tranquility of the sea, warmth of the shore, and vibrancy of a coastal sunset, forming a memorable and balanced beach-themed identity.
RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text
Ocean Blue communicates trust and calmness, representing the vast, refreshing energy of the sea.
#0077B60, 119, 182201, 100, 36100, 35, 0, 29RolesBtn Secondary Bg, Headline
Coral adds warmth and vibrancy, evoking the lively colors seen in coastal sunsets and coral reefs.
#F4A261244, 162, 9727, 87, 670, 34, 60, 4Sandy Beige grounds the palette with a soft, natural tone reminiscent of warm beach sands.
#CDB79E205, 183, 15832, 32, 710, 11, 23, 20Support colors Seafoam Green and Driftwood Gray extend the palette with muted, nature-inspired tones that complement and balance the vibrant main colors without overpowering them.
RolesIcon, Border, Divider, Outline
Seafoam Green provides a subtle, calming contrast that suggests the gentle hues of ocean foams, helping to soften and balance the more vivid blues and corals.
#8FC1A9143, 193, 169151, 29, 6626, 0, 12, 24Driftwood Gray introduces an earthy, muted tone reminiscent of weathered wood on the beach, adding depth and neutrality to the overall palette.
#A69F95166, 159, 14935, 9, 620, 4, 10, 35Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F9F9F7249, 249, 24760, 14, 970, 0, 1, 2RolesBg Dark, Text, Btn Secondary Text
#2C2C2C44, 44, 440, 0, 170, 0, 0, 83Copy 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-ocean-blue: #0077B6;
--color-coral: #F4A261;
--color-sandy-beige: #CDB79E;
--color-seafoam-green: #8FC1A9;
--color-driftwood-gray: #A69F95;
--color-white: #FFFFFF;
--color-ivory: #F9F9F7;
--color-charcoal: #2C2C2C;
}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: #0077B6;
--role-link: #0077B6;
--role-btn-primary-bg: #0077B6;
--role-btn-outlined-border: #0077B6;
--role-btn-outlined-text: #0077B6;
--role-btn-secondary-bg: #F4A261;
--role-headline: #F4A261;
--role-icon: #8FC1A9;
--role-border: #8FC1A9;
--role-divider: #8FC1A9;
--role-outline: #8FC1A9;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-bg-dark: #2C2C2C;
--role-text: #2C2C2C;
--role-btn-secondary-text: #2C2C2C;
}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.{
"ocean-blue": "#0077B6",
"coral": "#F4A261",
"sandy-beige": "#CDB79E",
"seafoam-green": "#8FC1A9",
"driftwood-gray": "#A69F95",
"white": "#FFFFFF",
"ivory": "#F9F9F7",
"charcoal": "#2C2C2C"
}