Back to palettes

Palette

Baked Earth

Warm, parched tones of ochre and terracotta, reminiscent of sun-baked earth and ancient clay pots.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Baked Earth reads on buttons, badges, and alerts before you commit.

This alert border and accent use the palette's detail color.

Marketing banner

Launch

Built with Baked Earth.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#CC7722#E49B0F#F2BB66#B26611#D18B1F

Palette guide

How to use Baked Earth

Overview

The Baked Earth palette features warm, parched tones of ochre and terracotta, strongly reminiscent of sun-baked earth and ancient clay pots. With hues ranging from the deep, rich #B26611 and #CC7722 to the brighter, sunnier #E49B0F and #F2BB66, this collection offers a truly natural and grounded aesthetic. Designers can leverage these shades to create robust, inviting, and authentic visual experiences. It's ideal for projects that seek to convey natural warmth, artisanal quality, and a connection to arid landscapes or traditional craftsmanship, bringing a rich, earthy feel to any design.

Best used for

  • Eco-friendly and sustainable brands
  • Desert-themed travel agencies
  • Pottery and ceramic workshops
  • Southwestern-inspired home decor
  • Organic food and natural products
  • Outdoor adventure gear

Suggested color roles

primary

#B26611 - A deep, grounding burnt orange, excellent for main branding, prominent headings, and establishing a robust, natural feel.

secondary

#CC7722 - A rich, vibrant terracotta, suitable for subheadings, navigation, and important informational panels, adding warmth and energy.

accent

#E49B0F - A bright, sunny ochre, perfect for highlights, interactive elements, or small decorative elements to add a touch of inviting lightness.

background

#F2BB66 - A light, warm tan-orange, providing an expansive, inviting, and clean backdrop for content.

text

#B26611 - Or #CC7722 for optimal readability against lighter backgrounds like #F2BB66 and #E49B0F.

Accessibility notes

  • Ensure #B26611 or #CC7722 text on #F2BB66 background meets WCAG AA contrast standards.
  • Avoid using #E49B0F for body text on #F2BB66 due to insufficient contrast.
  • When combining colors within this palette for text and background, always check contrast ratios, especially for smaller font sizes.
  • For critical information, always prioritize the darkest colors for text against the lightest backgrounds.

Recommended combinations

Arid Landscape

Creates a strong, earthy, and rustic feel, ideal for natural product branding or desert-themed designs.

#B26611 · #CC7722 · #D18B1F

Sunbaked Clay

Perfect for inviting, warm designs, showcasing natural textures and light, suitable for home decor or craft websites.

#F2BB66 · #E49B0F · #CC7722

Ochre Glow

A balanced combination for readability and aesthetic appeal, great for content sections or elegant presentations with an earthy touch.

#D18B1F · #F2BB66 · #B26611

CSS variables

:root {
  --baked-earth-1: #CC7722;
  --baked-earth-2: #E49B0F;
  --baked-earth-3: #F2BB66;
  --baked-earth-4: #B26611;
  --baked-earth-5: #D18B1F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "baked-earth": {
        1: "#CC7722",
        2: "#E49B0F",
        3: "#F2BB66",
        4: "#B26611",
        5: "#D18B1F",
      }
    }
  }
}

Related searches

earth tone color paletteterracotta color schemerustic orange brownarid landscape colorsnatural earth branding

Palette colors

Hex values

Color 1#CC7722
·
Color 2#E49B0F
·
Color 3#F2BB66
·
Color 4#B26611
·
Color 5#D18B1F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.9:1Fail
1.3:1Fail
1.2:1Fail
2
1.4:1Fail
1.3:1Fail
1.9:1Fail
1.2:1Fail
3
1.9:1Fail
1.3:1Fail
2.5:1Fail
1.6:1Fail
4
1.3:1Fail
1.9:1Fail
2.5:1Fail
1.5:1Fail
5
1.2:1Fail
1.2:1Fail
1.6:1Fail
1.5:1Fail

Similar palettes

More like Baked Earth

View all earth