Image Color Picker — Get Hex Codes From Any Photo
Pick colours from an image and get their hex and RGB codes without installing anything. Drop a photo, choose how many colours you want, and the tool returns a palette of the dominant colours with a hex code, an RGB value and the share of the image each one covers. It runs in your browser, so the image is never uploaded, and the codes are ready to paste into CSS, Figma, Canva or a brand guide.
How to do it
- Drop the image onto the upload box, or click it and pick a JPG, PNG or WebP up to 5 MB.
- Set how many colours to extract. Five is a good default for a palette; two or three for a logo; eight to ten for a busy photo.
- Click to extract. Each swatch shows its hex code, RGB value and the percentage of the image it covers.
- Copy the codes you need, or download the palette strip as an image.
Dominant colours versus a single pixel
A pixel-level eyedropper tells you the colour of one point, which is rarely what you want: zoom into any photo and a wall that looks uniformly cream is hundreds of slightly different values. This tool answers the more useful question of which colours the image is made of. It groups every pixel into the number of clusters you ask for and reports the centre of each cluster, so the cream wall comes back as one cream, not a hundred. The percentage next to each swatch is the share of pixels that fell into that cluster, which is a direct reading of how much of the image the colour occupies. That makes the result stable: pick five colours from the same photo twice and you get the same five.
How many colours to ask for
The count is the main control and it changes the answer. Ask for two colours from a sunset and you get a warm orange and a dark blue, because that is the best two-way split of the pixels. Ask for eight and the orange separates into a yellow highlight, a mid orange and a rust, while the blue splits into sky and near-black. Neither answer is wrong; they are different levels of detail. For a website palette, five or six colours usually gives a dominant, a secondary, a background and a couple of accents. For matching a paint or a brand colour from a logo on a plain background, two or three is enough and reduces the chance of a compression artefact colour sneaking in. For a mood board from a busy photograph, go to eight or ten.
Reading hex and RGB codes
Every swatch is reported two ways because different tools want different formats. The hex code — a hash followed by six characters, like #C8553D — is what CSS, Tailwind, Figma and most design tools expect. The RGB triple, such as 200, 85, 61, is the same colour written as red, green and blue intensities from 0 to 255, and is what many print and video tools ask for. They are interchangeable: each pair of hex characters is one RGB channel in base 16. If a tool asks for HSL or CMYK, paste the hex into its colour field and it will convert. Note that a hex code describes a screen colour in sRGB. A printed version will not match exactly, and a paint match needs a physical swatch.
Getting a cleaner palette
The colours you get back are only as clean as the pixels going in. A heavily compressed JPEG carries blocky artefacts around edges that can register as a muddy extra cluster, so use the least compressed version you have. A photo with a large out-of-focus background will be dominated by that background, which is correct but not always useful — crop to the subject first if you want the subject's colours. Skin tones, wood and foliage each span a wide range, so they often take two clusters between them; asking for one more colour than you need and discarding the least relevant is easier than trying to hit the right count first time. Screenshots of interfaces work especially well, because flat UI colour is exactly what the clustering finds.
Typical uses
Designers pull a palette from a hero photograph so the rest of the page harmonises with it, then paste the hex codes into their design tokens. Developers extract a brand colour from a client's logo when nobody can find the style guide. Marketers match social graphics to a product photo. Decorators screenshot a room they like and read off the wall and furniture colours to take to a paint shop. Crafters pick thread and yarn colours from a reference image. The percentage column is useful in all of these because it tells you which colour should dominate and which should be an accent, rather than just listing them side by side.
Privacy and limits
The clustering runs entirely in your browser. The image is decoded locally and never sent to a server, so a screenshot of an internal design, a client mock-up or an unreleased product is safe to use. Input is JPG, PNG or WebP up to 5 MB, and the colour count runs from two to ten. Transparent regions in a PNG are read as black, so flatten a transparent logo onto its intended background before extracting. There is no signup, no watermark on the downloadable palette strip, and no limit on how many images you run through it.
Frequently asked questions
Can I pick the colour of one specific pixel?
This tool extracts the dominant colours of the whole image rather than a single point. For a specific area, crop the image to that area first and extract two or three colours.
Why is the colour slightly different from what I see?
Each swatch is the centre of a cluster of similar pixels, so it averages small variations. On a compressed JPEG that can shift the value a little. Use the least compressed source you have.
What is the difference between hex and RGB?
Same colour, two notations. Hex is #RRGGBB in base 16; RGB is three decimal numbers from 0 to 255. CSS and design tools take either.
How many colours should I extract?
Five for a general palette, two or three for a logo, eight to ten for a busy photograph.
Does it work on transparent PNGs?
Yes, but transparent pixels count as black. Flatten the PNG onto white or its real background first so the palette is not skewed by an extra black swatch.
Is my image uploaded?
No. Everything runs in your browser and the file never leaves your device.