Coral Reef Palette
CSS variables
:root {
--color-1: #FF6F61;
--color-2: #FF9F1C;
--color-3: #FFBF69;
--color-4: #2EC4B6;
--color-5: #CBF3F0;
}Tailwind config
// tailwind.config.js
colors: {
"coral-reef-1": "#FF6F61",
"coral-reef-2": "#FF9F1C",
"coral-reef-3": "#FFBF69",
"coral-reef-4": "#2EC4B6",
"coral-reef-5": "#CBF3F0",
}About this palette
The Coral Reef palette is a curated set of 5 colors with their HEX, RGB and ready CSS-variable and Tailwind exports. Click any swatch for that color's full breakdown — conversions, contrast and harmonies.
Readable text on each color
White and near-black measured against every swatch. AA means the pairing clears 4.5:1 for body text; Large means it only clears 3:1, so reserve it for 24px and up.
Aa
#FF6F61Near-black6.93:1AAAa
#FF9F1CNear-black9.20:1AAAa
#FFBF69Near-black11.61:1AAAa
#2EC4B6Near-black8.72:1AAAa
#CBF3F0Near-black15.85:1AAThese colours on each other
None of the 20 combinations inside this palette reach 4.5:1, so pair its colours with white or near-black rather than with each other.
| text \\ background | #FF6F61 | #FF9F1C | #FFBF69 | #2EC4B6 | #CBF3F0 |
|---|---|---|---|---|---|
| #FF6F61 | 1.33Fails | 1.68Fails | 1.26Fails | 2.29Fails | |
| #FF9F1C | 1.33Fails | 1.26Fails | 1.06Fails | 1.72Fails | |
| #FFBF69 | 1.68Fails | 1.26Fails | 1.33Fails | 1.36Fails | |
| #2EC4B6 | 1.26Fails | 1.06Fails | 1.33Fails | 1.82Fails | |
| #CBF3F0 | 2.29Fails | 1.72Fails | 1.36Fails | 1.82Fails |
More palettes