Organic Mineral Terracotta, Clay & Botanical Greens Category: Nature 27,100/mo searches

Earth Tones Color Palette — HEX Codes, Swatches & UI Palette

Rooted in river stones, rich terracotta soil, olive groves, and desert canyons. A grounding, sustainable palette that communicates authenticity, environmental consciousness, and timeless craftsmanship.

Warm Primary Accent

Terracotta Earth

#C86446

Muted Olive Tone

Sage Botanical

#8A9A5B

Deep Earth Neutral

Raw Umber

#734A2E

Organic Canvas

Warm Sandstone

#E0CEB5

Grounding Dark Contrast

Forest Pine

#2E473B

Open in Web Studio Color Wheel Tint & Shade Scale

Color Swatches & Technical Specifications

Exact color codes, luminance values, and WCAG contrast ratings for each swatch in the Earth Tones Color Palette.

Terracotta Earth

Warm Primary Accent

HEX #C86446

RGB rgb(200, 100, 70)

HSL hsl(14deg, 54%, 53%)

vs White: 3.91:1 (AA Large) vs Black: 5.37:1 (AA)

Sage Botanical

Muted Olive Tone

HEX #8A9A5B

RGB rgb(138, 154, 91)

HSL hsl(75deg, 26%, 48%)

vs White: 3.06:1 (AA Large) vs Black: 6.85:1 (AA)

Raw Umber

Deep Earth Neutral

HEX #734A2E

RGB rgb(115, 74, 46)

HSL hsl(24deg, 43%, 32%)

vs White: 7.64:1 (AAA) vs Black: 2.75:1 (Fail)

Warm Sandstone

Organic Canvas

HEX #E0CEB5

RGB rgb(224, 206, 181)

HSL hsl(35deg, 41%, 79%)

vs White: 1.54:1 (Fail) vs Black: 13.67:1 (AAA)

Forest Pine

Grounding Dark Contrast

HEX #2E473B

RGB rgb(46, 71, 59)

HSL hsl(151deg, 21%, 23%)

vs White: 10.1:1 (AAA) vs Black: 2.08:1 (Fail)

UI Design & Color Hierarchy Guide

Ideal for architectural firms, interior designers, sustainable apparel, and ceramic studios. Terracotta and sage green provide an organic visual dialogue that feels reassuring and human.

60% Dominant Base

Use the primary neutral/light swatch (Warm Sandstone) for canvas backgrounds and card surfaces.

30% Structural Secondary

Apply midtones for navigation bars, card headers, borders, and secondary buttons.

10% Accent Callout

Reserve high-saturation focal colors for CTAs, conversion badges, and active state highlights.

WCAG 2.1 Accessibility & Contrast Matrix

Legibility ratings between palette elements and key backgrounds (Lightest: Warm Sandstone | Darkest: Forest Pine):

Swatch	Contrast vs Light Canvas	Contrast vs Dark Canvas
Terracotta Earth (#C86446)	2.55:1 Fail	2.58:1 Fail
Sage Botanical (#8A9A5B)	1.99:1 Fail	3.3:1 AA Large
Raw Umber (#734A2E)	4.97:1 AA	1.32:1 Fail
Warm Sandstone (#E0CEB5)	1.0:1 Fail	6.57:1 AA
Forest Pine (#2E473B)	6.57:1 AA	1.0:1 Fail

CSS Custom Properties & Design Tokens

Copy and paste production-ready tokens directly into your CSS stylesheet or Tailwind CSS configuration:

CSS Variables

:root {
  --color-1: #C86446; /* Terracotta Earth - Warm Primary Accent */
  --color-2: #8A9A5B; /* Sage Botanical - Muted Olive Tone */
  --color-3: #734A2E; /* Raw Umber - Deep Earth Neutral */
  --color-4: #E0CEB5; /* Warm Sandstone - Organic Canvas */
  --color-5: #2E473B; /* Forest Pine - Grounding Dark Contrast */
}

Tailwind CSS Config

{
  colors: {
    'palette-1': '#C86446',
    'palette-2': '#8A9A5B',
    'palette-3': '#734A2E',
    'palette-4': '#E0CEB5',
    'palette-5': '#2E473B'
  }
}

Explore More Curated Color Palettes

Browse seasonal palettes, retro aesthetic color schemes, nature tones, and dark mode themes.

All Color Palettes Named Color Dictionary Interactive Color Wheel