Lemon Drop color palette
Sour candy in five yellows. Pale chiffon #FFF9C4 is almost cream, the middle three are clean lemon shades, and #F9A825 deepens into golden amber. Every one is bright, so the palette feels sunny and upbeat. Yellow on yellow can't carry text, so add charcoal or deep brown for type. Use it for a lemonade stand sign or a summer sale banner.
Lemon Drop palette in use
Use #FFF9C4 as the background and #FDD835 or #F9A825 for buttons and highlight bars. #FFF176 suits cards and callouts, and body text needs a charcoal or dark brown.
This pair measures 19.59:1, so it works for body text too. The button uses #FDD835 with black text.
ButtonGood for
- Lemonade stand sign
- Bakery website
- Summer sale banner
- Children's book cover
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.
Lemon Drop palette as code
CSS variables
:root {
--lemon-drop-1: #FFF9C4;
--lemon-drop-2: #FFF176;
--lemon-drop-3: #FFEE58;
--lemon-drop-4: #FDD835;
--lemon-drop-5: #F9A825;
}Tailwind v4
@theme {
--color-lemon-drop-1: #FFF9C4;
--color-lemon-drop-2: #FFF176;
--color-lemon-drop-3: #FFEE58;
--color-lemon-drop-4: #FDD835;
--color-lemon-drop-5: #F9A825;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'lemon-drop': {
100: '#FFF9C4',
200: '#FFF176',
300: '#FFEE58',
400: '#FDD835',
500: '#F9A825',
},SCSS
$lemon-drop-1: #FFF9C4;
$lemon-drop-2: #FFF176;
$lemon-drop-3: #FFEE58;
$lemon-drop-4: #FDD835;
$lemon-drop-5: #F9A825;JSON
["#FFF9C4","#FFF176","#FFEE58","#FDD835","#F9A825"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.