Palette

Desert Flower Bloom

Radiant hues of a sparse desert landscape, where a resilient blossom pushes through sunbaked earth.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Desert Flower Bloom 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 Flower Bloom.

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

Data visualization

#FFCC66#FF9966#CC6633#993300#E0E0A0

Palette guide

How to use Desert Flower Bloom

Overview

The Desert Flower Bloom palette offers a vibrant, warm selection for projects aiming for an earthy yet radiant feel. Centered around hues like the sunny #FFCC66 and the rich #993300, this collection evokes the resilience of desert flora. Designers can leverage the inviting #FF9966 for calls to action, while the deeper #CC6633 provides excellent contrast. The subtle #E0E0A0 acts as a natural backdrop, ensuring readability and a harmonious visual experience. Ideal for branding, web design, or editorial layouts seeking a natural, sun-baked aesthetic. Its balanced warmth supports engaging and memorable user interfaces and content.

Best used for

Southwest-inspired branding
Earthy website themes
Natural product packaging
Outdoor adventure blogs
Café or restaurant interiors
Bohemian fashion design

Suggested color roles

primary

Use #FFCC66 as a cheerful primary for headers or brand elements, radiating warmth and approachability.

secondary

Employ #FF9966 for secondary actions or subheadings, providing a slightly deeper, inviting tone.

accent

Introduce #CC6633 as a strong accent for interactive elements or key highlights, offering good visual weight.

background

Apply #E0E0A0 for backgrounds to create a soft, sandy base that allows other colors to pop without overwhelming.

text

Utilize #993300 for primary body text, ensuring excellent readability against lighter backgrounds like #E0E0A0, or use a deep charcoal for general text.

Accessibility notes

Ensure sufficient contrast when pairing #FFCC66 with #E0E0A0 for text; consider using darker shades for readability.
The dark #993300 provides strong contrast against #FFCC66, #FF9966, and #E0E0A0 for text elements.
Avoid using #FFCC66 directly on #FF9966 for small text due to insufficient contrast.
For large headings, #CC6633 offers good contrast against #E0E0A0, making it accessible and impactful.

Recommended combinations

Desert Sunset

Ideal for vibrant hero sections or compelling call-to-action blocks.

#FFCC66 · #FF9966 · #993300

Earthy Bloom

Creates a natural, inviting feel for content cards or subtle UI elements.

#E0E0A0 · #CC6633 · #FFCC66

Deep Roots

Effective for strong branding, footers, or impactful graphical elements.

#993300 · #CC6633 · #FF9966

CSS variables

:root {
  --desert-flower-bloom-2-1: #FFCC66;
  --desert-flower-bloom-2-2: #FF9966;
  --desert-flower-bloom-2-3: #CC6633;
  --desert-flower-bloom-2-4: #993300;
  --desert-flower-bloom-2-5: #E0E0A0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "desert-flower-bloom-2": {
        1: "#FFCC66",
        2: "#FF9966",
        3: "#CC6633",
        4: "#993300",
        5: "#E0E0A0",
      }
    }
  }
}

Hex values

Color 1#FFCC66

Color 2#FF9966

Color 3#CC6633

Color 4#993300

Color 5#E0E0A0

Accessibility

Contrast checker

1.4:1Fail

2.6:1Fail

5:1AA

1.1:1Fail

1.4:1Fail

1.8:1Fail

3.5:1AA18

1.5:1Fail

2.6:1Fail

1.8:1Fail

2:1Fail

2.8:1Fail