Palette

Cactus Bloom Desert

A vibrant contrast of blooming desert flora against warm, earthy desert tones.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#D44211#FF7F50#F0E68C#8B4513#556B2F

Palette guide

How to use Cactus Bloom Desert

Overview

The Cactus Bloom Desert palette presents a vibrant and energetic contrast, showcasing blooming desert flora against warm, earthy tones. This striking collection features a bold orange, #D44211, and a softer coral, #FF7F50, capturing the essence of a vivid desert flower. These are balanced by a sunny yellow, #F0E68C, reminiscent of desert light, and deep, grounding browns: #8B4513 and #556B2F, echoing rich soil and resilient foliage. Designers will find this palette excellent for creating dynamic and engaging visuals that pop. Developers can leverage these colors to build lively UIs, particularly for brands that want to convey energy, warmth, and a connection to nature, suitable for adventurous or artisanal themes.

Best used for

Vibrant travel and tourism branding
Southwestern art and craft designs
Food packaging with a natural feel
Event invitations and posters
Outdoor apparel and gear websites
Children's book illustrations

Suggested color roles

primary

Use #F0E68C as a warm, inviting primary background or large area color, evoking sun-drenched desert landscapes.

secondary

Apply #FF7F50 for secondary elements, offering a softer, approachable warmth that complements the primary.

accent

Introduce #D44211 as a powerful, high-impact accent for calls to action, headlines, or key visual elements, symbolizing a vivid bloom.

background

Utilize #F0E68C for light, bright backgrounds, providing a cheerful and airy canvas for content.

text

Employ #8B4513 or #556B2F for headlines and body text, ensuring strong readability and a grounded, natural feel against lighter shades.

Accessibility notes

Ensure high contrast when pairing #D44211 or #FF7F50 text with lighter backgrounds like #F0E68C for optimal readability.
Use #8B4513 or #556B2F for all body text to ensure WCAG AA compliance on lighter backgrounds.
Avoid using #D44211 directly on #FF7F50 for text as contrast may be insufficient for smaller font sizes.
For interactive elements, ensure the accent colors have sufficient contrast with their surrounding background.

Recommended combinations

Desert Bloom Pop

Creates a striking focal point with the vibrant orange against a sunny yellow and deep green, ideal for branding.

#D44211 · #F0E68C · #556B2F

Warm Earth

Offers a grounded yet inviting feel, perfect for background sections or informational panels.

#8B4513 · #F0E68C · #FF7F50

Vivid Contrast

Combines a softer orange with deep green and a bold accent, suitable for headers or call-to-action sections.

#FF7F50 · #556B2F · #D44211

CSS variables

:root {
  --cactus-bloom-desert-1: #D44211;
  --cactus-bloom-desert-2: #FF7F50;
  --cactus-bloom-desert-3: #F0E68C;
  --cactus-bloom-desert-4: #8B4513;
  --cactus-bloom-desert-5: #556B2F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cactus-bloom-desert": {
        1: "#D44211",
        2: "#FF7F50",
        3: "#F0E68C",
        4: "#8B4513",
        5: "#556B2F",
      }
    }
  }
}

Hex values

Color 1#D44211

Color 2#FF7F50

Color 3#F0E68C

Color 4#8B4513

Color 5#556B2F

Accessibility

Contrast checker

1.8:1Fail

3.6:1AA18

1.6:1Fail

1.3:1Fail

1.8:1Fail

2:1Fail

2.8:1Fail

2.4:1Fail

3.6:1AA18

2:1Fail

5.5:1AA

4.6:1AA