color palettesColor, with a plan.
Make color work.
One brand. Two themes. Every role considered.
from first idea to final CSS.
Live theme previews
Text, links, buttons, inputs & focus rings.
Real HTML, using your exact tokens. Preview controls are interactive examples; nothing is submitted.
Make the decision with evidence
Good together.
Readable in context.
Each check names the foreground, the background, and the threshold. Repairs hold your page, surface and locked colors. They can leave unresolved pairs when those constraints conflict.
UI checks use 3:1 for meaningful boundaries and an offset focus ring against page or surface. This does not test every WCAG criterion, font, image, gradient, overlay, or interaction state. A palette is never a whole-site accessibility certificate.
Explore the full pair matrix
Rows are foregrounds; columns are backgrounds. Decorative combinations are included for exploration and are not required to pass.
A tonal scale for your brand
Eleven OKLCH lightness steps, gamut-mapped into sRGB. These are exploration tokens; component checks use your actual role colors above.
Keep the good decisions
Ready for
your project.
Both themes. The original brand. Named roles.
Take the code—and the contrast evidence—with you.
Project JSON and share links restore both themes, edits and locks. A saved comparison stays in this tab only. If your browser blocks a download, copy the code into a file.
Know what is being calculated.
Contrast uses WCAG 2.2 relative luminance for opaque sRGB colors, evaluated before display rounding. Generation explores OKLCH; repairs search 1,001 lightness steps, reduce chroma to stay in gamut, and rank passing rounded hex colors by Oklab distance. That is a defined search, not a promise of the globally nearest color. Button and accent labels use whichever of black or white has stronger contrast.
Every edit, repair, import and export runs in your browser. No sign-in or application storage. New share links store the project after the URL’s #, which browsers do not send in HTTP requests. Starting colors passed in ?brand or older ?colors links are part of the page request.
Formula, scope & W3C sources ↗