Berry Palette
CSS variables
:root {
--color-1: #590D22;
--color-2: #800F2F;
--color-3: #A4133C;
--color-4: #C9184A;
--color-5: #FF4D6D;
}Tailwind config
// tailwind.config.js
colors: {
"berry-1": "#590D22",
"berry-2": "#800F2F",
"berry-3": "#A4133C",
"berry-4": "#C9184A",
"berry-5": "#FF4D6D",
}About this palette
The Berry 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
#590D22White13.95:1AAAa
#800F2FWhite10.36:1AAAa
#A4133CWhite7.67:1AAAa
#C9184AWhite5.66:1AAAa
#FF4D6DNear-black5.88: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 | #590D22 | #800F2F | #A4133C | #C9184A | #FF4D6D |
|---|---|---|---|---|---|
| #590D22 | 1.35Fails | 1.82Fails | 2.47Fails | 4.34Large only | |
| #800F2F | 1.35Fails | 1.35Fails | 1.83Fails | 3.22Large only | |
| #A4133C | 1.82Fails | 1.35Fails | 1.36Fails | 2.39Fails | |
| #C9184A | 2.47Fails | 1.83Fails | 1.36Fails | 1.76Fails | |
| #FF4D6D | 4.34Large only | 3.22Large only | 2.39Fails | 1.76Fails |
More palettes