Palette

Agave Bloom Dawn

Subtle desert tones with a pop of warm gold, reflecting a delicate agave bloom at sunrise.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Agave Bloom Dawn 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 Agave Bloom Dawn.

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

Data visualization

#E0E2E4#7E8D85#4D5D53#D7A361#AF8B5D

Palette guide

How to use Agave Bloom Dawn

Overview

The Agave Bloom Dawn palette presents subtle desert tones with a pop of warm gold, reflecting a delicate agave bloom at sunrise. This earthy and natural collection includes a crisp off-white #E0E2E4, a muted sage green #7E8D85, a deep forest green #4D5D53, a vibrant golden brown #D7A361, and a rich caramel #AF8B5D. It's perfect for designers aiming to convey organic beauty, warmth, and a subtle desert charm. Developers will find these versatile hex codes excellent for creating naturalistic interfaces, artisanal branding, and content that evokes growth and understated elegance.

Best used for

Desert botanical gardens branding
Organic food and beverage packaging
Sustainable fashion labels
Earthy home decor websites
Nature photography portfolios
Artisanal craft businesses

Suggested color roles

primary

Use #7E8D85 as a calming primary for main headings or large sections, representing desert foliage.

secondary

Employ #E0E2E4 for clean, airy backgrounds or secondary elements, mimicking morning light.

accent

Apply #D7A361 sparingly for impactful calls to action or key highlights, adding a warm, vibrant pop.

background

Utilize #E0E2E4 for crisp, expansive backgrounds, providing a fresh, neutral canvas.

text

A deep brown or black works perfectly on #E0E2E4, while white text is ideal on #4D5D53 for strong readability.

Accessibility notes

Ensure sufficient contrast for text on #E0E2E4; a dark text color like #4D5D53 is essential.
Avoid using #7E8D85 for text against #E0E2E4 as contrast will be too low for readability.
White text on #4D5D53 and #AF8B5D should meet WCAG AA contrast standards.
For interactive elements, ensure distinct visual cues beyond color, especially with subtle greens and browns.

Recommended combinations

Desert Bloom

For headers or hero sections, blending light with warm, vibrant accents.

#E0E2E4 · #D7A361 · #AF8B5D

Agave Greens

Ideal for layered UI elements or textural backgrounds, showcasing natural foliage.

#7E8D85 · #4D5D53 · #E0E2E4

Sunrise Earth

Effective for footers or distinct content blocks, offering grounded warmth.

#4D5D53 · #AF8B5D · #E0E2E4

CSS variables

:root {
  --agave-bloom-dawn-1: #E0E2E4;
  --agave-bloom-dawn-2: #7E8D85;
  --agave-bloom-dawn-3: #4D5D53;
  --agave-bloom-dawn-4: #D7A361;
  --agave-bloom-dawn-5: #AF8B5D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "agave-bloom-dawn": {
        1: "#E0E2E4",
        2: "#7E8D85",
        3: "#4D5D53",
        4: "#D7A361",
        5: "#AF8B5D",
      }
    }
  }
}

Hex values

Color 1#E0E2E4

Color 2#7E8D85

Color 3#4D5D53

Color 4#D7A361

Color 5#AF8B5D

Accessibility

Contrast checker

2.7:1Fail

5.4:1AA

1.7:1Fail

2.4:1Fail

2.7:1Fail

2:1Fail

1.5:1Fail

1.1:1Fail

5.4:1AA

2:1Fail

3.1:1AA18

2.2:1Fail

1.7:1Fail

1.5:1Fail

3.1:1AA18

1.4:1Fail

2.4:1Fail

1.1:1Fail

2.2:1Fail

1.4:1Fail

Similar palettes

More like Agave Bloom Dawn

Bohemian Desert Bloom

Bohemian Rhapsody Blend