◒A working color system, from first idea to final CSS.
Your original brand color stays intact. Interface colors adapt where contrast needs it.
Start from an image Find a starting color in a photo, logo or screenshot
PNG, JPEG or WebP · up to 15 MB / 40 megapixels. Processing stays in this tab. Your image is never uploaded or included in share links.
Drop an image here, choose a file, or try the example.
Click a point, or focus the image and use arrow keys; press Enter to pick. Shift + arrow moves 10 pixels. The image is resized to fit; sampled colors reflect this rendered sRGB preview.
Keep the color. Build the system.
Approximate share of visible sampled pixels. Transparent edges are shown on white. A photograph’s colors still need contrast checks.
Selected starting color
Uses your selected relationship and contrast target. Existing locks are kept. Undo restores your previous project.
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.
color palettes