#707A5FShadow
#945F14Cocoa
#544916Sepia
#563225Taupe

Canyon Cocoa & Sepia color palette

EarthyWarmBrown
Open in generator
Ask AI about this palette: ChatGPTClaudePerplexity

Canyon Cocoa & Sepia is a dark, analogous color palette tagged earthy, warm, brown. Analogous neighbors on the wheel (Cocoa, Sepia, Taupe) give it a natural, low-tension flow. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is warm.

Color codes click any value to copy

SwatchNameHEXRGBHSLOKLCH
Shadow#707A5Frgb(112, 122, 95)hsl(82, 12%, 43%)oklch(56.3% 0.042 124)
Cocoa#945F14rgb(148, 95, 20)hsl(35, 76%, 33%)oklch(53.1% 0.108 69)
Sepia#544916rgb(84, 73, 22)hsl(49, 58%, 21%)oklch(40.6% 0.070 97)
Taupe#563225rgb(86, 50, 37)hsl(16, 40%, 24%)oklch(35.8% 0.057 41)

Why it works and how to use it

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

  • Background: Shadow (#707A5F) is the lightest color, so it belongs on large surfaces.
  • Text: Taupe (#563225) on #707A5F gives 2.47:1, so pair it with a darker neutral for body copy.
  • Primary: Cocoa (#945F14) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
  • Accent: Sepia (#544916) 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 Canyon Cocoa & Sepia

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
Card title
Card title
Roles are assigned by lightness.

Color blindness simulation

#707A5F
#945F14
#544916
#563225

Color-blind check: under deuteranopia, Shadow and Cocoa become hard to tell apart, so do not rely on that pair alone to carry meaning.

Contrast check WCAG ratios between palette colors

PairSampleRatioLevel
#707A5F on #563225Aa2.47:1Fail
#945F14 on #563225Aa2.08:1Fail
#707A5F on #544916Aa1.98:1Fail
#945F14 on #544916Aa1.67:1Fail
#544916 on #563225Aa1.25:1Fail
#707A5F on #945F14Aa1.19:1Fail

Similar palettes 24 more in this mood

More earthy palettes →More warm palettes →More brown palettes →