Uwarp

Help Us Improve

—

(—)

Material 3 color palette generator

Generate Material 3 role tokens from a seed color. Copy CSS variables. Local-first, no signup.

What is a Material 3 color palette generator?

A Material 3 color palette generator turns a seed color into role tokens such as primary, on-primary, surface, and outline. This page builds those tokens in the browser and exports CSS variables you can paste into a theme.

Material 3 palette features

Role tokens from one seed color.

  • Seed to M3 roles

    Primary, secondary, tertiary, error, surface, and outline tokens update as you pick a color.

  • On-color pairs

    Each fill gets a contrast-checked on-color for text and icons.

  • CSS variables

    Copy :root custom properties that match the token names.

  • Local-first

    Palette math runs in the tab. Nothing is uploaded.

How to generate a Material 3 palette

Three steps from a seed hex to CSS variables.

  1. Pick a seed

    Use the color picker or paste a hex value.

  2. Review roles

    Click a swatch to copy its hex. Check on-color contrast.

  3. Copy CSS

    Paste the variables into your theme or design tokens file.

Great for

Material 3 theme starting points.

  • App theming

    Bootstrap a light Material 3 token set from a brand hex.

  • Design handoff

    Give engineers named roles instead of a loose swatch list.

  • Quick exploration

    Try several seeds without opening Android Studio.

Why use this generator

A free Material 3 role mapper in the browser.

  • Free to use

    No signup. The palette updates as you edit the seed.

  • Role names, not a ramp

    You get primary/onPrimary pairs, not only tints and shades.

  • CSS ready

    Export custom properties you can drop into a stylesheet.

Technical details

How these Material 3-style tokens are built.
Color model
HSL approximation of Material 3 roles from a seed hue. Not a full HCT/CAM16 Dynamic Scheme.
Contrast
On-colors pick white or near-black using WCAG relative luminance.
Export
CSS custom properties on :root. Hex only.

Sources & References

Material Design color system references for role tokens.
  • “The Material 3 color system uses dynamic color built from a source color.”
    — Material Design 3 — Color system

    Material Design 3 — Color: This tool names tokens after those roles so a seed color can become a starter theme. m3.material.io/styles/color/system/overview

  • “The visual presentation of text and images of text has a contrast ratio of at least 4.5:1.”
    — W3C — WCAG 2.2 Contrast (Minimum)

    W3C — Contrast (Minimum): On-colors are chosen by relative luminance so text on each role can meet a basic contrast check. w3.org/WAI/WCAG22/Understanding/contrast-minimum.html

Frequently Asked Questions

Quick answers about this tool—open a question to read more.