Deep Teal Palette
CSS variables
:root {
--color-1: #03312E;
--color-2: #0B5351;
--color-3: #12908C;
--color-4: #5FD9CE;
--color-5: #D6F5F2;
}Tailwind config
// tailwind.config.js
colors: {
"deep-teal-1": "#03312E",
"deep-teal-2": "#0B5351",
"deep-teal-3": "#12908C",
"deep-teal-4": "#5FD9CE",
"deep-teal-5": "#D6F5F2",
}About this palette
The Deep Teal 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
#03312EWhite14.16:1AAAa
#0B5351White8.86:1AAAa
#12908CNear-black4.85:1AAAa
#5FD9CENear-black11.07:1AAAa
#D6F5F2Near-black16.38:1AAThese colours on each other
8 of the 20 combinations inside this palette clear 4.5:1 for body text. Rows are the text colour, columns the background.
| text \\ background | #03312E | #0B5351 | #12908C | #5FD9CE | #D6F5F2 |
|---|---|---|---|---|---|
| #03312E | 1.60Fails | 3.64Large only | 8.30AA | 12.28AA | |
| #0B5351 | 1.60Fails | 2.28Fails | 5.19AA | 7.68AA | |
| #12908C | 3.64Large only | 2.28Fails | 2.28Fails | 3.37Large only | |
| #5FD9CE | 8.30AA | 5.19AA | 2.28Fails | 1.48Fails | |
| #D6F5F2 | 12.28AA | 7.68AA | 3.37Large only | 1.48Fails |
More palettes