ColorSense Blog
Terracotta Earth Color Palette (2026): HEX Codes and Accessible Dark Pairings
The Terracotta Earth summer 2026 palette: five sun-baked HEX codes — terracotta and rust grounded by cream and deep coffee — with measured WCAG AAA pairings and CSS.
Terracotta Earth is the sun-baked palette of summer 2026: warm terracotta and rust grounded by cream and deep coffee. It is part of our wider collection of 13 summer 2026 color palettes, and it is the one to reach for when you want an earthy, Mediterranean warmth that still feels modern.
The Terracotta Earth palette: Burn Sienna, Mojo, Caramel, White Onyx, and Coffee Bean.
The 5 Colors in the Terracotta Earth Palette
Burn Sienna #C4603A
A warm burnt terracotta and the signature tone of the palette. Use it for large fills, hero blocks, and headings as a fill rather than small text.
Mojo #C84B35
A brighter rust red that adds energy and a sun-baked contrast. Strong for primary buttons and framing elements.
Caramel #C49A6C
A warm golden tan that softens the reds and adds a natural, sandy base. Good for secondary surfaces and warm accents.
White Onyx #E8E4DE
A warm off-white with a soft greige undertone. Best used as your primary page background or card surface.
Coffee Bean #3D2314
The deepest tone in the set, an almost-black brown. It is the natural body-text color and anchors logos and headings.
Accessible Dark Pairings (WCAG AAA)
Terracotta Earth carries its own deep anchor, so the off-white pairs with the palette's own coffee brown to clear AAA without an outside color. The pairing below was calculated directly with the WCAG contrast formula and clears the AAA threshold of 7:1. Because contrast is symmetric, the ratio holds whether the brown is the text or the background.
11.45:1 contrastAAA
Coffee Bean
#3D2314
Burn Sienna, Mojo, and Caramel are accents, not body text. Measured on white, Burn Sienna #C4603A reaches 4.13:1, Mojo #C84B35 4.65:1, and Caramel #C49A6C 2.57:1 — short of the 7:1 AAA mark, which is normal for warm earth mid-tones. Use them for fills, buttons, and headings. For body copy, Coffee Bean #3D2314 reaches 14.49:1 on white, so it clears AAA as text without any outside neutral.
Try it now
Check any color pair against WCAG — free, no signup
Pick a foreground and background, see the exact contrast ratio plus AA/AAA verdicts for normal and large text. One click auto-fixes a failing pair while keeping your hue.
Open WCAG Contrast Checker →
How to Use Terracotta Earth
Web and UI: use White Onyx #E8E4DE as your page background, Burn Sienna #C4603A for hero blocks and headings, Mojo for primary buttons, Caramel for secondary surfaces, and Coffee Bean #3D2314 for body text. The palette works without an outside color.
Branding and print: the palette suits Mediterranean and artisanal brands, interiors, pottery and home goods, and warm hospitality. Lead with terracotta, ground it with coffee, and let cream open up the layout.
Social and editorial: Terracotta Earth glows behind clay, stone, and sun-drenched photography. Keep large areas cream and terracotta and use Coffee Bean for crisp, readable text.
Terracotta Earth CSS Variables
Paste this straight into your stylesheet to use the palette as design tokens, including the accessible dark tones for text:
:root {
--burn-sienna: #C4603A;
--mojo: #C84B35;
--caramel: #C49A6C;
--white-onyx: #E8E4DE;
--coffee-bean: #3D2314;
/* accessible dark tones for text and UI */
--coffee-bean: #3D2314;
}
Want this palette turned into a complete brand kit with matching fonts, contrast checks, and Tailwind and Figma tokens? Run it through the ColorSense Brand Kit, or pull a related set from your own image with the Color Picker.
Terracotta Earth is one of 13 summer 2026 color palettes in our full guide. Browse the rest for pastels, brights, and coastal blues.
Take it further
Turn any palette into a full brand kit
ColorSense AI Brand Kit pairs your palette with matching fonts, accessibility checks, and export-ready CSS, Tailwind, and Figma tokens.
Build a Brand Kit →