Candy Palette
CSS variables
:root {
--color-1: #FF85A2;
--color-2: #FFC2D1;
--color-3: #FCD5CE;
--color-4: #A9DEF9;
--color-5: #E4C1F9;
}Tailwind config
// tailwind.config.js
colors: {
"candy-1": "#FF85A2",
"candy-2": "#FFC2D1",
"candy-3": "#FCD5CE",
"candy-4": "#A9DEF9",
"candy-5": "#E4C1F9",
}About this palette
The Candy 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
#FF85A2Near-black8.21:1AAAa
#FFC2D1Near-black12.50:1AAAa
#FCD5CENear-black13.99:1AAAa
#A9DEF9Near-black13.05:1AAAa
#E4C1F9Near-black11.96: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 | #FF85A2 | #FFC2D1 | #FCD5CE | #A9DEF9 | #E4C1F9 |
|---|---|---|---|---|---|
| #FF85A2 | 1.52Fails | 1.70Fails | 1.59Fails | 1.46Fails | |
| #FFC2D1 | 1.52Fails | 1.12Fails | 1.04Fails | 1.04Fails | |
| #FCD5CE | 1.70Fails | 1.12Fails | 1.07Fails | 1.17Fails | |
| #A9DEF9 | 1.59Fails | 1.04Fails | 1.07Fails | 1.09Fails | |
| #E4C1F9 | 1.46Fails | 1.04Fails | 1.17Fails | 1.09Fails |
More palettes