uiwheel
Open Wheel
Base Hex: #E07A5F

Terracotta Color Wheel & UI Harmonies

#E17C60Hue 13°split-complementary

Drag the handle around the wheel or use sliders below

RGB(225, 124, 96)
Hue Angle13°
Saturation68%
Lightness63%

Generated Harmonies (3 Colors)

Primary Base

#E17C60

oklch(0.693 0.132 36.4)

Split Accent 1

#60E1BC

oklch(0.827 0.127 171.3)

Split Accent 2

#6085E1

oklch(0.632 0.145 265.9)

Design System Validation

Live UI Component Preview

UI

Apex Analytics

Team Dashboard

Harmonized Active
Total Conversion+18.4%

$84,290

Active Users+34.2%

14,820

Harmonic Health99.8%

Optimal

Interactive Button & State Styles

Verify clickability, state contrasts, and visual weight across primary and secondary controls.

Badge Tag (#6085E1)
Accessibility Audit

WCAG 2.1 Contrast Matrix

Evaluates minimum contrast ratios for regular body text (4.5:1 AA, 7:1 AAA) and large text (3:1).

Color RoleHexOn Pure White (#FFF)On Dark Obsidian (#0B0F19)Recommended Usage
Primary Base
#E17C60
2.90:1(Fail)
6.61:1(AA)
Best on Dark UI / Buttons
Split Accent 1
#60E1BC
1.62:1(Fail)
11.85:1(AAA)
Best on Dark UI / Buttons
Split Accent 2
#6085E1
3.54:1(AA (large text))
5.42:1(AA)
Best on Dark UI / Buttons
Design Token Generator

50–950 Tailwind Shade Ramp

Click any swatch to copy its HEX value. Formatted for Tailwind CSS v4 / v3 color configurations.

Developer Export Center

Ready-to-Use Code Snippets

// tailwind.config.js / CSS @theme
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#F9F6F5',
          100: '#F2EAE8',
          200: '#F2C6BA',
          300: '#EAA390',
          400: '#E0795C',
          500: '#E17C60',
          600: '#B44222',
          700: '#92351C',
          800: '#6B2714',
          900: '#4D180A',
          950: '#2D0E06',
        },
        secondary: '#60E1BC',
        accent: '#6085E1',
      }
    }
  }
};
Color Architecture & Design Systems

How to Use Terracotta in Digital Product Design

Terracotta (12° hue) brings baked earthenware warmth, artisan charm, and earthiness into digital design. It stands out from generic red or orange by infusing clay and brownish undertones, creating a grounded, human aesthetic.

✓Recommended UI Applications

Superb for culinary brands, architectural portfolios, travel platforms, and boutique e-commerce. Outstanding as an accent button or card highlight paired with sage greens and warm off-whites.

⚠Accessibility & Contrast Guidelines

Terracotta (#E07A5F) requires dark chocolate (#3D1308) or deep charcoal (#1E293B) text for body readability. Dark text passes WCAG AA (5.2:1 ratio).

Curated UI Pairings for Terracotta

Expertly tested color coordinates that harmonize with Terracotta without visual clashes.

Sage Complement

#81B29A

Split-complementary cooling partner creating natural equilibrium.

Deep Espresso

#3D405B

Moody navy-charcoal anchor for typography and structural borders.

Alabaster Cream

#F4F1DE

Warm paper texture canvas providing tactile, printed-matter vibes.

Terracotta Design System Token Specifications

Exact mathematical coordinates for design tokens, CSS variables, and modern style declarations.

HEX CODE

#E07A5F

RGB VALUE

rgb(224, 122, 95)

HSL VALUE

hsl(12°, 68%, 62%)

OKLCH VALUE

oklch(0.688 0.133 35.8)

Target Industries:Food & BeverageTravel & StaysCeramics & FashionEditorial Publishing

Frequently Asked Questions About Terracotta

What primary role should Terracotta take in a digital interface?

Terracotta (12° hue) brings baked earthenware warmth, artisan charm, and earthiness into digital design. It stands out from generic red or orange by infusing clay and brownish undertones, creating a grounded, human aesthetic. In software applications, it functions best as an intentional accent, call-to-action anchor, or branded container highlight rather than an overwhelming full-bleed background.

How do I maintain WCAG AA accessibility when using Terracotta?

Terracotta (#E07A5F) requires dark chocolate (#3D1308) or deep charcoal (#1E293B) text for body readability. Dark text passes WCAG AA (5.2:1 ratio). Always verify text and background luminance ratios using our real-time WCAG matrix table above before shipping to production.

How can I import Terracotta into Tailwind CSS?

Use our Code Export Center above to copy the ready-made 11-step shade scale (50 to 950) directly into your Tailwind v4 @theme or v3 tailwind.config.js file.

Explore More

Related Design Color Wheels

View all wheels →

Aesthetic

#9D8DF1

Dreamy, Pinterest-inspired palette featuring Y2K pastels, cottagecore greens, and warm 70s vintage tones.

Soft Autumn

#B86B53

Muted, warm earth-toned palette from 12-season color analysis — featuring terracotta, olive, and warm taupe.

Deep Winter

#1E3A8A

High-contrast, jewel-toned palette from 12-season analysis — featuring obsidian navy, icy cobalt, and cool ruby.

Soft Summer

#9B8EB9

Cool, desaturated smoky pastel palette — featuring dusty lavender, slate denim, and sea mist sage.