Build your MD3 theme
Pick brand colors, get a Material Design 3 tonal palette + role-mapped tokens in real time. Preview on real AWC UI components, validate WCAG AA contrast in light and dark mode, and download a ready-to-use CSS file.
Source colors
Pick one brand color. Material Design 3 derives the rest of the scheme from it — secondary at the same hue with lower chroma, tertiary 60° around the hue wheel. Override either one only if your brand needs it.
Live preview
Real AWC UI components styled with your generated tokens. The
--md-sys-color-* variables are set as inline custom properties
on the panel element, so changes you make above propagate live into every
component's shadow DOM via standard CSS inheritance.
Filled card
Surface container with text on it.
Elevated card
Shadow-separated container.
Outlined card
Border-defined container.
WCAG AA contrast
Each row checks two MD3 colour roles against the WCAG minimum (4.5:1 for normal text; 3:1 for borders / dividers / icons, per WCAG 2.1 SC 1.4.11) at the current Standard contrast level. Change the Contrast control above to see how MD3's algorithm redistributes tones at each level.
- Cross-role pairs (top) — combinations like primary-coloured text on a plain surface. Material engineers these to pass at Standard contrast and above; drop to Reduced to see real failures and which source colours fix them. Hover the red icon on any failing row for an actionable recommendation.
- Non-text pairs (middle) — borders and dividers, checked against the lower 3:1 threshold.
- Role-matched sanity check (bottom) — pairs
like
on-primaryoverprimarythat Material's algorithm mathematically engineers to always pass. Shown for completeness, not as a discriminating test.
- Aa
- Aa
- Aa
- Aa
- Aa
- Aa
- Aa
- Aa
- Aa
- Aa
- Aa
- Aa
- Aa
- Aa
- Aa
- Aa
- Aa
- Aa
Tonal palettes
Each row below is a tonal palette with 13 tones (0 = black, 100 = white).
AWC UI's color roles map to specific tones — e.g.,
--md-sys-color-primary = primary T40 (light) / T80 (dark).