Spring Palette
CSS variables
:root {
--color-1: #FFAFCC;
--color-2: #FFC8DD;
--color-3: #BDE0FE;
--color-4: #A2D2FF;
--color-5: #CDB4DB;
}Tailwind config
// tailwind.config.js
colors: {
"spring-1": "#FFAFCC",
"spring-2": "#FFC8DD",
"spring-3": "#BDE0FE",
"spring-4": "#A2D2FF",
"spring-5": "#CDB4DB",
}About this palette
The Spring 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
#FFAFCCNear-black11.03:1AAAa
#FFC8DDNear-black13.10:1AAAa
#BDE0FENear-black13.73:1AAAa
#A2D2FFNear-black11.87:1AAAa
#CDB4DBNear-black10.03: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 | #FFAFCC | #FFC8DD | #BDE0FE | #A2D2FF | #CDB4DB |
|---|---|---|---|---|---|
| #FFAFCC | 1.19Fails | 1.24Fails | 1.08Fails | 1.10Fails | |
| #FFC8DD | 1.19Fails | 1.05Fails | 1.10Fails | 1.31Fails | |
| #BDE0FE | 1.24Fails | 1.05Fails | 1.16Fails | 1.37Fails | |
| #A2D2FF | 1.08Fails | 1.10Fails | 1.16Fails | 1.18Fails | |
| #CDB4DB | 1.10Fails | 1.31Fails | 1.37Fails | 1.18Fails |
More palettes