Palette

Sunbaked Ochre Wall

A rich, earthy palette reminiscent of sunbaked ochre walls in an ancient, warm landscape.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#AB5B00#D38C3B#F0C17E#F9E4BE#FFF4DC

Palette guide

How to use Sunbaked Ochre Wall

Overview

The Sunbaked Ochre Wall palette offers a rich, earthy collection inspired by ancient, sun-drenched structures. This selection of five warm, inviting hues is perfect for designers and developers seeking to convey history, warmth, and natural elegance. From the deep ochre of #AB5B00, through the bright #D38C3B and the glowing #F0C17E, to the soft, creamy #FFF4DC, these colors provide a harmonious range. The slightly darker #F9E4BE acts as a gentle bridge, enabling versatile applications that evoke a sense of timeless beauty and organic warmth in any digital or physical project.

Best used for

Historical or cultural institution websites
Branding for artisanal food or craft businesses
Interior design projects with a Mediterranean or rustic feel
Travel blogs focusing on ancient sites or desert landscapes
Packaging design for natural beauty products
Themed event branding with an earthy, warm aesthetic

Suggested color roles

primary

Use #AB5B00 as a strong, grounding primary color for headers, important calls-to-action, or brand logos.

secondary

Apply #D38C3B for supporting sections, subheadings, or background elements that need a vibrant touch.

accent

Utilize #F0C17E to draw attention to key details, highlights, or interactive elements, offering a soft glow.

background

Employ #FFF4DC as a clean, very light background for content, ensuring maximum readability and an airy feel.

text

For text, use #AB5B00 or a dark charcoal on lighter backgrounds, and white on darker elements like #AB5B00 for contrast.

Accessibility notes

Ensure sufficient contrast when placing text on lighter shades like #F9E4BE or #FFF4DC; dark text is crucial.
Check the contrast of #F0C17E against #F9E4BE if used for smaller text or icons.
The darkest color, #AB5B00, provides excellent contrast for white or light-colored text.
Avoid using light text on #D38C3B unless the contrast ratio is thoroughly checked to meet accessibility standards.

Recommended combinations

Ancient Glow

Perfect for creating a warm, inviting welcome section with strong visual hierarchy.

#AB5B00 · #F0C17E · #FFF4DC

Ochre Harmony

Ideal for content blocks, offering a balanced and naturally appealing visual flow.

#D38C3B · #F9E4BE · #AB5B00

Sun-Kissed Wall

Excellent for subtle backgrounds or graphic elements that require a soft, bright, and unified look.

#F0C17E · #F9E4BE · #D38C3B

CSS variables

:root {
  --sunbaked-ochre-wall-1: #AB5B00;
  --sunbaked-ochre-wall-2: #D38C3B;
  --sunbaked-ochre-wall-3: #F0C17E;
  --sunbaked-ochre-wall-4: #F9E4BE;
  --sunbaked-ochre-wall-5: #FFF4DC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sunbaked-ochre-wall": {
        1: "#AB5B00",
        2: "#D38C3B",
        3: "#F0C17E",
        4: "#F9E4BE",
        5: "#FFF4DC",
      }
    }
  }
}

Hex values

Color 1#AB5B00

Color 2#D38C3B

Color 3#F0C17E

Color 4#F9E4BE

Color 5#FFF4DC

Accessibility

Contrast checker

1.8:1Fail

3:1Fail

4:1AA18

4.5:1AA

1.8:1Fail

1.7:1Fail

2.2:1Fail

2.5:1Fail

3:1Fail

1.7:1Fail

1.3:1Fail

1.5:1Fail