What are the hex codes in the Mustard Weave palette?

The Mustard Weave color palette consists of Caramel #C9971C, Saffron #E4C36B, Cocoa #8A6A44, Linen #F5EEDF.

How should I use the Mustard Weave palette on a website?

Use Linen #F5EEDF as the background, Cocoa #8A6A44 for text, Caramel #C9971C for buttons and links, and Saffron #E4C36B for accents. No pair inside the palette reaches 4.5:1, so add black or white for body text.

Which colors in Mustard Weave have enough contrast for text?

The highest-contrast pair is #8A6A44 on #F5EEDF with a ratio of 4.3:1, which passes WCAG AA for large text only.

#C9971CCaramel

#E4C36BSaffron

#8A6A44Cocoa

#F5EEDFLinen

Mustard Weave color palette

Boho Warm Earthy Brown Yellow White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Caramel	`#C9971C`	`rgb(201, 151, 28)`	`hsl(43, 76%, 45%)`	`oklch(70.5% 0.138 83)`
Saffron	`#E4C36B`	`rgb(228, 195, 107)`	`hsl(44, 69%, 66%)`	`oklch(82.8% 0.114 89)`
Cocoa	`#8A6A44`	`rgb(138, 106, 68)`	`hsl(33, 34%, 40%)`	`oklch(54.7% 0.067 70)`
Linen	`#F5EEDF`	`rgb(245, 238, 223)`	`hsl(41, 52%, 92%)`	`oklch(95.1% 0.021 86)`

Why it works and how to use it

Mustard Weave is a monochromatic color palette tagged boho, warm, earthy. A monochromatic set: the same hue family from Cocoa down to Linen. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is warm.

With 4 chromatic colors, Caramel takes the lead while the rest support. Lightness runs from 40% to 92%. Well suited to wellness, organic and outdoor brands.

Background: Linen (#F5EEDF) is the lightest color, so it belongs on large surfaces.
Text: Cocoa (#8A6A44) on #F5EEDF gives 4.3:1, enough for large headings only.
Primary: Caramel (#C9971C) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Saffron (#E4C36B) 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 Mustard Weave

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

#C9971C

#E4C36B

#8A6A44

#F5EEDF

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
`#8A6A44` on `#F5EEDF`	Aa	4.3:1	AA large only
`#E4C36B` on `#8A6A44`	Aa	2.91:1	Fail
`#C9971C` on `#F5EEDF`	Aa	2.29:1	Fail
`#C9971C` on `#8A6A44`	Aa	1.88:1	Fail
`#C9971C` on `#E4C36B`	Aa	1.55:1	Fail
`#E4C36B` on `#F5EEDF`	Aa	1.48:1	Fail

Similar palettes 26 more in this mood