This palette captures the soft warmth of a beach sunset with sandy neutrals balanced by calm sky and ocean blues, evoking a serene yet inviting coastal atmosphere.
This palette captures the soft warmth of a beach sunset with sandy neutrals balanced by calm sky and ocean blues, evoking a serene yet inviting coastal atmosphere.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors feature warm sandy tones and varying shades of blue from sky and water, creating a cohesive, calm, and inviting beach-inspired palette.
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 feature warm sandy tones and varying shades of blue from sky and water, creating a cohesive, calm, and inviting beach-inspired palette.
RolesLogo, Link, Btn Primary Bg, Headline
Sandy Beige brings the warm earthiness of beach sand, providing familiarity and comfort.
#D9B382217, 179, 13034, 53, 680, 18, 40, 15RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text
Ocean Blue introduces calm and trustworthiness, reflecting the tranquil sea.
#5A86AD90, 134, 173208, 34, 5248, 23, 0, 32Sky Blue offers a light, airy balance inspired by the sky during sunset, adding freshness and openness.
#A3BED8163, 190, 216209, 40, 7425, 12, 0, 15Support colors extend the main beach palette with muted soft tones to delicately complement and balance, enhancing readability and subtle details.
RolesIcon, Border, Divider, Outline
Soft Cloud is a gentle pale blue that softly highlights edges and icons without overpowering the main colors.
#C6D9E8198, 217, 232206, 43, 8415, 6, 0, 9Driftwood Brown adds a warm neutral accent, enhancing balance and grounding the palette with natural tones.
#AB8F66171, 143, 10236, 29, 540, 16, 40, 33Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F7F3EE247, 243, 23833, 36, 950, 2, 4, 3RolesBg Dark, Text, Btn Primary Text
#2F2F2F47, 47, 470, 0, 180, 0, 0, 82Copy 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-sandy-beige: #D9B382;
--color-ocean-blue: #5A86AD;
--color-sky-blue: #A3BED8;
--color-soft-cloud: #C6D9E8;
--color-driftwood-brown: #AB8F66;
--color-pure-white: #FFFFFF;
--color-ivory-cream: #F7F3EE;
--color-charcoal: #2F2F2F;
}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: #D9B382;
--role-link: #D9B382;
--role-btn-primary-bg: #D9B382;
--role-headline: #D9B382;
--role-btn-secondary-bg: #5A86AD;
--role-btn-outlined-border: #5A86AD;
--role-btn-outlined-text: #5A86AD;
--role-icon: #C6D9E8;
--role-border: #C6D9E8;
--role-divider: #C6D9E8;
--role-outline: #C6D9E8;
--role-bg-light: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-dark: #2F2F2F;
--role-text: #2F2F2F;
--role-btn-primary-text: #2F2F2F;
}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.{
"sandy-beige": "#D9B382",
"ocean-blue": "#5A86AD",
"sky-blue": "#A3BED8",
"soft-cloud": "#C6D9E8",
"driftwood-brown": "#AB8F66",
"pure-white": "#FFFFFF",
"ivory-cream": "#F7F3EE",
"charcoal": "#2F2F2F"
}