Ocean Sunset color palette
Three warm colors and two cool ones split this set the way a sunset splits over water. Coral #FF6B6B, orange and bright gold sit at the top, all fully saturated, while turquoise and a mid sea blue cool things down. Nothing here is close to black or white, so the mood stays loud and sunny. It suits surf shops, summer festivals, travel apps and kids' brands that want warmth without going neon.
Ocean Sunset palette in use
#2E86AB works as a header or footer band with white type, #FFD700 and #FFA500 as highlight fills, and #FF6B6B as the button color. Pair the set with a near-black for body copy, since none of the five is dark enough for running text.
This pair measures 14.97:1, so it works for body text too. The button uses #FF6B6B with black text.
ButtonGood for
- Beach resort website
- Summer festival poster
- Surf shop branding
- Travel app onboarding
Readable color pairs
No two colors in this palette reach 3:1 contrast, so use it for backgrounds and shapes, and set text in white or black. Check any pair in the contrast checker.
Ocean Sunset palette as code
CSS variables
:root {
--ocean-sunset-1: #FF6B6B;
--ocean-sunset-2: #FFA500;
--ocean-sunset-3: #FFD700;
--ocean-sunset-4: #4ECDC4;
--ocean-sunset-5: #2E86AB;
}Tailwind v4
@theme {
--color-ocean-sunset-1: #FF6B6B;
--color-ocean-sunset-2: #FFA500;
--color-ocean-sunset-3: #FFD700;
--color-ocean-sunset-4: #4ECDC4;
--color-ocean-sunset-5: #2E86AB;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'ocean-sunset': {
100: '#FF6B6B',
200: '#FFA500',
300: '#FFD700',
400: '#4ECDC4',
500: '#2E86AB',
},SCSS
$ocean-sunset-1: #FF6B6B;
$ocean-sunset-2: #FFA500;
$ocean-sunset-3: #FFD700;
$ocean-sunset-4: #4ECDC4;
$ocean-sunset-5: #2E86AB;JSON
["#FF6B6B","#FFA500","#FFD700","#4ECDC4","#2E86AB"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.