Rainbow Pastel Palette
CSS variables
:root {
--color-1: #FFADAD;
--color-2: #FFD6A5;
--color-3: #FDFFB6;
--color-4: #CAFFBF;
--color-5: #9BF6FF;
--color-6: #A0C4FF;
}Tailwind config
// tailwind.config.js
colors: {
"rainbow-pastel-1": "#FFADAD",
"rainbow-pastel-2": "#FFD6A5",
"rainbow-pastel-3": "#FDFFB6",
"rainbow-pastel-4": "#CAFFBF",
"rainbow-pastel-5": "#9BF6FF",
"rainbow-pastel-6": "#A0C4FF",
}About this palette
The Rainbow Pastel palette is a curated set of 6 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
#FFADADNear-black10.65:1AAAa
#FFD6A5Near-black13.87:1AAAa
#FDFFB6Near-black18.13:1AAAa
#CAFFBFNear-black16.71:1AAAa
#9BF6FFNear-black15.31:1AAAa
#A0C4FFNear-black10.65:1AAThese colours on each other
None of the 30 combinations inside this palette reach 4.5:1, so pair its colours with white or near-black rather than with each other.
| text \\ background | #FFADAD | #FFD6A5 | #FDFFB6 | #CAFFBF | #9BF6FF | #A0C4FF |
|---|---|---|---|---|---|---|
| #FFADAD | 1.30Fails | 1.70Fails | 1.57Fails | 1.44Fails | 1.00Fails | |
| #FFD6A5 | 1.30Fails | 1.31Fails | 1.20Fails | 1.10Fails | 1.30Fails | |
| #FDFFB6 | 1.70Fails | 1.31Fails | 1.09Fails | 1.18Fails | 1.70Fails | |
| #CAFFBF | 1.57Fails | 1.20Fails | 1.09Fails | 1.09Fails | 1.57Fails | |
| #9BF6FF | 1.44Fails | 1.10Fails | 1.18Fails | 1.09Fails | 1.44Fails | |
| #A0C4FF | 1.00Fails | 1.30Fails | 1.70Fails | 1.57Fails | 1.44Fails |
More palettes