Color Picker — Pick Colors from Any Image
Drop a screenshot or photo, click any pixel to grab its exact color. Get HEX, RGB, HSL, and OKLCH values, plus an auto-extracted palette of the 5 dominant colors.
How to pick colors from any image in your browser
- Drop your image. Drag and drop a screenshot, photo, or design mock into the upload area. PNG, JPG, WebP, and GIF all work.
- Hover and click to pick. Move your cursor over the image — a magnifier shows the pixel under the crosshair. Click to lock the color in.
- Copy in any format. One-click copy as HEX (#ff7a00), RGB (rgb(255, 122, 0)), HSL, or modern OKLCH for CSS color-mix() and wide-gamut displays.
- Use the palette swatches. A 5-color palette is auto-extracted from the dominant tones in the image. Click any swatch to copy that color in your preferred format.
Frequently Asked Questions
- Are my images uploaded to a server?
- No. The picker runs entirely in your browser using the canvas API. Your image never leaves your device.
- What is OKLCH and why does it matter?
- OKLCH is a modern perceptually-uniform color space supported in CSS Color Level 4. It produces better color-mix() interpolation and unlocks wide-gamut P3 colors on modern displays. Most design tools (Figma, Tailwind 4) now support it.
- How is the 5-color palette extracted?
- We run a k-means clustering pass on the image pixels (downsampled for speed) to find the 5 most dominant color clusters. The result matches what your eye sees as the "main colors" of the image.
- How accurate is it on JPEG-compressed images?
- JPEG artifacts can shift individual pixel colors by a few values. For more reliable picks on noisy images, use the multi-pixel sampling option to average a 3x3 or 5x5 area instead of a single pixel.
- Can I sample more than one pixel at a time?
- Yes. Switch to 3x3 or 5x5 sampling in the settings — the picker averages the area to smooth out JPEG noise or anti-aliasing edges.
- How does it handle transparent images?
- Transparent PNGs are rendered on a checkerboard background. Clicking a fully transparent pixel returns the underlying background color (white by default).
Use Cases
- Extract a color palette from a reference design or moodboard
- Find a brand's exact accent color from their logo or website screenshot
- Match a CSS color to a specific pixel in a design mockup
- Sample colors from a screenshot to rebuild a UI theme
- Build a design system starting from a hero image or photo