What are the hex codes in the Zesty Citrine & Saffron palette?

The Zesty Citrine & Saffron color palette consists of Citrine #E2D700, Saffron #E5BB00, Tangerine #DE8700, Ice #E5E5E5.

How should I use the Zesty Citrine & Saffron palette on a website?

Use Ice #E5E5E5 as the background, Tangerine #DE8700 for text, Citrine #E2D700 for buttons and links, and Saffron #E5BB00 for accents. No pair inside the palette reaches 4.5:1, so add black or white for body text.

Which colors in Zesty Citrine & Saffron have enough contrast for text?

The highest-contrast pair is #DE8700 on #E5E5E5 with a ratio of 2.2:1, which does not meet WCAG AA; add a darker or lighter neutral for body text.

#E2D700Citrine

#E5BB00Saffron

#DE8700Tangerine

#E5E5E5Ice

Zesty Citrine & Saffron color palette

Happy Vibrant Warm Yellow Orange

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Citrine	`#E2D700`	`rgb(226, 215, 0)`	`hsl(57, 100%, 44%)`	`oklch(86.0% 0.183 106)`
Saffron	`#E5BB00`	`rgb(229, 187, 0)`	`hsl(49, 100%, 45%)`	`oklch(80.6% 0.165 92)`
Tangerine	`#DE8700`	`rgb(222, 135, 0)`	`hsl(36, 100%, 44%)`	`oklch(70.0% 0.156 66)`
Ice	`#E5E5E5`	`rgb(229, 229, 229)`	`hsl(0, 0%, 90%)`	`oklch(92.2% 0.000 0)`

Why it works and how to use it

Zesty Citrine & Saffron is a vivid monochromatic color palette tagged happy, vibrant, warm. All four colors sit within 21° of hue, so the scheme reads as one color explored across light and dark. These are bold, punchy colors that need generous white space around them. The overall temperature is warm.

With 3 chromatic colors, Citrine takes the lead while the rest support. Lightness runs from 44% to 90%. Well suited to websites, presentations and branding.

Background: Ice (#E5E5E5) is the lightest color, so it belongs on large surfaces.
Text: Tangerine (#DE8700) on #E5E5E5 gives 2.2:1, so pair it with a darker neutral for body copy.
Primary: Citrine (#E2D700) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Saffron (#E5BB00) for highlights, badges and hover states.

No pair inside the palette reaches 4.5:1, so add black or white for body text.

Preview on a real UI see how the palette feels in context

BrandFeaturesPricingBlogGet started

Design faster with Zesty Citrine & Saffron

A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.

Primary action Secondary

Card title

Roles are assigned by lightness.

Color blindness simulation

#E2D700

#E5BB00

#DE8700

#E5E5E5

Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.

Palette card

Contrast check WCAG ratios between palette colors

Pair	Sample	Ratio	Level
`#DE8700` on `#E5E5E5`	Aa	2.2:1	Fail
`#E2D700` on `#DE8700`	Aa	1.84:1	Fail
`#E5BB00` on `#DE8700`	Aa	1.51:1	Fail
`#E5BB00` on `#E5E5E5`	Aa	1.46:1	Fail
`#E2D700` on `#E5BB00`	Aa	1.22:1	Fail
`#E2D700` on `#E5E5E5`	Aa	1.19:1	Fail

Similar palettes 24 more in this mood