What colors are in the Lilac Dawn palette?

The Lilac Dawn palette has 5 colors: #39304A, #7A6BA0, #B7A6D9, #DCD0EE, #F7F2FB.

Where can I use this palette?

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

Is the Lilac Dawn palette accessible?

Its darkest and lightest colors have a contrast ratio of 11.23:1. 3 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 Lilac Dawn palette?

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

Text #39304A Gunmetal Gray Primary #7A6BA0 Very Peri Accent #B7A6D9 Wisteria Secondary #DCD0EE Periwinkle Surface #F7F2FB Lavender Blush

Lilac Dawn

Serene Meditation & sleep apps 5 colors

A dawn lilac fading up to near-white, all held below full saturation. The whole ramp is quiet on purpose — a screen you can look at with your eyes half closed.

Open in generator All palettes

Text Gunmetal Gray — #39304A

Primary Very Peri — #7A6BA0

Accent Wisteria — #B7A6D9

Secondary Periwinkle — #DCD0EE

Surface Lavender Blush — #F7F2FB

Contrast matrix

Text on Surface 11.23 AAA

Primary on Surface 4.29 AA Large

Text on Secondary 8.43 AAA

Surface on Primary 4.29 AA Large

Accent on Text 5.58 AA

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: #39304A;
  --primary: #7A6BA0;
  --accent: #B7A6D9;
  --secondary: #DCD0EE;
  --surface: #F7F2FB;
}

$lilac-dawn-text: #39304A;
$lilac-dawn-primary: #7A6BA0;
$lilac-dawn-accent: #B7A6D9;
$lilac-dawn-secondary: #DCD0EE;
$lilac-dawn-surface: #F7F2FB;

// tailwind.config.js — theme.extend.colors
colors: {
  'lilac-dawn': {
    'text': '#39304A',
    'primary': '#7A6BA0',
    'accent': '#B7A6D9',
    'secondary': '#DCD0EE',
    'surface': '#F7F2FB',
  },
}

{
    "lilac-dawn": {
        "text": {
            "value": "#39304A",
            "type": "color"
        },
        "primary": {
            "value": "#7A6BA0",
            "type": "color"
        },
        "accent": {
            "value": "#B7A6D9",
            "type": "color"
        },
        "secondary": {
            "value": "#DCD0EE",
            "type": "color"
        },
        "surface": {
            "value": "#F7F2FB",
            "type": "color"
        }
    }
}

{
    "text": "#39304A",
    "primary": "#7A6BA0",
    "accent": "#B7A6D9",
    "secondary": "#DCD0EE",
    "surface": "#F7F2FB"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#39304A
#7A6BA0
#B7A6D9
#DCD0EE
#F7F2FB

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.

Lilac Dawn

Contrast matrix

Export tokens

How the roles work

Related palettes