PickyPalette
A color picker that shows how much visual weight each color claims in your palette. The canvas maps a color space onto a plane — as you add colors, it splits into regions showing which color is closest at every point. A color that's far from all others claims a large region; one that's close to a neighbor gets squeezed into a sliver. There's no predetermined weight factor — it emerges naturally from how your colors are distributed, measured by a perceptual distance metric (like OKLab or ΔE2000) from color science. Drag to pick a color and see its territory shift in real time.
User Manual / Glossary
Adding Colors
Click the canvas or press C to enter pick mode, then click to place a color. You can also drag directly on the canvas to add a color and adjust it in one motion.
Removing Colors
Hover a swatch and click the × button. You can also select a swatch by clicking it, then press Delete or Backspace.
Moving a Color
Hold Shift and drag on the canvas to move an existing color. The color whose region you click in will be picked up and repositioned as you drag. Press Escape to cancel and restore the original color.
Inspecting a Color
Hold Shift and hover a swatch to isolate it on the canvas — only that color's region is shown, the rest reveals the raw color space. This lets you see exactly how much territory a single color claims.
Pasting Colors
Type or paste hex values into the text field at the bottom — comma or
space separated (e.g. #ff0000, #00ff00, #0000ff). The
entire palette will be replaced with the pasted colors.
Position Slider & Axis
The slider controls the third dimension of the color space — the one not shown on the canvas. Click the axis label next to it to cycle through axes (e.g. H, S, L). You can also scroll or two-finger swipe on the canvas to adjust it.
Color Model
The color space used to render the canvas. Different models emphasize different relationships — OKHsl is perceptually uniform, HSL is the classic web model, OKLab shows perceptual lightness vs. chroma.
Distance Metric
How "closeness" between colors is measured when splitting the canvas into regions. OKLab is a good perceptual default. ΔE2000 matches human vision more precisely but is slower. RGB is naive but fast.
Outline
Draws a thin border between palette regions so you can see boundaries more clearly.
Reveal Color Space While Picking
When dragging to pick a color, the selected color's region shows the raw color space underneath instead of the flat palette color.
Auto-Sort
When enabled (the default), the palette is automatically sorted so visually similar colors sit next to each other. Sorting uses a trained ML model and only activates with more than two colors. You can turn it off in Settings if you want to keep your own ordering.
Clip to sRGB
Hides out-of-gamut colors that can't be displayed on a standard screen. Only has an effect on color models that go beyond sRGB — like OKLab, OKLCH, or CIELab. Models that are inherently bound to sRGB (HSL, HSV, RGB) are unaffected.
Sharing & Saving
Your entire palette and all settings are stored in the URL. Bookmark it to save your work, or share the link with someone to give them the exact same view.
Token Beam
Token Beam is a real-time sync protocol for design tokens. It lets you beam your palette directly into tools like Figma, Aseprite, Blender, or any app with a Token Beam plugin. In Send mode, a session token is generated — copy it and paste it into the receiving tool. In Receive mode, paste a token from an external source to pull colors in.
Built with palette-shader, culori & colorsort-js — GitHub — pickypalette.color.pizza
If you find this useful, consider buying me a coffee.
