What are the hex codes in the Canyon Tan & Cocoa palette?

The Canyon Tan & Cocoa color palette consists of Walnut #61412E, Cocoa #8F5E40, Tan #E3BB67, Snow #FFF9F0.

How should I use the Canyon Tan & Cocoa palette on a website?

Use Snow #FFF9F0 as the background, Walnut #61412E for text, Tan #E3BB67 for buttons and links, and Cocoa #8F5E40 for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Walnut on Snow at 8.71:1.

Which colors in Canyon Tan & Cocoa have enough contrast for text?

The highest-contrast pair is #61412E on #FFF9F0 with a ratio of 8.71:1, which passes WCAG AA for normal text.

#61412EWalnut

#8F5E40Cocoa

#E3BB67Tan

#FFF9F0Snow

Canyon Tan & Cocoa color palette

Warm Earthy Brown White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Walnut	`#61412E`	`rgb(97, 65, 46)`	`hsl(22, 36%, 28%)`	`oklch(40.7% 0.054 51)`
Cocoa	`#8F5E40`	`rgb(143, 94, 64)`	`hsl(23, 38%, 41%)`	`oklch(52.8% 0.078 52)`
Tan	`#E3BB67`	`rgb(227, 187, 103)`	`hsl(41, 69%, 65%)`	`oklch(81.0% 0.113 84)`
Snow	`#FFF9F0`	`rgb(255, 249, 240)`	`hsl(36, 100%, 97%)`	`oklch(98.4% 0.014 78)`

Why it works and how to use it

Canyon Tan & Cocoa is a monochromatic color palette tagged warm, earthy, brown. All four colors sit within 19° of hue, so the scheme reads as one color explored across light and dark. Neither washed out nor loud, it adapts to most contexts. The overall temperature is warm.

With 3 chromatic colors, Tan takes the lead while the rest support. Lightness runs from 28% to 97%. Well suited to wellness, organic and outdoor brands.

Background: Snow (#FFF9F0) is the lightest color, so it belongs on large surfaces.
Text: Walnut (#61412E) on #FFF9F0 gives 8.71:1, passing WCAG AAA.
Primary: Tan (#E3BB67) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Cocoa (#8F5E40) for highlights, badges and hover states.

3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Walnut on Snow at 8.71:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Canyon Tan & Cocoa

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

#61412E

#8F5E40

#E3BB67

#FFF9F0

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
`#61412E` on `#FFF9F0`	Aa	8.71:1	AAA
`#8F5E40` on `#FFF9F0`	Aa	5.22:1	AA
`#61412E` on `#E3BB67`	Aa	5.02:1	AA
`#8F5E40` on `#E3BB67`	Aa	3.01:1	AA large only
`#E3BB67` on `#FFF9F0`	Aa	1.73:1	Fail
`#61412E` on `#8F5E40`	Aa	1.67:1	Fail

Similar palettes 24 more in this mood