What are the hex codes in the Golden Saffron & Teal palette?

The Golden Saffron & Teal color palette consists of Spruce #265244, Teal #37836E, Saffron #EEC855, Ivory #FFFAEF.

How should I use the Golden Saffron & Teal palette on a website?

Use Ivory #FFFAEF as the background, Spruce #265244 for text, Saffron #EEC855 for buttons and links, and Teal #37836E for accents. 2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Spruce on Ivory at 8.5:1.

Which colors in Golden Saffron & Teal have enough contrast for text?

The highest-contrast pair is #265244 on #FFFAEF with a ratio of 8.5:1, which passes WCAG AA for normal text.

#265244Spruce

#37836ETeal

#EEC855Saffron

#FFFAEFIvory

Golden Saffron & Teal color palette

Gold Teal Yellow White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Spruce	`#265244`	`rgb(38, 82, 68)`	`hsl(161, 37%, 24%)`	`oklch(40.3% 0.055 170)`
Teal	`#37836E`	`rgb(55, 131, 110)`	`hsl(163, 41%, 36%)`	`oklch(55.6% 0.083 172)`
Saffron	`#EEC855`	`rgb(238, 200, 85)`	`hsl(45, 82%, 63%)`	`oklch(84.5% 0.138 91)`
Ivory	`#FFFAEF`	`rgb(255, 250, 239)`	`hsl(41, 100%, 97%)`	`oklch(98.6% 0.015 86)`

Why it works and how to use it

Golden Saffron & Teal is a vivid split color palette tagged gold, teal, yellow. The hues span about 118°, enough contrast to create a focal point without the harshness of true complements. These are bold, punchy colors that need generous white space around them. Warm and cool hues are mixed, which adds depth.

With 3 chromatic colors, Saffron takes the lead while the rest support. Lightness runs from 24% to 97%. Well suited to premium branding and packaging.

Background: Ivory (#FFFAEF) is the lightest color, so it belongs on large surfaces.
Text: Spruce (#265244) on #FFFAEF gives 8.5:1, passing WCAG AAA.
Primary: Saffron (#EEC855) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Teal (#37836E) for highlights, badges and hover states.

2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Spruce on Ivory at 8.5:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Golden Saffron & Teal

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

#265244

#37836E

#EEC855

#FFFAEF

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
`#265244` on `#FFFAEF`	Aa	8.5:1	AAA
`#265244` on `#EEC855`	Aa	5.49:1	AA
`#37836E` on `#FFFAEF`	Aa	4.35:1	AA large only
`#37836E` on `#EEC855`	Aa	2.81:1	Fail
`#265244` on `#37836E`	Aa	1.95:1	Fail
`#EEC855` on `#FFFAEF`	Aa	1.55:1	Fail

Similar palettes 24 more in this mood