Color Picker & Palette Generator
Upload any image and pick exact pixel colors with a magnifying loupe — HEX, RGB, and HSL with one-click copy. Extract the image’s dominant color palette automatically, then export everything as a Tailwind config, CSS variables, SCSS, or JSON. All on a local canvas; nothing is uploaded.
How to use Color Picker & Palette Generator
- Drop in an image and hover it — the loupe magnifies pixels for an exact pick; click to add the color.
- Click "Extract palette" to pull the 4–8 dominant colors automatically (or use the system eyedropper to grab colors from anywhere on screen).
- Choose Tailwind, CSS variables, SCSS, or JSON and copy or download your palette.
Frequently asked questions
- Is my image uploaded to a server?
- No — the image is drawn onto a canvas in your browser and read locally; it never leaves your device.
- How does palette extraction work?
- Median-cut quantization: the image’s pixels are recursively split along their widest color range, and each region’s average becomes a palette color — ordered by how much of the image it covers.
- Can I pick a color from outside the image?
- Yes — in Chromium-based browsers the "Pick from screen" button opens the system eyedropper, which can sample any pixel on your display.
- What export formats are supported?
- A Tailwind theme.extend.colors snippet, CSS custom properties (:root variables), SCSS variables, and a plain JSON array of hex values.