Color palettes that pass contrast checks.
Describe a brand or a mood to get a full interface palette, then see how it holds up: WCAG and APCA contrast for every text pair, simulated color blindness, tonal scales and a fix for pairs that fail.
The app itself, running inside this page. Anything you do here is saved in your browser.
Ask it to do things
Press Ctrl+K in the app (Cmd+K on a Mac) and describe what you want. The model chooses from the app's own functions, runs them in order and tells you what changed. Some examples:
| A calm palette for a meditation app | Generates the palette and runs the contrast audit. |
| Make the accent warmer but keep it accessible | Adjusts the accent and re-checks contrast. |
| Export it as Tailwind | Shows the Tailwind config ready to copy. |
Instructions you save in the same box, such as "keep it short" or "I'm a beginner", are added to every AI request the app makes.
Features
- AI palette design
- For 7 semantic roles, with names and rationale.
- Lock + regenerate
- The AI harmonizes new colors around the ones you keep.
- OKLCH conversion
- Chroma-curved tonal scales (50-950) with binary-search gamut mapping.
- WCAG contrast matrix
- With AA/AAA/large badges; one-click auto-fix via lightness search.
- Color-vision simulation
- Protan, deutan, tritan, achromat) with ΔE-OK confusion warnings.
- Live product preview
- In light and auto-derived dark mode.
- Exports
- CSS custom properties (+ dark media query), Tailwind config, W3C design tokens.
- APCA
- WCAG 3 draft) lightness contrast shown next to the WCAG 2 ratio for every pairing, with usage guidance.
- Contrast page
- Check any text/background pair with live samples at several sizes and get the closest passing text color for AA and AAA.
- From image page
- K-means clustering in OKLab on a downsampled image, with dominant colors mapped to UI roles and auto-fixed for contrast; the image stays in the browser.
Runs in your browser
All color math, contrast, scales, simulation, dark-mode derivation, exports. None of this needs a network connection or a model.
Uses a language model for
Brief → semantic palette, constrained for accessibility and harmony with locked colors.
Notes
- Cost
- Free. Each account has a daily allowance of AI requests.
- Your data
- What you make stays in this browser on this device. Your account is only used for signing in and for the built-in AI. You can export a backup or clear everything from Settings.
- AI access
- Signed-in users get the built-in AI with nothing to set up. You can also use your own Groq or OpenRouter key under Settings.
- Source
- The code and tests are on GitHub under the MIT license. The tests also run in your browser.