Back to palettes

Palette

Arid Blossom

Soft, sun-baked hues reflecting the delicate blooms of the desert against parched, arid lands.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Arid Blossom 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 Arid Blossom.

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

Data visualization

#C49A6C#D8AF7C#EBC08B#F9D6B3#8B653D

Palette guide

How to use Arid Blossom

Overview

The Arid Blossom palette offers a rich, sun-baked collection of earthy tones, mirroring the delicate blooms of the desert against parched lands. Ranging from the deep #8B653D to the luminous #F9D6B3, with versatile mid-tones like #C49A6C, #D8AF7C, and #EBC08B, this palette exudes natural warmth and organic elegance. It’s perfect for designers seeking a grounded, authentic, and inviting aesthetic. These shades are excellent for creating rustic branding, warm digital interfaces, or any project that benefits from a natural, artisanal, or handcrafted feel. It's a truly harmonious and versatile collection for various applications.

Best used for

  • Handmade craft and artisan products
  • Coffee shop or bakery branding
  • Nature-inspired photography websites
  • Rustic home decor e-commerce
  • Sustainable and ethical fashion brands
  • Outdoor lifestyle blogs

Suggested color roles

primary

Use #C49A6C as a warm, inviting primary color for main sections or prominent text, providing a friendly foundation.

secondary

Employ #D8AF7C or #EBC08B for supporting elements, subheadings, or background panels, adding gentle variation.

accent

Apply #8B653D sparingly for key accents, calls to action, or important details, adding depth and grounding.

background

Utilize #F9D6B3 for light, expansive backgrounds, creating an airy and warm canvas that lets darker elements pop.

text

For body text, a dark brown or charcoal (e.g., #4A311F) offers excellent readability. #8B653D works well for headings on lighter backgrounds.

Accessibility notes

  • Ensure sufficient contrast for text on #F9D6B3 backgrounds; #8B653D is a strong choice for text.
  • Avoid using #EBC08B or #D8AF7C for small text on #F9D6B3 due to potential contrast issues.
  • Text in #8B653D on #F9D6B3 provides strong readability, meeting WCAG AA standards.
  • For general body text, a very dark brown will ensure optimal readability across the lighter palette shades.

Recommended combinations

Sun-baked Earth

Creates a warm, inviting, and natural feel, perfect for artisanal products or rustic themes.

#F9D6B3 · #EBC08B · #C49A6C

Desert Depth

Provides a strong contrast and depth, ideal for highlighting key information or calls to action.

#D8AF7C · #8B653D · #F9D6B3

Golden Glow

Useful for subtle background gradients or textured elements, adding visual interest and warmth.

#C49A6C · #EBC08B · #D8AF7C

CSS variables

:root {
  --arid-blossom-1: #C49A6C;
  --arid-blossom-2: #D8AF7C;
  --arid-blossom-3: #EBC08B;
  --arid-blossom-4: #F9D6B3;
  --arid-blossom-5: #8B653D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "arid-blossom": {
        1: "#C49A6C",
        2: "#D8AF7C",
        3: "#EBC08B",
        4: "#F9D6B3",
        5: "#8B653D",
      }
    }
  }
}

Related searches

desert earth tone palettewarm natural color schemesandy brown designrustic floral palettegolden beige colors

Palette colors

Hex values

Color 1#C49A6C
·
Color 2#D8AF7C
·
Color 3#EBC08B
·
Color 4#F9D6B3
·
Color 5#8B653D
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.5:1Fail
1.9:1Fail
2:1Fail
2
1.3:1Fail
1.2:1Fail
1.5:1Fail
2.6:1Fail
3
1.5:1Fail
1.2:1Fail
1.2:1Fail
3.1:1AA18
4
1.9:1Fail
1.5:1Fail
1.2:1Fail
3.8:1AA18
5
2:1Fail
2.6:1Fail
3.1:1AA18
3.8:1AA18

Similar palettes

More like Arid Blossom

View all earth
Desert Mirage
Adobe Desert Hues
Adobe Sunset
Amber Sands Mirage
Ancient Pyramid Sun
Arid Cactus Blossom