UI Palette Generator
What it is
UI Palette Generator is an open-source tool for creating UI color palettes intended to remain usable in light and dark modes. Start with a seed color, adjust palette settings, and override individual tokens. The interface reports text contrast results against WCAG 2.2 AA and APCA; the project emphasizes that people still need to review palettes. Optional refinement actions can align semantic tokens with USWDS colors or adjust content tokens against WCAG 2.2 and APCA thresholds. Both themes use the same semantic token IDs, and the demo applies the palettes to identical UI markup to show their effect in components. You can download tokens as CSV, export Penpot-compatible JSON, or copy CSS variables for both themes. CSV and Penpot-compatible JSON files created by the tool can also be imported to replace the displayed palette. The project uses HTML, CSS, and vanilla JavaScript, with no framework or build tools required for basic use. Its static site can run on GitHub Pages or another static web server. The project is licensed under AGPL-3.0.
For and against
For
- Generates palettes from a seed color.
- Supports token adjustments and individual overrides.
- Reports WCAG 2.2 AA and APCA text contrast.
- Exports CSV, Penpot-compatible JSON, and CSS variables.
- Imports CSV and Penpot-compatible JSON palettes.
- Static site can run on GitHub Pages or another web server.
Against
- Human review is still required for palettes.
- The project is licensed under AGPL-3.0.
Who it suits
This tool suits designers and developers generating accessible enterprise UI palettes for light and dark themes. It is also relevant to teams working with Penpot-compatible JSON or aligning palettes with USWDS.
Getting started
- Open the web tool or host its static site on a web server.
- Generate a palette from a seed color.
- Adjust settings or override individual tokens.
- Review the WCAG 2.2 AA and APCA contrast results.
- Export tokens as CSV, Penpot-compatible JSON, or CSS variables.
The verdict
Choose UI Palette Generator if you need to build and refine UI palettes across light and dark themes, with contrast results and several export options. Plan for human review rather than relying on the reported checks alone.
Questions
Is UI Palette Generator free?
Yes. It is described as free and open source.
What platforms can I use it on?
It is available on the web and can be self-hosted. Its static site can run on GitHub Pages or any static web server.
What does it export?
It can download palette tokens as CSV, export Penpot-compatible JSON, and copy CSS variables for both themes.
Can I import an existing palette?
Yes. You can import CSV or Penpot-compatible JSON files generated by the tool.
Does it check accessibility?
The interface reports WCAG 2.2 AA and APCA text contrast results. The project says human review is always required.
What license does it use?
The public repository identifies the license as AGPL-3.0.
Facts on the record
- Accessibility checks
- The interface reports WCAG 2.2 AA and APCA text contrast results, and the project says human review is always required.mgifford.github.io · read 9 Oct 2026
- Contrast checks
- The interface reports WCAG 2.2 AA and APCA text contrast results.mgifford.github.io · read 9 Oct 2026
- Deployment
- The repository says the static site works on GitHub Pages or any static web server, and can be deployed by copying its docs folder to a host.github.com · read 9 Oct 2026
- Exports
- Users can download palette tokens as CSV, export Penpot-compatible JSON, or copy CSS variables for both themes.mgifford.github.io · read 9 Oct 2026
- Hosting
- The repository says the static site works on GitHub Pages or any static web server and can be deployed by copying the docs folder to a host.github.com · read 9 Oct 2026
- Human review
- The project description says human review is always required for AI-assisted palette exploration.github.com · read 9 Oct 2026
- Imports
- Users can import CSV or Penpot-compatible JSON files generated by the tool to replace the displayed palette.mgifford.github.io · read 9 Oct 2026
- Integration
- The repository says the palette supports comparisons and alignment with systems such as USWDS.github.com · read 9 Oct 2026
- Integrations
- The page describes Penpot-compatible JSON export and alignment with systems such as USWDS.mgifford.github.io · read 9 Oct 2026
- Intended users
- The repository describes the tool as automating accessible enterprise UI color palette generation.github.com · read 9 Oct 2026
- License
- The public repository lists an AGPL-3.0 license.github.com · read 9 Oct 2026
- Light and dark themes
- The same semantic token IDs are used in both themes, and the demo uses identical UI markup to show how palette values behave in components.mgifford.github.io · read 9 Oct 2026
- Open source
- The project is open source and the repository identifies its license as AGPL-3.0.github.com · read 9 Oct 2026
- Palette generation
- Users can generate palettes from a seed color, adjust settings, and override individual tokens.mgifford.github.io · read 9 Oct 2026
- Purpose
- The tool generates accessible UI color palettes designed to work in light and dark modes.mgifford.github.io · read 9 Oct 2026
- Refinement
- The repository describes optional refinements to align tokens with USWDS colors or adjust content tokens to meet WCAG 2.2 and APCA thresholds.github.com · read 9 Oct 2026
- Support
- The project asks users to report issues or contribute improvements on GitHub.mgifford.github.io · read 9 Oct 2026
- Technology
- The repository says the project uses HTML, CSS, and vanilla JavaScript, with no framework or build tools required for basic use.github.com · read 9 Oct 2026