Mustard Palette

CSS variables

:root {
  --color-1: #E1AD01;
  --color-2: #F2C94C;
  --color-3: #F7E7B4;
  --color-4: #8C6A00;
  --color-5: #4A3800;
}

Tailwind config

// tailwind.config.js
colors: {
  "mustard-1": "#E1AD01",
  "mustard-2": "#F2C94C",
  "mustard-3": "#F7E7B4",
  "mustard-4": "#8C6A00",
  "mustard-5": "#4A3800",
}

About this palette

The Mustard 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.

#E1AD01Near-black9.16:1AA

#F2C94CNear-black11.91:1AA

#F7E7B4Near-black15.33:1AA

#8C6A00White5.03:1AA

#4A3800White11.31:1AA

These colours on each other

6 of the 20 combinations inside this palette clear 4.5:1 for body text. Rows are the text colour, columns the background.

text \\ background	#E1AD01	#F2C94C	#F7E7B4	#8C6A00	#4A3800
#E1AD01	·	1.30Fails	1.67Fails	2.44Fails	5.48AA
#F2C94C	1.30Fails	·	1.29Fails	3.17Large only	7.13AA
#F7E7B4	1.67Fails	1.29Fails	·	4.08Large only	9.18AA
#8C6A00	2.44Fails	3.17Large only	4.08Large only	·	2.25Fails
#4A3800	5.48AA	7.13AA	9.18AA	2.25Fails	·

More palettes

Gradients in the same range

Color Wheel Sunset Peach

Mustard Palette

Related

Gradients in the same range