Image Color Picker
Upload, drop or paste an image, then click or tap any pixel to get its exact HEX, RGB and HSL code. A magnifier loupe helps you hit the right pixel, and the palette extractor finds the image's dominant colors.
Screen picking needs the EyeDropper API (Chrome or Edge on desktop). You can paste a screenshot instead.
#000000rgb(0, 0, 0)hsl(0, 0%, 0%)cmyk(0%, 0%, 0%, 100%)How to use the Image Color Picker
- Add an image: drop it on the box, paste a screenshot with Ctrl+V, or click Choose image. A sample image is loaded so you can try it right away.
- Move over the image: the loupe shows the pixels under the cursor, zoomed in. On a phone, touch and slide your finger, then lift to pick.
- Click to pick a color. Its HEX, RGB, HSL and CMYK codes appear on the right; press Copy next to the format you need.
- Extract a palette: choose how many colors (5 to 10) and the tool groups similar pixels to find the dominant colors and their share of the image.
- Reuse colors: click a swatch in the history or palette to load it again, or download the palette as a PNG.
Color code formats explained
Every pixel on a screen is a mix of red, green and blue light, each stored as a number from 0 to 255. The same color can be written in several notations:
| Format | Example | Where it is used |
|---|---|---|
| HEX | #FF6347 | CSS, HTML, Figma, Canva, most design tools |
| RGB | rgb(255, 99, 71) | CSS, image editors, programming |
| HSL | hsl(9, 100%, 64%) | CSS; easy to make lighter, darker or less saturated variants |
| CMYK | cmyk(0%, 61%, 72%, 0%) | Print design (a naive conversion; printers use color profiles) |
How to convert between the formats
RGB to HEX: write each channel as two hexadecimal digits. 255 = FF, 99 = 63, 71 = 47, so rgb(255, 99, 71) = #FF6347.
RGB to HSL: scale each channel to 0–1 (r = 1, g = 0.388, b = 0.278). Max = 1 and min = 0.278, so lightness L = (max + min) / 2 = 0.639 = 64%. The difference d = 0.722, saturation S = d / (1 − |2L − 1|) = 0.722 / 0.722 = 100%. Because red is the largest channel, hue H = 60 × ((g − b) / d) = 60 × 0.153 ≈ 9°.
RGB to CMYK: K = 1 − max(r, g, b); then C = (1 − r − K) / (1 − K), and likewise for M and Y. For #FF6347 this gives C 0%, M 61%, Y 72%, K 0%.
Tips for picking accurate colors
- Use averaging on photos. JPEG compression and sensor noise make neighboring pixels differ. A 3×3 or 5×5 sample gives the typical color of an area rather than one stray pixel.
- Pick from the original file, not a screenshot of a scaled-down preview. Screenshots of web pages can be color-managed or scaled, which shifts edge pixels.
- Avoid edges and text. Anti-aliasing blends the foreground with the background, so edge pixels are an in-between color.
- Use the palette for brand colors. The dominant colors from a logo or product photo are a quick starting point for a matching website or slide theme.
- Check contrast before using picked colors for text: dark text on a light picked background should reach a contrast ratio of at least 4.5:1.
Frequently asked questions
How do I get the color code from an image?
Open the image in this tool and click the pixel you want. The exact HEX code (such as #3A7BD5), the RGB values and the HSL values appear instantly, each with a copy button.
Why is the picked color slightly different from what I expected?
Photos contain noise and compression artifacts, so neighboring pixels often differ by a few values. Set Sample size to 3×3 or 5×5 to average the area around the cursor, which gives a more representative color.
How does the palette extraction work?
The image is scaled down and its pixels are grouped with the k-means clustering algorithm: each pixel is assigned to the nearest of k colors, and each color is moved to the average of its pixels until the groups stop changing. The resulting colors are sorted by how much of the image they cover.
Can I pick a color from outside the image, like another app or website?
Yes, in browsers that support the EyeDropper API (Chrome and Edge on desktop). Press Pick from screen and click anywhere on your screen. In other browsers take a screenshot and paste it here instead.
Is my image uploaded?
No. The image is read and analyzed entirely in your browser with JavaScript. Nothing is sent to a server.
What is the difference between HEX, RGB and HSL?
They describe the same color in different ways. RGB gives the red, green and blue amounts from 0 to 255. HEX writes those same three numbers in base 16, for example rgb(255, 99, 71) = #FF6347. HSL describes hue (0 to 360 degrees), saturation and lightness in percent, which is handy for making lighter or darker variants.
Does it work with transparent PNGs?
Yes. Transparent areas are shown over a checkerboard, and the color values are reported for the RGB channels of the pixel along with its alpha. Fully transparent pixels are skipped when extracting the palette.