Theme Playground

Pick a source colour. Every tonal palette value and every component below re-derives from it in real time. Copy the result into a stylesheet loaded after src/styles.css — see using a generated theme below.

Harmony
Preview scheme
Copy

Tonal palettes

13 stops from 0 (black) to 100 (white). Click any swatch to copy its --md-ref-palette-* declaration.

System colours — light

The role tokens components actually consume, resolved for the selected scheme. Click a chip to copy its --md-sys-color-* declaration.

Live preview

Buttons

Filled Tonal Outlined Text
Elevated Disabled

FAB

Text field

Selection

Slider

Chips

Badge

Inbox

Progress

Card

Weekly digest 3 new items

A container that leans on elevation and the surface ramp.

Open

Tabs

Overview panel content.
Activity panel content.

List

Tooltip

Follows the theme too

Using a generated theme

Retheming never means editing a source file. The library's colour values live in one small stylesheet, src/tokens/palette.css (the six reference tonal palettes); tokens.css only maps roles onto them.

Load your own stylesheet after src/styles.css and paste one of the copy blocks into it. The cascade wins and the shipped files stay untouched — to revert, remove your file.

  • palette.css — a complete replacement for the reference palettes. Both light and dark rescheme from it because the role mapping is unchanged. The usual choice.
  • Light roles / Dark roles — the fully resolved --md-sys-color-* values for one scheme each, as plain hex. Use these to pin exact role colours, or to scope a theme to a subtree (put them on any selector, not just :root).

If a shipped token file is ever changed by accident: git restore src/tokens/palette.css (or tokens.css) puts it back to the committed baseline.

Sharing. The URL tracks the current colour, harmony and scheme (or preset), so bookmarking or copying it — the Copy link button does this — reopens the same theme.

How the palettes are generated

Each palette fixes a hue and chroma and ramps lightness across the 13 tones in the OKLCH colour space, clamping chroma back into the sRGB gamut per stop. Secondary and tertiary reuse the source hue at reduced chroma, rotated by the harmony setting (tertiary +60° by default); the neutrals are the source hue — or a preset's neutral tint — at near-zero chroma; the error hue is anchored to the MD3 baseline. It is a perceptual approximation, not a port of Google's HCT algorithm — no dependencies, ~50 lines of colour maths. The 13-stop palettes match src/tokens/palette.css and the role mapping (tone 40 for primary in light, tone 80 in dark, and so on) matches tokens.css, so a copied block is a drop-in.

Preset themes seed the engine with a project's signature accent colour (plus a neutral tint and a light/dark preference). They are tonal systems derived from each theme, not reproductions of it. Every preset is credited to its origin above the palettes.