Coral Reef color palette
Coral #FF6B6B and orange #FFA500 bring the heat. The cool half goes from minty seafoam #98E8C1 to teal and then a darker ocean blue, #006994. That deep blue is the only color dark enough to carry text, so it ends up doing a lot of work. The mix feels bright and underwater at once. Aquariums, dive centers, marine charities and swimwear brands get the most from it.
Coral Reef palette in use
Run body text in #006994 on white, and use #98E8C1 for panels and highlights. #FF6B6B makes the call-to-action color, with #20B2AA for icons and secondary buttons.
This pair measures 14.64:1, so it works for body text too. The button uses #FF6B6B with black text.
ButtonGood for
- Aquarium visitor guide
- Dive shop website
- Marine charity campaign
- Swimwear lookbook
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 |
|---|---|---|---|
#006994 | #98E8C1 | 4.24:1 | AA large |
#006994 | #FFA500 | 3.08:1 | AA large |
Coral Reef palette as code
CSS variables
:root {
--coral-reef-1: #FF6B6B;
--coral-reef-2: #FFA500;
--coral-reef-3: #98E8C1;
--coral-reef-4: #20B2AA;
--coral-reef-5: #006994;
}Tailwind v4
@theme {
--color-coral-reef-1: #FF6B6B;
--color-coral-reef-2: #FFA500;
--color-coral-reef-3: #98E8C1;
--color-coral-reef-4: #20B2AA;
--color-coral-reef-5: #006994;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'coral-reef': {
100: '#FF6B6B',
200: '#FFA500',
300: '#98E8C1',
400: '#20B2AA',
500: '#006994',
},SCSS
$coral-reef-1: #FF6B6B;
$coral-reef-2: #FFA500;
$coral-reef-3: #98E8C1;
$coral-reef-4: #20B2AA;
$coral-reef-5: #006994;JSON
["#FF6B6B","#FFA500","#98E8C1","#20B2AA","#006994"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.