Citrus Squeeze color palette
Blood orange, tangerine, lemon, lime and a leafy green, all bright and juicy. #FF4500 is the deepest tone and still nowhere near dark, so the palette is pure daytime energy. Put the five in order and you get a warm-to-cool fruit-stand gradient that works as a single band or stripe. Juice packaging and summer camp flyers are the natural starting points.
Citrus Squeeze palette in use
Use these on a white page with near-black text. #FF4500 is the button color, #FFD700 highlights sale tags, and #32CD32 and #9ACD32 mark success states and icons.
This pair measures 14.97:1, so it works for body text too. The button uses #FF4500 with black text.
ButtonGood for
- Juice brand packaging
- Summer camp flyer
- Youth sports league
- Smoothie bar menu
Readable color pairs
No two colors in this palette reach 3:1 contrast, so use it for backgrounds and shapes, and set text in white or black. Check any pair in the contrast checker.
Citrus Squeeze palette as code
CSS variables
:root {
--citrus-squeeze-1: #FF4500;
--citrus-squeeze-2: #FF8C00;
--citrus-squeeze-3: #FFD700;
--citrus-squeeze-4: #9ACD32;
--citrus-squeeze-5: #32CD32;
}Tailwind v4
@theme {
--color-citrus-squeeze-1: #FF4500;
--color-citrus-squeeze-2: #FF8C00;
--color-citrus-squeeze-3: #FFD700;
--color-citrus-squeeze-4: #9ACD32;
--color-citrus-squeeze-5: #32CD32;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'citrus-squeeze': {
100: '#FF4500',
200: '#FF8C00',
300: '#FFD700',
400: '#9ACD32',
500: '#32CD32',
},SCSS
$citrus-squeeze-1: #FF4500;
$citrus-squeeze-2: #FF8C00;
$citrus-squeeze-3: #FFD700;
$citrus-squeeze-4: #9ACD32;
$citrus-squeeze-5: #32CD32;JSON
["#FF4500","#FF8C00","#FFD700","#9ACD32","#32CD32"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.