Deep Sea color palette
It starts at the ocean floor with #001219, almost black, rises through petrol #005F73 and teal #0A9396, then breaks the surface at seafoam and a warm sand, #E9D8A6. That sand is the surprise. It warms up a palette that would otherwise be all cool water and gives you a readable light color. Try it for a marine research site or a coastal travel guide.
Deep Sea palette in use
On a #001219 background, set text in #E9D8A6. #0A9396 makes the button color, #005F73 suits cards and nav bars, and #94D2BD works for icons and highlights.
This pair measures 13.48:1, so it works for body text too. The button uses #0A9396 with black text.
ButtonGood for
- Marine research site
- Coastal travel guide
- Sustainability report
- Seafood restaurant menu
Readable color pairs
Pairs from this palette with at least 3:1 contrast (WCAG 2). Use AA and AAA pairs for body text, and AA large pairs for headings 24px and up.
| Text | Background | Ratio | Rating |
|---|---|---|---|
#001219 | #E9D8A6 | 13.48:1 | AAA |
#001219 | #94D2BD | 11.09:1 | AAA |
#005F73 | #E9D8A6 | 5.14:1 | AA |
#001219 | #0A9396 | 5.11:1 | AA |
#005F73 | #94D2BD | 4.23:1 | AA large |
Deep Sea palette as code
CSS variables
:root {
--deep-sea-1: #001219;
--deep-sea-2: #005F73;
--deep-sea-3: #0A9396;
--deep-sea-4: #94D2BD;
--deep-sea-5: #E9D8A6;
}Tailwind v4
@theme {
--color-deep-sea-1: #001219;
--color-deep-sea-2: #005F73;
--color-deep-sea-3: #0A9396;
--color-deep-sea-4: #94D2BD;
--color-deep-sea-5: #E9D8A6;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'deep-sea': {
100: '#001219',
200: '#005F73',
300: '#0A9396',
400: '#94D2BD',
500: '#E9D8A6',
},SCSS
$deep-sea-1: #001219;
$deep-sea-2: #005F73;
$deep-sea-3: #0A9396;
$deep-sea-4: #94D2BD;
$deep-sea-5: #E9D8A6;JSON
["#001219","#005F73","#0A9396","#94D2BD","#E9D8A6"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.