Palette

Fiery Desert Bloom

Vivid oranges and earthy tones capture the dramatic beauty of desert florals at dusk.

warmenergetic5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#A84700#E76F51#F4A261#FFC87E#264653

Palette guide

How to use Fiery Desert Bloom

Overview

The Fiery Desert Bloom palette captures the dramatic beauty of desert florals at dusk with vivid oranges and earthy tones. This collection features a deep teal #264653 providing a striking contrast to warm shades like #A84700, #E76F51, #F4A261, and the light #FFC87E. Designers and developers can leverage this palette to create impactful, balanced designs that evoke both grounded tranquility and vibrant energy. It's perfect for projects requiring a sophisticated blend of natural warmth and a touch of modern contrast, ideal for environmental or adventurous themes.

Best used for

eco-tourism branding
southwestern inspired decor
website design for nature photography
adventure travel marketing
sustainable product packaging
distinctive mobile app UI

Suggested color roles

primary

#E76F51 for main calls to action, prominent headlines, or key interactive elements.

secondary

#A84700 for supporting content, navigation, or secondary buttons, adding depth.

accent

#FFC87E for bright highlights, small icons, or elements needing a soft, warm glow.

background

#264653 for a deep, sophisticated backdrop, or #F4A261 for a warmer, lighter base.

text

Use white or a very light cream for text on darker colors like #264653, and a deep charcoal for lighter backgrounds.

Accessibility notes

White or light cream text will contrast well against #A84700, #E76F51, and especially #264653.
Ensure sufficient contrast for #F4A261 text on #E76F51 or #A84700 backgrounds.
Avoid using #FFC87E directly on #F4A261 for small text; increase font size or weight.
For improved readability, use a darker text color (e.g., deep charcoal) on #FFC87E.

Recommended combinations

Desert Dusk

Creates a sophisticated, contrasting gradient for hero sections or distinctive brand elements.

#264653 · #A84700 · #E76F51

Warm Bloom

A soft yet vibrant blend for backgrounds and supporting content, evoking warmth and light.

#F4A261 · #FFC87E · #E76F51

Vibrant Contrast

Ideal for UI cards or sections where a dark base needs a vibrant, glowing accent.

#264653 · #E76F51 · #FFC87E

CSS variables

:root {
  --fiery-desert-bloom-1: #A84700;
  --fiery-desert-bloom-2: #E76F51;
  --fiery-desert-bloom-3: #F4A261;
  --fiery-desert-bloom-4: #FFC87E;
  --fiery-desert-bloom-5: #264653;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "fiery-desert-bloom": {
        1: "#A84700",
        2: "#E76F51",
        3: "#F4A261",
        4: "#FFC87E",
        5: "#264653",
      }
    }
  }
}

Hex values

Color 1#A84700

Color 2#E76F51

Color 3#F4A261

Color 4#FFC87E

Color 5#264653

Accessibility

Contrast checker

1.9:1Fail

2.9:1Fail

3.9:1AA18

1.7:1Fail

1.9:1Fail

1.5:1Fail

2:1Fail

3.3:1AA18

2.9:1Fail

1.5:1Fail

1.4:1Fail

4.9:1AA

3.9:1AA18

2:1Fail

1.4:1Fail

6.6:1AA

1.7:1Fail

3.3:1AA18

4.9:1AA

6.6:1AA

Similar palettes

More like Fiery Desert Bloom