Palette

Pueblo Earth Adobe

Rich, warm tones of terracotta, adobe, and sand evoke the ancient, sun-drenched landscapes of the Southwest.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Pueblo Earth Adobe 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 Pueblo Earth Adobe.

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

Data visualization

#9B5927#CC8C42#E0AF62#F4D39C#75451D

Palette guide

How to use Pueblo Earth Adobe

Overview

The "Pueblo Earth Adobe" palette draws inspiration from the sun-drenched landscapes and traditional architecture of the American Southwest. Featuring rich, earthy tones like the deep brown #75451D, warm terracotta #9B5927, and glowing adobe hues such as #CC8C42 and the sandy #F4D39C, this collection evokes natural warmth and rustic charm. Designers can leverage these hex codes for projects that require an organic, heritage, or artisanal aesthetic. Developers will find this palette excellent for creating inviting web designs, cozy e-commerce sites, or branding for handcrafted goods, ensuring a grounded and authentic user experience.

Best used for

Southwestern-themed websites
Handmade craft marketplaces
Eco-friendly product branding
Rustic interior design blogs
Adventure travel agencies
Natural food packaging

Suggested color roles

primary

#9B5927 - A warm, inviting terracotta, perfect for main content areas, prominent headings, or calls-to-action that convey authenticity and warmth.

secondary

#CC8C42 - A lighter, golden adobe, excellent for secondary navigation, decorative borders, or background elements that need a touch of sun.

accent

#E0AF62 - A brighter, sandy orange, ideal for subtle highlights, interactive elements, or small details that mimic sun-kissed textures.

background

#F4D39C - A very light, warm sand color, providing an airy and natural base for content, allowing darker text to stand out clearly.

text

#75451D - The deepest brown in the palette, offering superb contrast and a natural feel for body text against the lighter, earthy backgrounds.

Accessibility notes

Ensure #75451D is used for body text on #F4D39C or #E0AF62 backgrounds for optimal readability.
Avoid using lighter shades like #E0AF62 or #CC8C42 for small text without strong contrast.
The warmer mid-tones blend well but require careful text pairing to meet WCAG contrast standards.
Consider a very dark brown or charcoal for main text against the lightest background for maximum legibility.

Recommended combinations

Desert Sunset

Ideal for creating rich, layered backgrounds or graphic elements that evoke the warm, receding light of a desert evening.

#75451D · #9B5927 · #E0AF62

Adobe Structure

Excellent for clean, earthy layouts, using the light sand for backgrounds and the warmer tones for content blocks and headings.

#F4D39C · #CC8C42 · #9B5927

Earthy Highlight

Use for call-to-action buttons or important information where a warm, inviting, yet distinct contrast is desired.

#CC8C42 · #75451D · #E0AF62

CSS variables

:root {
  --pueblo-earth-adobe-1: #9B5927;
  --pueblo-earth-adobe-2: #CC8C42;
  --pueblo-earth-adobe-3: #E0AF62;
  --pueblo-earth-adobe-4: #F4D39C;
  --pueblo-earth-adobe-5: #75451D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "pueblo-earth-adobe": {
        1: "#9B5927",
        2: "#CC8C42",
        3: "#E0AF62",
        4: "#F4D39C",
        5: "#75451D",
      }
    }
  }
}

Hex values

Color 1#9B5927

Color 2#CC8C42

Color 3#E0AF62

Color 4#F4D39C

Color 5#75451D

Accessibility

Contrast checker

1.9:1Fail

2.7:1Fail

3.8:1AA18

1.5:1Fail

1.9:1Fail

1.4:1Fail

2:1Fail

2.8:1Fail

2.7:1Fail

1.4:1Fail

4:1AA18

3.8:1AA18

2:1Fail

1.4:1Fail

5.6:1AA

1.5:1Fail

2.8:1Fail

4:1AA18

5.6:1AA

Similar palettes

More like Pueblo Earth Adobe

Pueblo Earth Adobe

See it in context.

Ready when you are.

Built with Pueblo Earth Adobe.

How to use Pueblo Earth Adobe

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Desert Sunset

Adobe Structure

Earthy Highlight

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Pueblo Earth Adobe