What colors are in the Desert Bloom palette?

The Desert Bloom palette has 5 colors: #3B1E1A, #9C4A3C, #D97A5E, #E9B59A, #F7EAE0.

Where can I use this palette?

It's a Muted palette — well suited to editorial layouts, minimal ui, photography portfolios, modern brands.

Is the Desert Bloom palette accessible?

Its darkest and lightest colors have a contrast ratio of 12.84:1. 4 color pairs in it meet WCAG AA for text.

How do I use this palette in CSS?

Copy the CSS custom properties (:root variables) from the Export section, or grab any single hex with one click.

Can I export the Desert Bloom palette?

Yes — export to CSS, SCSS, Tailwind config or JSON, or copy all hex codes at once.

Text #3B1E1A Bistre Accent #9C4A3C Chestnut Primary #D97A5E Terracotta Secondary #E9B59A Dusty Rose Surface #F7EAE0 Antique White

Desert Bloom

Warm Lifestyle & DTC brands 5 colors

A rosy clay warmed by desert light, grounded in oxblood so it never turns candy. The mid coral is the only CTA-grade tone; the rest stays earthen.

Open in generator All palettes

Text Bistre — #3B1E1A

Accent Chestnut — #9C4A3C

Primary Terracotta — #D97A5E

Secondary Dusty Rose — #E9B59A

Surface Antique White — #F7EAE0

Contrast matrix

Text on Surface 12.84 AAA

Primary on Surface 2.58 Fail

Text on Secondary 8.32 AAA

Surface on Primary 2.58 Fail

Accent on Text 2.49 Fail

Ratios are WCAG 2 contrast between the roles as assigned above. AA needs 4.5:1 for body text, 3:1 for large text.

Export tokens

:root {
  --text: #3B1E1A;
  --accent: #9C4A3C;
  --primary: #D97A5E;
  --secondary: #E9B59A;
  --surface: #F7EAE0;
}

$desert-bloom-text: #3B1E1A;
$desert-bloom-accent: #9C4A3C;
$desert-bloom-primary: #D97A5E;
$desert-bloom-secondary: #E9B59A;
$desert-bloom-surface: #F7EAE0;

// tailwind.config.js — theme.extend.colors
colors: {
  'desert-bloom': {
    'text': '#3B1E1A',
    'accent': '#9C4A3C',
    'primary': '#D97A5E',
    'secondary': '#E9B59A',
    'surface': '#F7EAE0',
  },
}

{
    "desert-bloom": {
        "text": {
            "value": "#3B1E1A",
            "type": "color"
        },
        "accent": {
            "value": "#9C4A3C",
            "type": "color"
        },
        "primary": {
            "value": "#D97A5E",
            "type": "color"
        },
        "secondary": {
            "value": "#E9B59A",
            "type": "color"
        },
        "surface": {
            "value": "#F7EAE0",
            "type": "color"
        }
    }
}

{
    "text": "#3B1E1A",
    "accent": "#9C4A3C",
    "primary": "#D97A5E",
    "secondary": "#E9B59A",
    "surface": "#F7EAE0"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#3B1E1A
#9C4A3C
#D97A5E
#E9B59A
#F7EAE0

Download for Procreate

How the roles work

SurfaceThe lightest color — page and card backgrounds.

TextThe darkest color — body text and high-contrast UI.

PrimaryThe most chromatic middle — buttons, links, the one color that pushes.

AccentThe second most chromatic — badges, highlights, states.

SecondaryEverything else — fills, borders, supporting surfaces.

Desert Bloom

Contrast matrix

Export tokens

How the roles work

Related palettes