Palette · 5 colours
Retro Palette
The Retro 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.
:root {
--color-1: #264653;
--color-2: #2A9D8F;
--color-3: #E9C46A;
--color-4: #F4A261;
--color-5: #E76F51;
}// tailwind.config.js
colors: {
"retro-1": "#264653",
"retro-2": "#2A9D8F",
"retro-3": "#E9C46A",
"retro-4": "#F4A261",
"retro-5": "#E76F51",
}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.
| Color | Best text | Contrast | WCAG |
|---|---|---|---|
| #264653 | White | 10.08:1 | AA |
| #2A9D8F | Near-black | 5.68:1 | AA |
| #E9C46A | Near-black | 11.31:1 | AA |
| #F4A261 | Near-black | 9.17:1 | AA |
| #E76F51 | Near-black | 6.11:1 | AA |
These colours on each other
4 of the 20 combinations inside this palette clear 4.5:1 for body text. Rows are the text colour, columns the background.
| text \ background | #264653 | #2A9D8F | #E9C46A | #F4A261 | #E76F51 |
|---|---|---|---|---|---|
| #264653 | 3.03Large only | 6.03AA | 4.89AA | 3.26Large only | |
| #2A9D8F | 3.03Large only | 1.99Fails | 1.61Fails | 1.07Fails | |
| #E9C46A | 6.03AA | 1.99Fails | 1.23Fails | 1.85Fails | |
| #F4A261 | 4.89AA | 1.61Fails | 1.23Fails | 1.50Fails | |
| #E76F51 | 3.26Large only | 1.07Fails | 1.85Fails | 1.50Fails |
About this palette
The Retro 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.