Palette visualizer
Five swatches in a row tell you almost nothing about whether a palette works. Put the same five on a dashboard, a poster or your own artwork and the answer is immediate. Then read the panel underneath, which tells you which text just stopped being legible.
Curated sets, grouped by mood and season.
SVG keeps its shapes and swaps the fills. A PNG or photo is mapped through the palette as a multitone. Nothing is uploaded; the file is read in this browser and never leaves your device.
What this did to legibility
3 of 5 pairs that carried text in the original no longer pass AA at body size.
- #90962A on #E3AF8F9.7 to 1.6Fails AA
- #90962A on #F4E6E510.9 to 2.6Fails AA
- #CDAA53 on #3B4D206 to 4.2Fails AA
- #3B4D20 on #E3AF8F15.3 to 4.8Passes
- #3B4D20 on #F4E6E517.2 to 7.6Passes
Why the mapping goes by lightness
The obvious way to recolor a drawing is to give every shape whichever palette color is nearest to the one it already had. Try it once and the problem is plain: a palette almost never sits near the artwork in color space, so four distinct blues all find the same nearest brown and the design flattens into a single tone.
What survives a recolor is not hue. Hue is the thing you came to replace. What has to survive is the order: the darkest ink stays the darkest, the page ground stays the lightest, and the steps in between keep their spacing. So both lists are sorted by lightness and matched by position.
That lightness comes from OKLab rather than from HSL, and the difference is not academic. HSL calls pure blue and pure yellow both fifty percent light, which would let a saturated blue outrank a yellow and turn the drawing inside out. OKLab puts them where an eye puts them. It is the same math behind thelogo extractor.
None of that catches the failure that actually costs you. A recolored layout can look considered and leave a caption at 2.6 to 1, and nothing in the image says so. Because the tool knows which color became which, it re-runs theWCAG contrast check on every pair that was carrying text before the swap and reports what changed.
Common questions
- Is my graphic uploaded anywhere?
- No. An SVG is read as text and rewritten as text in your browser; a PNG or photo goes into a canvas on your device and is read back out. Neither one touches the network, and the page keeps working with it switched off. That matters more here than on most tools, because the file a designer wants to test a palette on is usually one that has not shipped yet.
- How are the colors chosen for each shape?
- By lightness order, not by similarity. Both your palette and the artwork are sorted from darkest to lightest and matched by position, so the darkest ink becomes your darkest color and the page background becomes your lightest. Matching each shape to whichever palette color looks closest sounds better and is worse: a palette rarely sits near the artwork in color space, so several different shapes collapse onto the same color and the design loses the separations that made it readable.
- Why does it tell me about contrast?
- Because a recolor can look completely fine and leave body text at 2 to 1, and the picture gives you no hint. Since the tool knows which original color became which new one, it can re-measure every pair that was carrying text before and tell you what happened to it. Pairs that were already failing are left out, because they were not being used for text in the original and their new ratio would not mean anything.
- What happens to white and black?
- They are left alone by default. In most artwork pure white is the paper and pure black is an outline rather than part of the design, so recoloring them produces a poster where the page itself has changed color, which reads as a bug. Everything between them is remapped.
- Why did my photo come out as a duotone?
- Because a photograph has no flat fills to swap. What carries a photograph is its tonal range, so each pixel is mapped through your palette by lightness, which is the same thing a darkroom duotone does with two inks instead of five. The ramp is interpolated rather than snapped to the nearest color, so faces and gradients survive instead of posterising.
- My SVG came back unchanged. Why?
- Almost always because its colors are set somewhere the file does not expose, such as a linked stylesheet or a CSS variable defined outside the document. Fills written as attributes, inline styles, gradient stops or rules inside an embedded style block are all handled, which covers Illustrator and Figma exports. An SVG that draws a single embedded raster image is also unaffected, since there are no shapes in it to recolor.
- Can I use the result commercially?
- The six mockups here are ours and you are free to use the recolored output for anything, including client work, with no attribution. A graphic you upload stays yours and never leaves your device, so whatever license it already carried is the only one that applies.