What are the hex codes in the Jade & Saffron Haze palette?

The Jade & Saffron Haze color palette consists of Cocoa #7C5B1E, Jade #1CAE93, Saffron #E9CF7A, Beige #FBF5E4.

How should I use the Jade & Saffron Haze palette on a website?

Use Beige #FBF5E4 as the background, Cocoa #7C5B1E for text, Jade #1CAE93 for buttons and links, and Saffron #E9CF7A for accents. 1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Cocoa on Beige at 5.72:1.

Which colors in Jade & Saffron Haze have enough contrast for text?

The highest-contrast pair is #7C5B1E on #FBF5E4 with a ratio of 5.72:1, which passes WCAG AA for normal text.

#7C5B1ECocoa

#1CAE93Jade

#E9CF7ASaffron

#FBF5E4Beige

Jade & Saffron Haze color palette

Modern Yellow White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Cocoa	`#7C5B1E`	`rgb(124, 91, 30)`	`hsl(39, 61%, 30%)`	`oklch(49.4% 0.088 79)`
Jade	`#1CAE93`	`rgb(28, 174, 147)`	`hsl(169, 72%, 40%)`	`oklch(67.3% 0.121 176)`
Saffron	`#E9CF7A`	`rgb(233, 207, 122)`	`hsl(46, 72%, 70%)`	`oklch(85.8% 0.109 93)`
Beige	`#FBF5E4`	`rgb(251, 245, 228)`	`hsl(44, 74%, 94%)`	`oklch(97.0% 0.023 91)`

Why it works and how to use it

Jade & Saffron Haze is a vivid complementary color palette tagged modern, yellow, white. Near-complementary hues (about 130° apart) make this a high-contrast, attention-grabbing combination. Saturation runs high, so use the brightest color sparingly and let the others carry the surface area. Warm and cool hues are mixed, which adds depth.

With 4 chromatic colors, Jade takes the lead while the rest support. Lightness runs from 30% to 94%. Well suited to websites, presentations and branding.

Background: Beige (#FBF5E4) is the lightest color, so it belongs on large surfaces.
Text: Cocoa (#7C5B1E) on #FBF5E4 gives 5.72:1, passing WCAG AA.
Primary: Jade (#1CAE93) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Saffron (#E9CF7A) for highlights, badges and hover states.

1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Cocoa on Beige at 5.72:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Jade & Saffron Haze

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

#7C5B1E

#1CAE93

#E9CF7A

#FBF5E4

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
`#7C5B1E` on `#FBF5E4`	Aa	5.72:1	AA
`#7C5B1E` on `#E9CF7A`	Aa	4.05:1	AA large only
`#1CAE93` on `#FBF5E4`	Aa	2.56:1	Fail
`#7C5B1E` on `#1CAE93`	Aa	2.23:1	Fail
`#1CAE93` on `#E9CF7A`	Aa	1.82:1	Fail
`#E9CF7A` on `#FBF5E4`	Aa	1.41:1	Fail

Similar palettes 24 more in this mood