What are the hex codes in the Classic Cranberry & Mustard palette?

The Classic Cranberry & Mustard color palette consists of Cranberry #9B0D22, Mustard #D4A429, Teal #00828B, Putty #D3CAB9.

How should I use the Classic Cranberry & Mustard palette on a website?

Use Putty #D3CAB9 as the background, Cranberry #9B0D22 for text, Teal #00828B for buttons and links, and Mustard #D4A429 for accents. 1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Cranberry on Putty at 5.22:1.

Which colors in Classic Cranberry & Mustard have enough contrast for text?

The highest-contrast pair is #9B0D22 on #D3CAB9 with a ratio of 5.22:1, which passes WCAG AA for normal text.

#9B0D22Cranberry

#D4A429Mustard

#00828BTeal

#D3CAB9Putty

Classic Cranberry & Mustard color palette

Modern Red Yellow Teal

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Cranberry	`#9B0D22`	`rgb(155, 13, 34)`	`hsl(351, 85%, 33%)`	`oklch(44.0% 0.170 22)`
Mustard	`#D4A429`	`rgb(212, 164, 41)`	`hsl(43, 68%, 50%)`	`oklch(74.4% 0.141 85)`
Teal	`#00828B`	`rgb(0, 130, 139)`	`hsl(184, 100%, 27%)`	`oklch(55.3% 0.094 203)`
Putty	`#D3CAB9`	`rgb(211, 202, 185)`	`hsl(39, 23%, 78%)`	`oklch(84.2% 0.025 83)`

Why it works and how to use it

Classic Cranberry & Mustard is a vivid complementary color palette tagged modern, red, yellow. Cranberry and Putty 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.

With 4 chromatic colors, Teal takes the lead while the rest support. Lightness runs from 27% to 78%. Well suited to websites, presentations and branding.

Background: Putty (#D3CAB9) is the lightest color, so it belongs on large surfaces.
Text: Cranberry (#9B0D22) on #D3CAB9 gives 5.22:1, passing WCAG AA.
Primary: Teal (#00828B) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Mustard (#D4A429) for highlights, badges and hover states.

1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Cranberry on Putty at 5.22:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Classic Cranberry & Mustard

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

#9B0D22

#D4A429

#00828B

#D3CAB9

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
`#9B0D22` on `#D3CAB9`	Aa	5.22:1	AA
`#9B0D22` on `#D4A429`	Aa	3.69:1	AA large only
`#00828B` on `#D3CAB9`	Aa	2.83:1	Fail
`#D4A429` on `#00828B`	Aa	2:1	Fail
`#9B0D22` on `#00828B`	Aa	1.85:1	Fail
`#D4A429` on `#D3CAB9`	Aa	1.41:1	Fail

Similar palettes 24 more in this mood