Peachy Cream Palette
CSS variables
:root {
--color-1: #FFCFB3;
--color-2: #FFE8D6;
--color-3: #FFB088;
--color-4: #E08A5F;
--color-5: #FFF8F2;
}Tailwind config
// tailwind.config.js
colors: {
"peachy-cream-1": "#FFCFB3",
"peachy-cream-2": "#FFE8D6",
"peachy-cream-3": "#FFB088",
"peachy-cream-4": "#E08A5F",
"peachy-cream-5": "#FFF8F2",
}About this palette
The Peachy Cream 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
#FFCFB3Near-black13.34:1AAAa
#FFE8D6Near-black15.98:1AAAa
#FFB088Near-black10.63:1AAAa
#E08A5FNear-black7.17:1AAAa
#FFF8F2Near-black17.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 | #FFCFB3 | #FFE8D6 | #FFB088 | #E08A5F | #FFF8F2 |
|---|---|---|---|---|---|
| #FFCFB3 | 1.20Fails | 1.25Fails | 1.86Fails | 1.35Fails | |
| #FFE8D6 | 1.20Fails | 1.50Fails | 2.23Fails | 1.12Fails | |
| #FFB088 | 1.25Fails | 1.50Fails | 1.48Fails | 1.69Fails | |
| #E08A5F | 1.86Fails | 2.23Fails | 1.48Fails | 2.50Fails | |
| #FFF8F2 | 1.35Fails | 1.12Fails | 1.69Fails | 2.50Fails |
More palettes