Developers
Image Color Picker
Sample exact colors from any image and get HEX, RGB, and HSL values instantly. Pick individual pixels or extract a full palette — all processed locally, with nothing uploaded.
How to use image color picker
- 1
Add an image
Drop a photo, screenshot, or design mockup to sample colors from it.
- 2
Click any pixel
Click or drag on the image to pick the exact color at that point.
- 3
Copy the value
Copy the HEX, RGB, or HSL value with one click for your code or design tool.
- 4
Build a palette
Save colors as swatches, or extract an automatic palette from the whole image.
What you can do
HEX, RGB, and HSL
Get every common color format instantly, ready to paste into CSS, Figma, or any design tool.
Pixel-accurate sampling
Colors are read from the true full-resolution image, not a scaled thumbnail.
Automatic palette
Extract the dominant colors from an entire photo to build a coherent scheme.
One-click copy
Click any swatch to copy its HEX value without selecting text.
Image color picker
Drop an image to sample colors
or click to browse — JPG, PNG, WebP, AVIF
Click or drag anywhere on the image to pick a color.
Selected
#FFFFFF
—
- HEX
-
#FFFFFF - RGB
-
rgb(255, 255, 255) - HSL
-
hsl(0, 0%, 100%)
Picked colors
No colors saved yet.
Frequently asked questions
How do I get a color from an image?
Add the image, then click the pixel you want. The tool reads the exact color at that point and shows its HEX, RGB, and HSL values. You can also drag across the image to explore colors live.
What is the difference between HEX, RGB, and HSL?
HEX is a shorthand used mainly in web code, like #0d9488. RGB lists red, green, and blue values from 0 to 255 and is common in CSS and image editing. HSL describes hue, saturation, and lightness, which is easier to reason about when you want to make a color lighter or more muted.
Why does the color look different from what I expected?
Your display, color profile, and browser rendering can all shift colors slightly. If precise color accuracy is critical, compare the picked value against your design tool and your monitor profile. Screenshots and compressed images may also contain slight color noise.
How does the palette extraction work?
The image is reduced to a small sample, pixels are grouped into color buckets, and the most frequently occurring buckets are averaged and ranked. The result is a set of representative colors rather than a random selection of individual pixels.
Can I pick colors from transparent images?
Yes. Transparent pixels have no color to sample, so click on an opaque area. If you sample a partially transparent pixel, the RGB value reflects the underlying color channel data before compositing.
Is my image uploaded?
No. The image is drawn to a canvas in your browser and colors are read from those pixels locally. Nothing is uploaded.