Seafloor color palette
Sunlight fading as you dive. #003344 is the trench, nearly black with a teal tint, and the shades rise through #005566 and #007788 to a clear lagoon cyan, #00BBCC. It's one hue at five depths, saturated and cool. There's no warm color anywhere, so it stays fully underwater. Scuba centers and aquariums are the clear match, and it makes a good dark theme for data dashboards.
Seafloor palette in use
#003344 makes the background and #005566 the cards. #00BBCC handles headings, links and buttons, and #0099AA and #007788 suit charts and borders, with off-white body text.
This pair measures 5.76:1, so it works for body text too. The button uses #0099AA with black text.
ButtonGood for
- Scuba center website
- Aquarium exhibit signage
- Marine science poster
- Data dashboard dark theme
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 |
|---|---|---|---|
#003344 | #00BBCC | 5.76:1 | AA |
#003344 | #0099AA | 3.94:1 | AA large |
#005566 | #00BBCC | 3.60:1 | AA large |
Seafloor palette as code
CSS variables
:root {
--seafloor-1: #003344;
--seafloor-2: #005566;
--seafloor-3: #007788;
--seafloor-4: #0099AA;
--seafloor-5: #00BBCC;
}Tailwind v4
@theme {
--color-seafloor-1: #003344;
--color-seafloor-2: #005566;
--color-seafloor-3: #007788;
--color-seafloor-4: #0099AA;
--color-seafloor-5: #00BBCC;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'seafloor': {
100: '#003344',
200: '#005566',
300: '#007788',
400: '#0099AA',
500: '#00BBCC',
},SCSS
$seafloor-1: #003344;
$seafloor-2: #005566;
$seafloor-3: #007788;
$seafloor-4: #0099AA;
$seafloor-5: #00BBCC;JSON
["#003344","#005566","#007788","#0099AA","#00BBCC"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.