Image Color Picker — HEX, RGB and Palette
Browser tool that picks colour codes from an image and builds a dominant palette
Runs in your browser · nothing is uploaded
Drop the image to pick colours from
One image such as JPG, PNG or WebP. You can also paste a copied image with Ctrl+V (⌘V on a Mac). It never leaves your browser.
Click or tap the image to pick the colour under it. After clicking you can also move with the arrow keys (Shift + arrow for 10 pixels).
Magnifier
Cursor: -
Picked colour
No colour picked yet. Click the image.
Dominant palette
Found with k-means: the image is shrunk and similar colours are grouped. The same image always gives the same result. Click a colour to load it above.
What it is
This tool tells you the colour of any pixel in a photo or a design as a HEX code (#2563EB), RGB and HSL. Click or tap the image to pick a pixel, and a magnifier enlarges its surroundings so you can hit the exact spot. It also builds an automatic palette of the 5 to 8 most prominent colours.
How to use
- Drop an image or press Choose image. You can also paste a copied image with Ctrl+V (⌘V on a Mac).
- Move over the image and the Magnifier on the right shows the nearby pixels enlarged. Click or tap where you want.
- Read HEX, RGB and HSL under Picked colour and press Copy.
- After clicking the image, the arrow keys move the cursor one pixel at a time, Shift plus an arrow ten pixels, for finer control.
- Under Dominant palette choose between 5 and 8 colours and click a swatch to load it into the values above.
How it works
- HEX: each channel as two hexadecimal digits in capitals. R37 G99 B235 gives #2563EB.
- HSL: hue 0 to 360 degrees, saturation and lightness 0 to 100 percent, rounded to whole numbers. The colour above is hsl(221, 83%, 53%).
- Palette: pixels with at least 50% opacity are grouped with k-means (k-means++ seeding, fixed seed, at most 20 iterations) and the centres are rounded. Larger groups come first with their share of the image shown as a percentage.
- Downsampling: the image is reduced to about 10,000 pixels before clustering, so large photos stay fast. Pixels are sampled without blending, so no in-between colour that is missing from the picture sneaks into the palette.
- Colour values: the pixel values as the browser drew them in sRGB; an image with another colour profile is read after the browser’s conversion to sRGB.
Example uses
| Goal | Approach |
|---|---|
| Check a logo’s brand colour | click a flat area and copy the HEX |
| Pick a background that matches a photo | take the biggest palette colour |
| Inspect a single pixel | move with the arrow keys and watch the magnifier |
FAQ
Is my image uploaded?
No. Drawing the image and reading its pixel values both happen in your browser. Neither the file nor the colours you pick are sent anywhere.
The picked colour looks a little different from what I see.
The tool reads the pixel values the browser drew for the screen in sRGB. If the image carries a colour profile such as Display P3 or Adobe RGB, the browser converts it to sRGB first, so the values can differ from the document values in an editor like Photoshop. Monitor settings and brightness can also change how it looks. Photos also contain tiny noise, so neighbouring pixels differ slightly. For an exact colour click inside a flat area.
Can I pick with the keyboard?
Yes. Click the image once or focus it with Tab, then use the arrow keys to move the cursor by one pixel, or ten with Shift, and the colour under it is picked right away. Enter or Space picks the colour at the current cursor again. The magnifier shows the surrounding 11 by 11 pixels.
How is the palette chosen?
The image is shrunk to about 10,000 pixels and similar colours are grouped with k-means into 5 to 8 colours. The starting points come from a fixed random seed, so the same image always gives the same palette. Transparent pixels are left out.
Do very large images work?
If the long edge is over 4096 pixels the image is loaded at that size, and colours are picked from the reduced picture. If you need single-pixel accuracy on a huge image, crop the part you need first.
What about partly transparent pixels?
HEX, RGB and HSL show colour only, without alpha. Picking a semi-transparent pixel shows a note that alpha is not included.
Related tools
Favicon Generator
Browser tool that builds favicon.ico, multi-size PNG icons, a manifest and HTML snippets
Image Resizer
Browser-based image resizer with pixel, percent and long-edge modes and social platform presets
Image to Base64
Browser converter between images and Base64, data URIs, CSS and HTML snippets
Image Compressor
Browser-based compressor for JPG, PNG and WebP, by quality or to a target file size
Photo Filters
Browser photo filter with presets and sliders for brightness, contrast, saturation and blur