Color Picker
Pick any color from an image and get HEX, RGB, and HSL values.
Color Picker samples pixels from an image and hands back HEX, RGB, and HSL with one-click copy, plus "precision tools, palettes, and harmony" as the card describes. Choose a cursor mode — Crosshair, Magnifier, or Pointer — hover to inspect (the magnifier shows a "– {n}x +" zoom), and click to lock a color into the info panel with its (x, y) position.
From there, the Color Harmony panel computes Complementary, Analogous, Triadic, Split-Comp, Tetradic, and Square variants; "Extract" fills Dominant Colors with percentages; favorites collect in Palette (n) and export as CSS, SCSS, or JSON. Recent picks persist in history for quick re-copy. All pixel reads use canvas ImageData locally — nothing leaves the browser.
How it works
useColorPicker loads the image into an ImageData ref and exposes pickColor, palette/history state, and extraction via the local paletteExtractor; useMagnifier draws a zoomed ImageData patch (zoom 2–16) onto a small canvas under the pointer; useClipboard handles copy plus the copiedLabel feedback.
Clicking the image samples the pixel under the cursor and updates ColorInfoPanel. Harmony functions derive the six classic schemes from the picked hex; the export panel serializes the palette to CSS custom properties, SCSS variables, or JSON only once Palette has colors. Everything is local color math — no network, no AI.
How to use
- Drop an image to load it into the workspace.
- Select a cursor mode: Crosshair, Magnifier, or Pointer; if using Magnifier, set the zoom with the "– {n}x +" control.
- Hover to magnify (when enabled) and click the image to pick a color.
- Read HEX, RGB, and HSL in the info panel with the (x, y) position; copy any format.
- Browse "Color Harmony" and click swatches to add them to Palette (n).
- Click "Extract" under Dominant Colors and add favorites showing "{hex} {percent}%" to the Palette.
- With colors in the Palette, use Export → CSS / SCSS / JSON and "Copy {FMT} to Clipboard".
- Use Clear to empty palette/history, "Remove" to clear the image, or the history clear/copy controls for recent picks.
Tips
- Magnifier at 16x is the way to sample clean values on anti-aliased edges.
- Dominant Colors percentages come from local paletteExtractor sampling — click Extract after the image loads.
- The Export panel only appears once the Palette has colors — add harmony or extracted swatches first.
- Color History keeps recent picks handy so you can re-copy without re-picking.
- "Click Extract to find dominant colors" and "Click harmony colors or extracted colors to add" describe the empty states exactly.
Color Picker FAQ
Which color formats are shown?
HEX, RGB, and HSL, each with one-click copy, plus the pixel (x, y) position.
Is color extraction AI-based?
No — palette extraction is local pixel sampling through the paletteExtractor helper.
Can I export design tokens?
Yes — copy the palette as CSS custom properties, SCSS variables, or JSON to the clipboard.
Does the image leave the browser?
No — all pixel reads use canvas ImageData locally.
What do the harmony buttons do?
They compute complementary, analogous, triadic, split-complement, tetradic, and square harmonies from the picked hex value.
Credits
- Canvas ImageData — Pixel sampling and magnifier rendering in feature hooks