What colors are in the Lavender Haze palette?

The Lavender Haze palette has 5 colors: #E6E6FA, #D8BFD8, #B19CD9, #967BB6, #6A5ACD.

Where can I use this palette?

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

Is the Lavender Haze palette accessible?

Its darkest and lightest colors have a contrast ratio of 4.31:1. Check specific pairs in the contrast checker before using them 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 Lavender Haze palette?

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

Surface #E6E6FA Lavender Secondary #D8BFD8 Thistle Accent #B19CD9 Wisteria Primary #967BB6 Amethyst Text #6A5ACD Slate Blue

Lavender Haze

5 colors

Open in generator All palettes

Surface Lavender — #E6E6FA

Secondary Thistle — #D8BFD8

Accent Wisteria — #B19CD9

Primary Amethyst — #967BB6

Text Slate Blue — #6A5ACD

Contrast matrix

Text on Surface 4.31 AA Large

Primary on Surface 2.94 Fail

Text on Secondary 3.12 AA Large

Surface on Primary 2.94 Fail

Accent on Text 2.18 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 {
  --surface: #E6E6FA;
  --secondary: #D8BFD8;
  --accent: #B19CD9;
  --primary: #967BB6;
  --text: #6A5ACD;
}

$lavender-haze-surface: #E6E6FA;
$lavender-haze-secondary: #D8BFD8;
$lavender-haze-accent: #B19CD9;
$lavender-haze-primary: #967BB6;
$lavender-haze-text: #6A5ACD;

// tailwind.config.js — theme.extend.colors
colors: {
  'lavender-haze': {
    'surface': '#E6E6FA',
    'secondary': '#D8BFD8',
    'accent': '#B19CD9',
    'primary': '#967BB6',
    'text': '#6A5ACD',
  },
}

{
    "lavender-haze": {
        "surface": {
            "value": "#E6E6FA",
            "type": "color"
        },
        "secondary": {
            "value": "#D8BFD8",
            "type": "color"
        },
        "accent": {
            "value": "#B19CD9",
            "type": "color"
        },
        "primary": {
            "value": "#967BB6",
            "type": "color"
        },
        "text": {
            "value": "#6A5ACD",
            "type": "color"
        }
    }
}

{
    "surface": "#E6E6FA",
    "secondary": "#D8BFD8",
    "accent": "#B19CD9",
    "primary": "#967BB6",
    "text": "#6A5ACD"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#E6E6FA
#D8BFD8
#B19CD9
#967BB6
#6A5ACD

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.

Lavender Haze

Contrast matrix

Export tokens

How the roles work

Related palettes