Sunset Palette
CSS variables
:root {
--color-1: #FF6B6B;
--color-2: #FFA07A;
--color-3: #FFD93D;
--color-4: #FF8C42;
--color-5: #C9484B;
}Tailwind config
// tailwind.config.js
colors: {
"sunset-1": "#FF6B6B",
"sunset-2": "#FFA07A",
"sunset-3": "#FFD93D",
"sunset-4": "#FF8C42",
"sunset-5": "#C9484B",
}About this palette
The Sunset 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
#FF6B6BNear-black6.81:1AAAa
#FFA07ANear-black9.50:1AAAa
#FFD93DNear-black13.72:1AAAa
#FF8C42Near-black8.17:1AAAa
#C9484BWhite4.65: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 | #FF6B6B | #FFA07A | #FFD93D | #FF8C42 | #C9484B |
|---|---|---|---|---|---|
| #FF6B6B | 1.40Fails | 2.01Fails | 1.20Fails | 1.68Fails | |
| #FFA07A | 1.40Fails | 1.44Fails | 1.16Fails | 2.34Fails | |
| #FFD93D | 2.01Fails | 1.44Fails | 1.68Fails | 3.38Large only | |
| #FF8C42 | 1.20Fails | 1.16Fails | 1.68Fails | 2.01Fails | |
| #C9484B | 1.68Fails | 2.34Fails | 3.38Large only | 2.01Fails |
More palettes