Palette

Sunbaked Adobe Wall

Warm, sun-baked tones reflecting the earthy hues of traditional adobe architecture under a clear sky.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sunbaked Adobe Wall 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 Sunbaked Adobe Wall.

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

Data visualization

#A34A2A#D17C4F#F7B28B#FFD7AF#FFEFD5

Palette guide

How to use Sunbaked Adobe Wall

Overview

The "Sunbaked Adobe Wall" palette evokes the rustic charm and natural warmth of desert landscapes and traditional architecture. Featuring a harmonious blend of earthy tones, it moves from the deep, rich terracotta of #A34A2A through the inviting mid-tones of #D17C4F and #F7B28B, culminating in the soft, luminous creams of #FFD7AF and #FFEFD5. This warm color scheme provides a comforting and grounded aesthetic, ideal for projects seeking an organic, handcrafted, or heritage feel. Designers and developers can leverage its natural gradient to create depth and visual interest, ensuring a cohesive and inviting user experience.

Best used for

Rustic brand identity and logos
Southwestern-themed interior design
Websites for artisans, potters, or natural product brands
E-commerce for handmade goods and crafts
Spa or wellness center branding
Autumnal or harvest-themed marketing materials

Suggested color roles

primary

#A34A2A. A deep, grounding terracotta, perfect for bold headlines, primary call-to-action buttons, or significant brand elements where a strong, earthy presence is desired.

secondary

#D17C4F. This rich, sun-kissed orange provides excellent support, ideal for subheadings, secondary buttons, or large content blocks to maintain warmth without overwhelming the design.

accent

#F7B28B. A bright, inviting peach that serves as a vibrant accent for interactive elements, highlights, or small decorative details, drawing attention without being overly bold.

background

#FFEFD5. The lightest, most airy cream, this color is excellent for main page backgrounds, large content areas, or card elements, providing a clean canvas that keeps the overall design warm.

text

#A34A2A. Use this deep terracotta for primary body text, ensuring excellent readability against lighter backgrounds like #FFEFD5. Alternatively, a dark charcoal or near-black can provide sharper contrast.

Accessibility notes

Ensure #A34A2A (primary) has sufficient contrast against #FFEFD5 (background) for body text to meet WCAG AA standards.
Avoid using mid-tones like #D17C4F or #F7B28B for small text on light backgrounds as contrast may be insufficient.
Reserve #FFD7AF for larger headings or graphical elements, as its lightness makes it unsuitable for standard text against #FFEFD5.
When pairing any palette color with #FFEFD5, always verify contrast ratios for both text and interactive elements.

Recommended combinations

Earthy Foundation

Ideal for main content areas, with #A34A2A for text, #FFEFD5 for background, and #D17C4F for supporting elements like borders or icons.

#A34A2A · #FFEFD5 · #D17C4F

Desert Sunset

Creates a soft, warm gradient effect for banners, hero sections, or illustrative elements, evoking a serene sunset.

#D17C4F · #F7B28B · #FFD7AF

Warm Highlight

Use #A34A2A for primary text/buttons, #FFEFD5 for backgrounds, and #FFD7AF as a delicate highlight or subtle interactive state.

#A34A2A · #FFD7AF · #FFEFD5

CSS variables

:root {
  --sunbaked-adobe-wall-1: #A34A2A;
  --sunbaked-adobe-wall-2: #D17C4F;
  --sunbaked-adobe-wall-3: #F7B28B;
  --sunbaked-adobe-wall-4: #FFD7AF;
  --sunbaked-adobe-wall-5: #FFEFD5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sunbaked-adobe-wall": {
        1: "#A34A2A",
        2: "#D17C4F",
        3: "#F7B28B",
        4: "#FFD7AF",
        5: "#FFEFD5",
      }
    }
  }
}

Hex values

Color 1#A34A2A

Color 2#D17C4F

Color 3#F7B28B

Color 4#FFD7AF

Color 5#FFEFD5

Accessibility

Contrast checker

1.9:1Fail

3.3:1AA18

4.4:1AA18

5.2:1AA

1.9:1Fail

1.7:1Fail

2.3:1Fail

2.8:1Fail

3.3:1AA18

1.7:1Fail

1.3:1Fail

1.6:1Fail

4.4:1AA18

2.3:1Fail

1.3:1Fail

1.2:1Fail

5.2:1AA

2.8:1Fail

1.6:1Fail

1.2:1Fail

Similar palettes

More like Sunbaked Adobe Wall