What are the hex codes in the Lemon Zest palette?

The Lemon Zest color palette consists of Amber #FFB703, Tangerine #FB8500, Cadet #219EBC, Sky Blue #8ECAE6.

How should I use the Lemon Zest palette on a website?

Use Amber #FFB703 as the background, Cadet #219EBC for text, Tangerine #FB8500 for buttons and links, and Sky Blue #8ECAE6 for accents. No pair inside the palette reaches 4.5:1, so add black or white for body text.

Which colors in Lemon Zest have enough contrast for text?

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

#FFB703Amber

#FB8500Tangerine

#219EBCCadet

#8ECAE6Sky Blue

Lemon Zest color palette

Summer Vibrant Orange Teal Blue

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Amber	`#FFB703`	`rgb(255, 183, 3)`	`hsl(43, 100%, 51%)`	`oklch(82.5% 0.171 80)`
Tangerine	`#FB8500`	`rgb(251, 133, 0)`	`hsl(32, 100%, 49%)`	`oklch(73.4% 0.179 56)`
Cadet	`#219EBC`	`rgb(33, 158, 188)`	`hsl(192, 70%, 43%)`	`oklch(64.8% 0.110 219)`
Sky Blue	`#8ECAE6`	`rgb(142, 202, 230)`	`hsl(199, 64%, 73%)`	`oklch(80.8% 0.073 229)`

Why it works and how to use it

Lemon Zest is a vivid complementary color palette tagged summer, vibrant, orange. Amber and Sky Blue sit nearly opposite on the color wheel, so the pairing has real energy; keep one as the accent. These are bold, punchy colors that need generous white space around them. Warm and cool hues are mixed, which adds depth.

The palette holds together thanks to its complementary hue relationship and a soft light-to-dark ladder (73% down to 43% lightness). A natural fit for websites, presentations and branding.

Background: Amber (#FFB703) is the lightest color, so it belongs on large surfaces.
Text: Cadet (#219EBC) on #FFB703 gives 1.8:1, so pair it with a darker neutral for body copy.
Primary: Tangerine (#FB8500) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Sky Blue (#8ECAE6) 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 Lemon Zest

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

#FFB703

#FB8500

#219EBC

#8ECAE6

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
`#FFB703` on `#219EBC`	Aa	1.8:1	Fail
`#219EBC` on `#8ECAE6`	Aa	1.76:1	Fail
`#FFB703` on `#FB8500`	Aa	1.42:1	Fail
`#FB8500` on `#8ECAE6`	Aa	1.39:1	Fail
`#FB8500` on `#219EBC`	Aa	1.27:1	Fail
`#FFB703` on `#8ECAE6`	Aa	1.02:1	Fail

Similar palettes 24 more in this mood