What are the hex codes in the Canyon Terracotta & Dusty Rose palette?

The Canyon Terracotta & Dusty Rose color palette consists of Melon #F8C4B1, Dusty Rose #E7A390, Terracotta #CB8575, Clay #A3655A.

How should I use the Canyon Terracotta & Dusty Rose palette on a website?

Use Melon #F8C4B1 as the background, Clay #A3655A for text, Dusty Rose #E7A390 for buttons and links, and Terracotta #CB8575 for accents. No pair inside the palette reaches 4.5:1, so add black or white for body text.

Which colors in Canyon Terracotta & Dusty Rose have enough contrast for text?

The highest-contrast pair is #F8C4B1 on #A3655A with a ratio of 2.96:1, which does not meet WCAG AA; add a darker or lighter neutral for body text.

#F8C4B1Melon

#E7A390Dusty Rose

#CB8575Terracotta

#A3655AClay

Canyon Terracotta & Dusty Rose color palette

Skin Tone Muted Warm Romantic Earthy Beige Brown

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Melon	`#F8C4B1`	`rgb(248, 196, 177)`	`hsl(16, 84%, 83%)`	`oklch(86.2% 0.065 41)`
Dusty Rose	`#E7A390`	`rgb(231, 163, 144)`	`hsl(13, 64%, 74%)`	`oklch(77.6% 0.086 36)`
Terracotta	`#CB8575`	`rgb(203, 133, 117)`	`hsl(11, 45%, 63%)`	`oklch(68.4% 0.090 33)`
Clay	`#A3655A`	`rgb(163, 101, 90)`	`hsl(9, 29%, 50%)`	`oklch(57.2% 0.083 31)`

Why it works and how to use it

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

Background: Melon (#F8C4B1) is the lightest color, so it belongs on large surfaces.
Text: Clay (#A3655A) on #F8C4B1 gives 2.96:1, so pair it with a darker neutral for body copy.
Primary: Dusty Rose (#E7A390) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Terracotta (#CB8575) 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 Terracotta & 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

#F8C4B1

#E7A390

#CB8575

#A3655A

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
`#F8C4B1` on `#A3655A`	Aa	2.96:1	Fail
`#E7A390` on `#A3655A`	Aa	2.2:1	Fail
`#F8C4B1` on `#CB8575`	Aa	1.89:1	Fail
`#CB8575` on `#A3655A`	Aa	1.57:1	Fail
`#E7A390` on `#CB8575`	Aa	1.4:1	Fail
`#F8C4B1` on `#E7A390`	Aa	1.35:1	Fail

:root {
  --melon: #F8C4B1;
  --dusty-rose: #E7A390;
  --terracotta: #CB8575;
  --clay: #A3655A;
}

$melon: #F8C4B1;
$dusty-rose: #E7A390;
$terracotta: #CB8575;
$clay: #A3655A;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'melon': '#F8C4B1',
        'dusty-rose': '#E7A390',
        'terracotta': '#CB8575',
        'clay': '#A3655A',
      },
    },
  },
};

{
  "name": "Canyon Terracotta & Dusty Rose",
  "colors": [
    "#F8C4B1",
    "#E7A390",
    "#CB8575",
    "#A3655A"
  ]
}

background: linear-gradient(135deg, #F8C4B1, #E7A390, #CB8575, #A3655A);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2025-12-18 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood