Palette · 5 colours
Spring 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.
:root {
--color-1: #FFAFCC;
--color-2: #FFC8DD;
--color-3: #BDE0FE;
--color-4: #A2D2FF;
--color-5: #CDB4DB;
}// tailwind.config.js
colors: {
"spring-1": "#FFAFCC",
"spring-2": "#FFC8DD",
"spring-3": "#BDE0FE",
"spring-4": "#A2D2FF",
"spring-5": "#CDB4DB",
}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.
| Color | Best text | Contrast | WCAG |
|---|---|---|---|
| #FFAFCC | Near-black | 11.03:1 | AA |
| #FFC8DD | Near-black | 13.10:1 | AA |
| #BDE0FE | Near-black | 13.73:1 | AA |
| #A2D2FF | Near-black | 11.87:1 | AA |
| #CDB4DB | Near-black | 10.03:1 | AA |
These 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 |
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.