PickyPalette
⊷ Token Beam
PickyPalette
A color picker where you sculpt a palette directly on a color model. Colors claim territory based on perceptual distance, so every move reshapes the whole palette. Drag to tweak, hold Cmd to preview — the canvas is the instrument.
Keys & Shortcuts
| C | Toggle pick mode (add color on next click) |
| Cmd / Ctrl + hover | Preview a new color (click to place) |
| Double-click | Add a new color (hold to drag-adjust) |
| Long tap (touch) | Add a new color (hold to drag-adjust) |
| Click | Select the closest color under cursor |
| Drag | Move the selected color |
| 1 / 2 / 3 | Switch axis (x / y / z) |
| Scroll | Adjust position slider (3rd axis) |
| P | Toggle color position markers |
| Alt / Option | Reveal raw color space under hovered region |
| Shift + Alt / Option | Isolate color (flat region stays, rest shows raw) |
| Cmd + Alt | Preview color with raw color space reveal |
| Cmd + Alt + Shift | Preview color with isolation mask |
| Delete / Backspace | Remove hovered swatch, color under cursor, or selected color |
| Cmd / Ctrl + Z | Undo |
| Cmd / Ctrl + I | Invert slider axis |
| Esc | Cancel drag or exit pick mode |
User Manual / Glossary
Adding Colors
Double-click the canvas, or hold Cmd / Ctrl and click to add a new color. You can also press C to enter pick mode, then click to place a color. Hold after double-clicking or Cmd-clicking to drag and adjust the color before releasing.
Selecting & Editing Colors
Click a region on the canvas or a swatch to select a color. Drag on the canvas to move the selected color to a new position. Press Esc to cancel a drag and restore the original color.
Removing Colors
Hover a swatch and click the × button, or press Delete / Backspace — this removes the hovered swatch, the color under the cursor when hovering the canvas, or the selected color otherwise.
Inspecting a Color
Hold Alt / Option while hovering the canvas or a swatch to reveal the raw color space under that color's region. Add Shift to invert — isolate the color so only its region stays flat while the rest reveals the raw color space. Both work while dragging too.
Pasting Colors
Type or paste hex values into the text field at the bottom — comma
or space separated (e.g. #ff0000, #00ff00, #0000ff).
The palette updates with all valid colors. Clearing the field
removes all 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 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.
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.
Color Markers
Toggle with P or via the settings checkbox. Shows dots on the canvas where each palette color sits. Dots are sized by how close the color is to the current slider position — closer colors appear larger. Hover a dot for 500ms to highlight it, then click to jump the slider to that color's slice.
Ease to Current Slice
The canvas only shows two axes at a time — the third is controlled by the slider. When you drag a color, it may not sit on the slice you're currently viewing. With this option on, the color's hidden axis gradually blends toward the current slider position as you drag further from the starting point. A short drag keeps the original value; a longer drag eases the color onto the visible slice. The interpolation happens in the same color space as the current model, so transitions feel perceptually smooth.
When off, dragging always places the color exactly on the current slice — the old behavior.
Invert Slider Axis
Flips the slider axis direction with Cmd / Ctrl + I or via the settings checkbox. Useful for color models like HSL where you might prefer white in the center instead of black.
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.
Color Spaces
- OKHsl / OKHsv
- Perceptually uniform hue-saturation-lightness (or value) models. Best general-purpose choice — equal steps in any axis look like equal steps to the eye. Polar variants show hue as an angle on a disc.
- OKLab
- Perceptual lightness vs. two chroma axes (a, b). Great for understanding how light or chromatic a palette is. The foundation of modern perceptual color science.
- OKLch / OKLrch
- Cylindrical form of OKLab — lightness, chroma, hue. Easier to reason about than a/b axes. OKLrch uses a revised lightness estimate. Complementary variants place opposing hues across the diagonal.
- CIELab / CIELch
- The classic perceptual color space from 1976. Less uniform than OKLab (blues appear too saturated) but widely used in print and industrial color. D65 = daylight illuminant, D50 = print standard.
- CAM16-UCS
- Based on a color appearance model that accounts for viewing conditions. More accurate than CIELab for large color differences but slower to compute.
- HSL / HSV / HWB
- The classic web color models. Simple and familiar but not perceptually uniform — "50% lightness" looks different for different hues. Useful when you need CSS-native values.
- RGB
- Raw red-green-blue axes. Not perceptually meaningful but useful for understanding how a palette maps to screen hardware.
- Visible Spectrum
- Maps the canvas to approximate spectral (rainbow) colors. A fun visualization — not practical for picking, but good for seeing where your palette lands on the spectrum.
- Polar variants
- Any model with "Polar" maps hue to an angle and saturation/chroma to a radius on a circular canvas, matching how color wheels work. Non-polar variants use a rectangular grid.
Built with palette-shader, culori, colorsort-js & Iosevka — GitHub — pickypalette.color.pizza
If you find this useful, consider buying me a coffee.
