Back to palettes

Palette

Desert Hearth Warmth

The comforting, rustic warmth of an adobe hearth in a sun-drenched desert home.

warmnatural5 colors
More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Desert Hearth Warmth 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 Desert Hearth Warmth.

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

Data visualization

#A0522D#B76E4B#CE8B6A#E4A88B#FBBF9C

Palette guide

How to use Desert Hearth Warmth

Overview

The Desert Hearth Warmth palette exudes a comforting, rustic charm, inspired by the cozy glow of an adobe hearth. This warm, inviting gradient moves from the deep #A0522D to the soft #FBBF9C, offering a cohesive and harmonious range of earthy oranges and browns. Designers can utilize this palette to create spaces and interfaces that feel grounded, welcoming, and natural. The progression of shades like #B76E4B and #CE8B6A makes it excellent for subtle depth and visual interest, perfect for rustic branding, cozy web themes, or editorial content that aims to evoke a sense of home and comfort in a natural setting.

Best used for

  • Rustic home decor branding
  • Cozy café or bakery websites
  • Southwestern-themed events
  • Natural textile design
  • Handcrafted product packaging
  • Autumnal marketing campaigns

Suggested color roles

primary

Use #A0522D as a rich, grounding primary for headers or strong branding elements, signifying stability.

secondary

Employ #CE8B6A for secondary backgrounds or content sections, offering a softer, inviting tone.

accent

Introduce #B76E4B as a warm accent for interactive elements or important highlights, providing visual interest.

background

Apply #FBBF9C for light, airy backgrounds, allowing the deeper, warmer tones to shine effectively.

text

Utilize #A0522D or a deep brown for primary text, ensuring excellent readability against lighter shades.

Accessibility notes

  • Ensure #A0522D is used for text against #E4A88B or #FBBF9C for optimal contrast.
  • Avoid using adjacent colors like #CE8B6A and #E4A88B for small text due to low contrast.
  • The darkest shade, #A0522D, provides strong contrast for headings on any lighter color.
  • Always verify text contrast for accessibility, especially when layering similar tones for body text.

Recommended combinations

Hearth Glow

Creates a soft, luminous background for content or subtle gradient effects.

#FBBF9C · #E4A88B · #CE8B6A

Adobe Warmth

Effective for strong branding, navigation, or impactful visual elements.

#A0522D · #B76E4B · #CE8B6A

Desert Ember

Provides a balanced, cozy aesthetic for product displays or feature blocks.

#E4A88B · #A0522D · #FBBF9C

CSS variables

:root {
  --desert-hearth-warmth-1: #A0522D;
  --desert-hearth-warmth-2: #B76E4B;
  --desert-hearth-warmth-3: #CE8B6A;
  --desert-hearth-warmth-4: #E4A88B;
  --desert-hearth-warmth-5: #FBBF9C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "desert-hearth-warmth": {
        1: "#A0522D",
        2: "#B76E4B",
        3: "#CE8B6A",
        4: "#E4A88B",
        5: "#FBBF9C",
      }
    }
  }
}

Related searches

rustic desert colorswarm earthy paletteadobe home designcozy natural huessouthwestern color schemes

Palette colors

Hex values

Color 1#A0522D
·
Color 2#B76E4B
·
Color 3#CE8B6A
·
Color 4#E4A88B
·
Color 5#FBBF9C
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2:1Fail
2.7:1Fail
3.5:1AA18
2
1.4:1Fail
1.4:1Fail
1.9:1Fail
2.4:1Fail
3
2:1Fail
1.4:1Fail
1.4:1Fail
1.7:1Fail
4
2.7:1Fail
1.9:1Fail
1.4:1Fail
1.3:1Fail
5
3.5:1AA18
2.4:1Fail
1.7:1Fail
1.3:1Fail

Similar palettes

More like Desert Hearth Warmth

View all warm
Canyon Vista Radiance
Dusty Canyon Trails
Terracotta Hearth Warm
Artisan Loaf Hearth
Autumn Harvest Berry
Baked Clay Pottery