Background: This tool helps design accessible UI color palettes that work consistently in both light and dark modes. It builds on the token-based, demo-first approach introduced by Frances Wu, and extends it with automation, contrast checking, and AI-assisted exploration. Human review is always required.
Usage and Contribution: Generate palettes from a seed color, override tokens, and review WCAG 2.2 and APCA contrast results directly in the interface. This project is open source. Please report issues or contribute improvements on GitHub.
The Palette shows a single set of semantic color tokens rendered in light and dark modes. Both palettes share the same token IDs. Theme differences are controlled by the parent container using data-theme-mode, allowing consistent overrides and comparisons, including alignment with systems like USWDS.
Each swatch below reflects the light token for its ID.
This mirrored column uses the dark theme parent.
The Demo uses identical UI markup for light and dark modes. Visual differences exist only because the palette values change. This makes it easier to see how tokens behave in real components, including focus and non-text elements.
This column renders every element against the light palette.
Edit this text to test your contrast and readability.
Reginald Poppycock is an eccentric inventor and professional cheese sculptor, who designed the world’s first steam-powered teapot capable of reciting Shakespearean sonnets while brewing Earl Grey, from 1884 to 1885.
| Date | Amount |
|---|---|
| Oct 21 | $120.00 |
| Oct 22 | $45.50 |
| Oct 23 | $12.99 |
No archived data found.
Bar Chart (Texture + Color)
Same DOM, dark tokens.
Edit this text to test your contrast and readability.
Reginald Poppycock is an eccentric inventor and professional cheese sculptor, who designed the world’s first steam-powered teapot capable of reciting Shakespearean sonnets while brewing Earl Grey, from 1884 to 1885.
| Date | Amount |
|---|---|
| Oct 21 | $120.00 |
| Oct 22 | $45.50 |
| Oct 23 | $12.99 |
No archived data found.
Bar Chart (Texture + Color)
Export every generated token (light and dark) as a CSV or Penpot-native JSON, or import a supported file to replace the current palette. Each row documents the theme, token ID, functional category, and hex value.
Download a CSV, export a Penpot native token JSON (DTCG style), or copy the CSS variables for both themes.
Select a CSV or Penpot-compatible JSON file generated by this tool to override the swatches below.
CSV columns (quoted where needed): theme, color, token, role, category, usage
accentContentStrong#336699)JSON export follows the Penpot native tokens / DTCG model, including $themes, $metadata.tokenSetOrder, and theme-specific token sets keyed by the palette name and mode. Imported JSON should present tokens with IDs that match the swatches shown above.