What colors are in the Muted Lavender UI palette?

The Muted Lavender UI palette has 5 colors: #201D30, #3B3654, #7E6FD8, #C7BCF2, #F5F2FC.

Where can I use this palette?

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

Is the Muted Lavender UI palette accessible?

Its darkest and lightest colors have a contrast ratio of 14.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 Muted Lavender UI palette?

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

Text #201D30 Graphite Secondary #3B3654 Charcoal Primary #7E6FD8 Medium Purple Accent #C7BCF2 Periwinkle Surface #F5F2FC White Smoke

Muted Lavender UI

Soft Consumer app UI 5 colors

Lavender softened to product grade: enough chroma to signal an action, gentle enough to sit under long forms all day. The ink is violet-cast rather than black, so nothing feels stark.

Open in generator All palettes

Text Graphite — #201D30

Secondary Charcoal — #3B3654

Primary Medium Purple — #7E6FD8

Accent Periwinkle — #C7BCF2

Surface White Smoke — #F5F2FC

Contrast matrix

Text on Surface 14.84 AAA

Primary on Surface 3.69 AA Large

Text on Secondary 1.44 Fail

Surface on Primary 3.69 AA Large

Accent on Text 9.30 AAA

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: #201D30;
  --secondary: #3B3654;
  --primary: #7E6FD8;
  --accent: #C7BCF2;
  --surface: #F5F2FC;
}

$muted-lavender-ui-text: #201D30;
$muted-lavender-ui-secondary: #3B3654;
$muted-lavender-ui-primary: #7E6FD8;
$muted-lavender-ui-accent: #C7BCF2;
$muted-lavender-ui-surface: #F5F2FC;

// tailwind.config.js — theme.extend.colors
colors: {
  'muted-lavender-ui': {
    'text': '#201D30',
    'secondary': '#3B3654',
    'primary': '#7E6FD8',
    'accent': '#C7BCF2',
    'surface': '#F5F2FC',
  },
}

{
    "muted-lavender-ui": {
        "text": {
            "value": "#201D30",
            "type": "color"
        },
        "secondary": {
            "value": "#3B3654",
            "type": "color"
        },
        "primary": {
            "value": "#7E6FD8",
            "type": "color"
        },
        "accent": {
            "value": "#C7BCF2",
            "type": "color"
        },
        "surface": {
            "value": "#F5F2FC",
            "type": "color"
        }
    }
}

{
    "text": "#201D30",
    "secondary": "#3B3654",
    "primary": "#7E6FD8",
    "accent": "#C7BCF2",
    "surface": "#F5F2FC"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#201D30
#3B3654
#7E6FD8
#C7BCF2
#F5F2FC

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.

Muted Lavender UI

Contrast matrix

Export tokens

How the roles work

Related palettes