Pastel Palette
CSS variables
:root {
--color-1: #F9C5D1;
--color-2: #A2E1DB;
--color-3: #FFE5A0;
--color-4: #C5A3FF;
--color-5: #B5EAD7;
}Tailwind config
// tailwind.config.js
colors: {
"pastel-1": "#F9C5D1",
"pastel-2": "#A2E1DB",
"pastel-3": "#FFE5A0",
"pastel-4": "#C5A3FF",
"pastel-5": "#B5EAD7",
}About this palette
The Pastel 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
#F9C5D1Near-black12.54:1AAAa
#A2E1DBNear-black12.89:1AAAa
#FFE5A0Near-black15.27:1AAAa
#C5A3FFNear-black9.05:1AAAa
#B5EAD7Near-black14.14: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 | #F9C5D1 | #A2E1DB | #FFE5A0 | #C5A3FF | #B5EAD7 |
|---|---|---|---|---|---|
| #F9C5D1 | 1.03Fails | 1.22Fails | 1.39Fails | 1.13Fails | |
| #A2E1DB | 1.03Fails | 1.18Fails | 1.42Fails | 1.10Fails | |
| #FFE5A0 | 1.22Fails | 1.18Fails | 1.69Fails | 1.08Fails | |
| #C5A3FF | 1.39Fails | 1.42Fails | 1.69Fails | 1.56Fails | |
| #B5EAD7 | 1.13Fails | 1.10Fails | 1.08Fails | 1.56Fails |
More palettes