Image Color Picker
Pick colors from any image
100% free. Runs entirely in your browser - your files and data never leave your device and nothing is uploaded to any server.
Drag & drop files here
or browse to upload
Supports PNG, JPG, WebP
Processed in your browser - your file never leaves this device.
About this tool
Clicking a pixel and reading back its exact value solves a problem that guessing never will: matching a colour precisely. A brand blue that is one shade off looks wrong in a way people notice without being able to say why, and no amount of eyeballing a screenshot gets you the right hex code. This tool reads the actual pixel data, so what you get is what is genuinely in the image. The three formats it returns serve different purposes. HEX (#6366f1) is the compact form used almost everywhere in CSS and design tools. RGB expresses the same colour as red, green and blue channels from 0-255, which is what you need when a value has to be calculated or animated. HSL describes hue, saturation and lightness, and is far more useful when you want to build a palette - taking one colour and generating a lighter or more muted version means changing a single number rather than guessing three. Images are read in your browser and never uploaded.
How to use this tool
- Upload your imageDrop in a screenshot, logo, mockup or photo. It is read locally and not sent anywhere.
- Click the colour you wantThe pixel under your cursor is sampled and its values shown immediately in HEX, RGB and HSL.
- Copy the format you needHEX for CSS and design tools, RGB for code that manipulates channels, HSL for building variations.
- Sample as many points as you likeClick around the image to compare shades - useful when a gradient or compression makes one region differ from another.
Key features
- Reads real pixel values rather than approximating, so brand colours match exactly.
- Three formats at once, so you do not need a separate converter.
- Runs in your browser - unreleased designs and client mockups never leave your device.
- Sample repeatedly to compare regions, which reveals gradients and compression artefacts.
- No account and no upload limit.
Common uses
- Extracting a brand colour from a logo when no style guide is available.
- Matching a colour from a design mockup while building the page.
- Identifying the exact shade used in a screenshot of another site or app.
- Building a palette from a photograph for a presentation or moodboard.
- Checking whether two areas that look identical actually share the same value.
Tips for better results
- Sample from a PNG rather than a JPG where possible. JPG compression shifts colours slightly, especially near edges.
- Click several nearby points on what looks like a flat area - if the values differ, you are looking at a gradient or compression noise.
- Use HSL when you need a lighter or darker variant of a colour. Adjusting one lightness number is far more predictable than editing three RGB channels.
- A colour picked from a photograph is affected by lighting and white balance, so it is the colour in that image, not the colour of the physical object.
- Once you have a colour, check it against its background with the Colour Contrast Checker before using it for text.
Mistakes to avoid
- Sampling from a heavily compressed JPG and treating the result as the exact brand colour.
- Picking from a screenshot that has a filter, night mode or colour profile applied, which shifts every value.
- Assuming one sample represents a whole region when the area is subtly gradient-filled.
- Using a picked colour for text without checking contrast, which is the most common accessibility failure on the web.
- Sampling a photograph of a printed item and expecting a match - print and screen colour spaces differ fundamentally.
Supported formats
- JPG
- PNG
- WebP
- GIF
Available options
- Eyedropper sample
- HEX
- RGB
- HSL
Frequently asked questions
It reads the exact pixel value at the point you click, so it's as accurate as the image itself - keep in mind that heavy JPG compression or screen photos of physical objects can shift colors slightly from the "true" real-world color.
Typically HEX (like #6366f1), RGB, and HSL - covering the formats most design and code tools expect.
Yes - click as many points on the image as you need; each click gives you that pixel's color values.
Same tool - "colour picker" is the British spelling and "color picker" the American one. HEX, RGB and HSL values are identical either way, and CSS itself only accepts the American spelling for properties like `color` and `background-color`, which is worth remembering when you paste a value into a stylesheet.
They describe the same colour three ways. HEX is a compact six-digit form used across CSS and design tools. RGB gives the red, green and blue channels as 0-255 values, which suits code that calculates or animates colour. HSL gives hue, saturation and lightness, which is the practical choice for making a lighter or more muted variant - you change one number instead of three.
No. The image is read by your browser and sampled locally, so unreleased designs and client work never leave your device.
Either the area is a subtle gradient rather than flat, or JPG compression has shifted nearby pixels. Sampling a few points quickly tells you which. PNG sources avoid the compression issue entirely.
Use the Colour Palette tool, which extracts the dominant colours from an image automatically rather than asking you to sample each one by hand.
People also search for
- color picker from image
- colour picker online free
- get hex code from image
- eyedropper tool online
- find brand colour from logo
- rgb to hex from photo
- image color identifier