Midnight Palette
CSS variables
:root {
--color-1: #0B132B;
--color-2: #1C2541;
--color-3: #3A506B;
--color-4: #5BC0BE;
--color-5: #6FFFE9;
}Tailwind config
// tailwind.config.js
colors: {
"midnight-1": "#0B132B",
"midnight-2": "#1C2541",
"midnight-3": "#3A506B",
"midnight-4": "#5BC0BE",
"midnight-5": "#6FFFE9",
}About this palette
The Midnight 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
#0B132BWhite18.38:1AAAa
#1C2541White15.10:1AAAa
#3A506BWhite8.27:1AAAa
#5BC0BENear-black8.75:1AAAa
#6FFFE9Near-black15.44:1AAThese colours on each other
10 of the 20 combinations inside this palette clear 4.5:1 for body text. Rows are the text colour, columns the background.
| text \\ background | #0B132B | #1C2541 | #3A506B | #5BC0BE | #6FFFE9 |
|---|---|---|---|---|---|
| #0B132B | 1.22Fails | 2.22Fails | 8.52AA | 15.02AA | |
| #1C2541 | 1.22Fails | 1.83Fails | 7.00AA | 12.34AA | |
| #3A506B | 2.22Fails | 1.83Fails | 3.83Large only | 6.76AA | |
| #5BC0BE | 8.52AA | 7.00AA | 3.83Large only | 1.76Fails | |
| #6FFFE9 | 15.02AA | 12.34AA | 6.76AA | 1.76Fails |
More palettes