What colors are in the Dusty Rose palette?

The Dusty Rose palette has 5 colors: #5E3B44, #8A5A66, #B5808C, #D4A9B2, #EFD6DB.

Where can I use this palette?

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

Is the Dusty Rose palette accessible?

Its darkest and lightest colors have a contrast ratio of 7.01:1. 2 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 Dusty Rose palette?

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

Text #5E3B44 Eggplant Accent #8A5A66 Mauve Taupe Primary #B5808C Rosy Brown Secondary #D4A9B2 Lilac Surface #EFD6DB Pastel Pink

Dusty Rose

5 colors

Open in generator All palettes

Text Eggplant — #5E3B44

Accent Mauve Taupe — #8A5A66

Primary Rosy Brown — #B5808C

Secondary Lilac — #D4A9B2

Surface Pastel Pink — #EFD6DB

Contrast matrix

Text on Surface 7.01 AAA

Primary on Surface 2.38 Fail

Text on Secondary 4.63 AA

Surface on Primary 2.38 Fail

Accent on Text 1.71 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: #5E3B44;
  --accent: #8A5A66;
  --primary: #B5808C;
  --secondary: #D4A9B2;
  --surface: #EFD6DB;
}

$dusty-rose-text: #5E3B44;
$dusty-rose-accent: #8A5A66;
$dusty-rose-primary: #B5808C;
$dusty-rose-secondary: #D4A9B2;
$dusty-rose-surface: #EFD6DB;

// tailwind.config.js — theme.extend.colors
colors: {
  'dusty-rose': {
    'text': '#5E3B44',
    'accent': '#8A5A66',
    'primary': '#B5808C',
    'secondary': '#D4A9B2',
    'surface': '#EFD6DB',
  },
}

{
    "dusty-rose": {
        "text": {
            "value": "#5E3B44",
            "type": "color"
        },
        "accent": {
            "value": "#8A5A66",
            "type": "color"
        },
        "primary": {
            "value": "#B5808C",
            "type": "color"
        },
        "secondary": {
            "value": "#D4A9B2",
            "type": "color"
        },
        "surface": {
            "value": "#EFD6DB",
            "type": "color"
        }
    }
}

{
    "text": "#5E3B44",
    "accent": "#8A5A66",
    "primary": "#B5808C",
    "secondary": "#D4A9B2",
    "surface": "#EFD6DB"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#5E3B44
#8A5A66
#B5808C
#D4A9B2
#EFD6DB

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.

Dusty Rose

Contrast matrix

Export tokens

How the roles work

Related palettes