What are the hex codes in the Terra Hazelnut & Dusty Rose palette?

The Terra Hazelnut & Dusty Rose color palette consists of Dusty Rose #E1A986, Hazelnut #C28966, Cocoa #98694D, Coffee #724E36.

How should I use the Terra Hazelnut & Dusty Rose palette on a website?

Use Dusty Rose #E1A986 as the background, Coffee #724E36 for text, Hazelnut #C28966 for buttons and links, and Cocoa #98694D for accents. No pair inside the palette reaches 4.5:1, so add black or white for body text.

Which colors in Terra Hazelnut & Dusty Rose have enough contrast for text?

The highest-contrast pair is #E1A986 on #724E36 with a ratio of 3.58:1, which passes WCAG AA for large text only.

#E1A986Dusty Rose

#C28966Hazelnut

#98694DCocoa

#724E36Coffee

Terra Hazelnut & Dusty Rose color palette

Skin Tone Muted Warm Earthy Beige Brown

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Dusty Rose	`#E1A986`	`rgb(225, 169, 134)`	`hsl(23, 60%, 70%)`	`oklch(77.9% 0.082 53)`
Hazelnut	`#C28966`	`rgb(194, 137, 102)`	`hsl(23, 43%, 58%)`	`oklch(67.8% 0.085 52)`
Cocoa	`#98694D`	`rgb(152, 105, 77)`	`hsl(22, 33%, 45%)`	`oklch(56.3% 0.073 52)`
Coffee	`#724E36`	`rgb(114, 78, 54)`	`hsl(24, 36%, 33%)`	`oklch(45.7% 0.061 54)`

Why it works and how to use it

Terra Hazelnut & Dusty Rose is a monochromatic color palette tagged skin tone, muted, warm. All four colors sit within 2° 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 4 chromatic colors, Hazelnut takes the lead while the rest support. Lightness runs from 33% to 70%. Well suited to wellness, organic and outdoor brands.

Background: Dusty Rose (#E1A986) is the lightest color, so it belongs on large surfaces.
Text: Coffee (#724E36) on #E1A986 gives 3.58:1, enough for large headings only.
Primary: Hazelnut (#C28966) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Cocoa (#98694D) 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 Terra Hazelnut & Dusty Rose

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

#E1A986

#C28966

#98694D

#724E36

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
`#E1A986` on `#724E36`	Aa	3.58:1	AA large only
`#C28966` on `#724E36`	Aa	2.47:1	Fail
`#E1A986` on `#98694D`	Aa	2.29:1	Fail
`#C28966` on `#98694D`	Aa	1.58:1	Fail
`#98694D` on `#724E36`	Aa	1.56:1	Fail
`#E1A986` on `#C28966`	Aa	1.45:1	Fail

:root {
  --dusty-rose: #E1A986;
  --hazelnut: #C28966;
  --cocoa: #98694D;
  --coffee: #724E36;
}

$dusty-rose: #E1A986;
$hazelnut: #C28966;
$cocoa: #98694D;
$coffee: #724E36;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'dusty-rose': '#E1A986',
        'hazelnut': '#C28966',
        'cocoa': '#98694D',
        'coffee': '#724E36',
      },
    },
  },
};

{
  "name": "Terra Hazelnut & Dusty Rose",
  "colors": [
    "#E1A986",
    "#C28966",
    "#98694D",
    "#724E36"
  ]
}

background: linear-gradient(135deg, #E1A986, #C28966, #98694D, #724E36);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2024-12-03 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood