Palette

Sunrise Desert Bloom

Gentle oranges and yellows depict the first light touching the warm sands and hardy blooms of the desert.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F7E5D0#F2D8B9#EBBA8A#D18C5C#A26743

Palette guide

How to use Sunrise Desert Bloom

Overview

The Sunrise Desert Bloom palette captures the gentle oranges and yellows of the first light touching the warm sands and hardy blooms of the desert. This earthy and natural collection ranges from the very light, sandy #F7E5D0 to the rich, deep brown #A26743. Hues like #EBBA8A and #D18C5C provide the core warmth and texture of sun-baked earth, while #F2D8B9 offers a softer transition. Designers can use this palette to evoke a sense of grounding, natural beauty, and quiet strength, making it ideal for projects related to natural products, rustic aesthetics, or brands seeking an authentic and comforting feel.

Best used for

Natural and organic product branding
Artisan craft and handmade goods
Southwestern-inspired home decor
Outdoor and adventure lifestyle content
Coffee shop or bakery branding
Sustainable fashion brand identity

Suggested color roles

primary

Use #D18C5C for main headings or calls to action to provide a warm, inviting focal point.

secondary

Apply #EBBA8A for larger content areas or backgrounds, offering a softer, earthy base.

accent

Employ #A26743 for strong accents, typography, or borders to add depth and a grounded sophistication.

background

#F7E5D0 serves as an excellent light, sandy background, allowing the warmer tones to resonate.

text

Dark brown, charcoal, or black for body text; white or very light cream for text on #A26743.

Accessibility notes

The lighter colors, #F7E5D0 and #F2D8B9, will require very dark text for readability.
Be cautious with contrast when using #EBBA8A for text, especially against other light browns.
#D18C5C and #A26743 can support white or light-colored text effectively.
Always check text and background color combinations with a contrast checker to ensure compliance.

Recommended combinations

Desert Sands

Ideal for subtle backgrounds, soft gradients, or elements that need to convey a delicate, natural texture.

#F7E5D0 · #F2D8B9 · #EBBA8A

Bloom & Earth

Excellent for strong branding, editorial layouts, or designs requiring a rich, grounded, and sophisticated feel.

#EBBA8A · #D18C5C · #A26743

Warm Horizon

A balanced trio for primary UI elements, ensuring visual interest and clear hierarchy with an authentic, earthy touch.

#F2D8B9 · #D18C5C · #A26743

CSS variables

:root {
  --sunrise-desert-bloom-1: #F7E5D0;
  --sunrise-desert-bloom-2: #F2D8B9;
  --sunrise-desert-bloom-3: #EBBA8A;
  --sunrise-desert-bloom-4: #D18C5C;
  --sunrise-desert-bloom-5: #A26743;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sunrise-desert-bloom": {
        1: "#F7E5D0",
        2: "#F2D8B9",
        3: "#EBBA8A",
        4: "#D18C5C",
        5: "#A26743",
      }
    }
  }
}

Hex values

Color 1#F7E5D0

Color 2#F2D8B9

Color 3#EBBA8A

Color 4#D18C5C

Color 5#A26743

Accessibility

Contrast checker

1.1:1Fail

1.4:1Fail

2.2:1Fail

3.7:1AA18

1.1:1Fail

1.3:1Fail

2:1Fail

3.4:1AA18

1.4:1Fail

1.3:1Fail

1.6:1Fail

2.6:1Fail