Seven tools for the color decisions that come up while building an interface: prove a pair passes WCAG and repair it when it does not, translate one color across every CSS space, turn a brand color into a full token scale, pull a palette out of a photograph, check what a color-blind viewer actually sees, and build a gradient that does not go grey in the middle. Everything is computed in OKLCH where perceptual evenness matters, and nothing is uploaded.
- 01
Close an accessibility ticket
Paste the two colors from the bug report, read the ratio against body text, large text, and UI components, then take the nearest passing color the checker proposes instead of guessing at a darker blue.
- 02
Turn one brand color into a system
Generate an 11-step OKLCH ramp from the brand hex, adjust chroma and lightness spread until the middle steps look right, and copy the CSS custom properties straight into the token file.
- 03
Ship a palette from a photograph
Sample the dominant colors from a hero image, raise the separation until the swatches stop repeating, then share the extracted palette as a link — the photo itself never leaves your device.
- 04
Review before it ships
Run the finished palette through the vision simulator, read the collision report for pairs that were distinguishable and are not any more, and fix them in the converter without leaving the browser.
OKLCH where it matters
Ramps, gradients, and nudges are computed in OKLCH, so lightness steps look evenly spaced and a blue-to-orange gradient passes through colors you would have picked yourself instead of through grey.
A verdict, not just a number
The contrast checker names the role that fails and offers the nearest color that passes; the simulator names the pairs that collapse. You leave with a decision, not a reading to interpret.
Real type, real backgrounds
Contrast is previewed on actual text at actual sizes, because a 4.6:1 pair that technically passes can still be unreadable at 13px — and you can only see that on a specimen.
Copy what your codebase wants
Every value is copyable in the notation you will paste: hex for a design file, `rgb()` for legacy CSS, `oklch()` for a modern token file, or a complete custom-property block.
Images never leave the device
Palette extraction and vision simulation read the pixels in a canvas in your own browser. There is no upload, so unreleased artwork and customer screenshots are safe to drop in.
Links that carry the color
Colors and settings are encoded in the URL, so a link reopens the exact comparison, ramp, or gradient for a teammate or a ticket — without an export step.
What contrast ratio do I actually need?
WCAG 2.2 asks for 4.5:1 for body text, 3:1 for large text (18.66px bold or 24px regular and above), and 3:1 for meaningful UI boundaries such as input borders and focus rings. The checker labels each of those separately, so you can see that a color passes for a heading and fails for a caption.
Why do the tools use OKLCH instead of HSL?
HSL lightness is not perceptual: `hsl(60 100% 50%)` (yellow) and `hsl(240 100% 50%)` (blue) claim the same lightness while one is blinding and the other is nearly black. OKLCH lightness tracks what the eye sees, which is what makes an 11-step ramp look evenly spaced and a gradient keep its saturation through the middle.
Can I extract a palette from an image without uploading it?
Yes — that is the only mode there is. The image is decoded into a canvas in your browser and the pixels are clustered locally. The file is never sent anywhere, and the share link carries the resulting palette rather than the picture.
Which color-blindness types are simulated?
Protanopia, deuteranopia, tritanopia, and achromatopsia, each with an adjustable severity. Deuteranomaly alone affects roughly one in twelve men, which is why the collision report focuses on pairs your design relies on telling apart.
Do I get production-ready CSS out of these tools?
Yes. The palette generator emits a complete custom-property block, the gradient builder emits compact `linear-gradient`/`radial-gradient`/`conic-gradient` syntax including the interpolation space, and every single color is copyable in six notations.
Is any of this stored or sent to a server?
No. Every calculation runs in your browser. There is no account, no history, and no upload — closing the tab is all the cleanup there is.