Citrus Pop Palette
CSS variables
:root {
--color-1: #FF6B35;
--color-2: #F7B801;
--color-3: #A1C349;
--color-4: #2E86AB;
--color-5: #FDF6EC;
}Tailwind config
// tailwind.config.js
colors: {
"citrus-pop-1": "#FF6B35",
"citrus-pop-2": "#F7B801",
"citrus-pop-3": "#A1C349",
"citrus-pop-4": "#2E86AB",
"citrus-pop-5": "#FDF6EC",
}About this palette
The Citrus Pop 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
#FF6B35Near-black6.66:1AAAa
#F7B801Near-black10.63:1AAAa
#A1C349Near-black9.37:1AAAa
#2E86ABNear-black4.60:1AAAa
#FDF6ECNear-black17.61: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 | #FF6B35 | #F7B801 | #A1C349 | #2E86AB | #FDF6EC |
|---|---|---|---|---|---|
| #FF6B35 | 1.59Fails | 1.41Fails | 1.45Fails | 2.64Fails | |
| #F7B801 | 1.59Fails | 1.13Fails | 2.31Fails | 1.66Fails | |
| #A1C349 | 1.41Fails | 1.13Fails | 2.04Fails | 1.88Fails | |
| #2E86AB | 1.45Fails | 2.31Fails | 2.04Fails | 3.83Large only | |
| #FDF6EC | 2.64Fails | 1.66Fails | 1.88Fails | 3.83Large only |
More palettes