Back to Blog

Terracotta Color Palette: Hex Codes, Shades & Combinations

Build a complete terracotta color palette from #E2725B—ten clay-to-brown shades, four combinations with sage and navy, and branding notes for warm earthy design.

•10 min read

Terracotta = #E2725B

Canonical terracotta hex code and terracotta rgb (226, 114, 91)—copy hex, RGB, or HSL for tokens.

Hex
#E2725B
RGB
rgb(226, 114, 91)
HSL
hsl(11, 70%, 62%)

Whether you search for a terracotta hex code, a terracotta colour code in UK guides, or the split spelling terra cotta color code, you want the same sun-baked clay anchor: #E2725B. The terracotta color code maps to rgb(226, 114, 91)—a muted orange-red that reads artisanal on cream and credible next to sage or navy. This guide packages ten shades, four four-color combinations, and UI patterns so home, food, and travel brands ship one coherent terracotta color palette instead of five similar oranges from different decks.

Paint catalogs and tile showrooms often label swatches “terra cotta” without a digital hex—document #E2725B as your canonical terra cotta hex code in Figma and CSS so web, app, and print stay aligned. When packaging must match photography of real clay, note the delta between screen terracotta and Pantone or CMYK specs in your brand PDF.

Terracotta Shades — Hex Code Table

From airy linen and peach through core terracotta to rust, umber, and chocolate. Light rows for backgrounds; #E2725B and rust for CTAs and pressed states.

SwatchShadeHex
Linen
#FAF0E6
Peach puff
#FFDAB9
Apricot
#FBCEB1
Light terracotta
#E8956D
Terracotta
#E2725B
Burnt sienna
#E97451
Rust
#B7410E
Burnt umber
#8A3324
Chocolate
#7B3F00
Dark brown
#5C2E00

Terracotta Color Palette Combinations

Four ready-made palettes with copy-ready hex codes. Use terracotta as the warm accent—CTAs, badges, illustration fills—and keep cream or white for long reading so pages do not feel like solid clay.

  • Terracotta + Sage + Cream

    Modern organic retail: terracotta CTAs (#E2725B), sage navigation (#B2AC88), cream shelves (#FFFDD0), charcoal captions.

    • Terracotta: #E2725B
    • Sage: #B2AC88
    • Cream: #FFFDD0
    • Charcoal: #36454F

  • Terracotta + Navy + White

    Structured contrast: navy heroes (#000080), terracotta accents, white product cards, cool gray secondary text.

    • Terracotta: #E2725B
    • Navy: #000080
    • White: #FFFFFF
    • Slate: #64748B

  • Terracotta + Cream + Rust

    Hospitality and ceramics: cream walls, rust #B7410E pressed states, terracotta primary buttons on linen #FAF0E6.

    • Terracotta: #E2725B
    • Linen: #FAF0E6
    • Rust: #B7410E
    • Apricot: #FBCEB1

  • Terracotta + Dusty rose + Ivory

    Soft lifestyle editorial: dusty rose tags (#DCAE96), ivory reading wells (#FFFFF0), terracotta mastheads.

    • Terracotta: #E2725B
    • Dusty rose: #DCAE96
    • Ivory: #FFFFF0
    • Umber: #8A3324

Terracotta in UI Design

Food and CPG. Terracotta #E2725B primary buttons on white or cream (#FFFDD0) echo packaging without neon orange alarm. Rust #B7410E suits hover and active states; validate white label text with the contrast checker.

Home and travel. Pair terracotta with sage #B2AC88 for Mediterranean calm, or navy #000080 for editorial structure. Linen #FAF0E6 section backgrounds keep photography forward.

Forms and seasonal skins. Apricot #FBCEB1 makes soft highlight wells; reserve saturated terracotta for submits and sale ribbons. Seed #E2725B in the palette generator to build autumn tint ramps on one hue angle.

Terracotta in Branding

Terracotta signals craft, earth, and warmth—ceramic studios, farm-to-table grocers, boutique hotels, and sustainable fashion use a terracotta color palette because it feels human next to kraft brown and corporate blue. Sage + cream reads organic; navy + white reads trustworthy; dusty rose + ivory updates the story for beauty without losing heat.

Logo marks on white need rust or umber companions for small-size legibility; logos on terracotta fields should invert to cream or white with tested stroke weights. Document forbidden pairs—such as light terracotta captions on peach backgrounds—in your design system README so CMS authors do not drift off-palette.

Multi-channel teams should list one digital terracotta hex (#E2725B) and a separate print reference when ink gain shifts clay toward brown. Teams that skip that split inevitably compensate in each export and lose a coherent brand color story across social, web, and packaging.

FAQ

What is the terracotta color code?
The standard terracotta color code is #E2725B in hex and rgb(226, 114, 91). Rust (#B7410E) and burnt umber (#8A3324) are common darker companions for navigation and hover states.
What is the terra cotta hex code?
Terra cotta hex code is the same as terracotta: #E2725B. Spelling varies in search (terra cotta vs terracotta); digital values do not change.
What colors go in a terracotta color palette?
Pair terracotta with sage (#B2AC88), cream (#FFFDD0), navy (#000080), and charcoal (#36454F). Use rust and umber rows from the shade table for depth.
Is terracotta good for website UI?
Yes for food, home, travel, and wellness brands. Use terracotta for CTAs and accents, cream or white for reading areas, and validate white or dark labels on terracotta buttons with a contrast checker.

Build your palette

Use our free tools to create and test your color palette.

Color Palette GeneratorWCAG Contrast Checker

Related: Terracotta Hex Code (#E2725B) · Sage Green Hex Code · Burgundy Color Palette