Matching a brand colour
- Input
- Click the logo in a screenshot
- Output
- #1D4ED8 · rgb(29, 78, 216)
Sampling directly from an image is the reliable way to match a colour you have no specification for.
Image Color Picker
An image colour picker reads the exact colour of any pixel you click and extracts the palette that dominates the picture. Upload an image, click anywhere to sample a colour, and copy it as HEX, RGB or HSL — useful for matching a design to a photograph or pulling a palette from a reference.
Runs entirely in your browser — your images are never uploaded.
Click anywhere on the image to sample a colour.
How to
How to use the Color Picker
- 1
Add an image
Drop in any photo or graphic. It appears on a canvas ready to sample.
- 2
Click to pick a colour
A magnifier shows the exact pixel under the cursor so you can hit the colour you meant.
- 3
Read the values
Each sample is shown as HEX, RGB and HSL, with a swatch and one-click copying.
- 4
Use the palette
The dominant colours in the image are extracted automatically alongside your own samples.
Examples
Color Picker examples
Palette from a photograph
- Input
- Landscape photo
- Output
- Six dominant colours with proportions
The palette is built by clustering the image's colours, so it reflects what actually dominates rather than what stands out.
Same colour, three notations
- Input
- One sampled pixel
- Output
- #E11D48 · rgb(225, 29, 72) · hsl(347, 77%, 50%)
HEX suits CSS, RGB suits most design tools, and HSL makes it easy to derive lighter or darker variants.
Why use it
What the Color Picker gives you
Magnified sampling
A zoomed view of the pixels under the cursor means you pick the colour you intended, not its neighbour.
Palette extracted automatically
Dominant colours are clustered from the whole image, giving a usable palette rather than a handful of random samples.
Three notations at once
HEX, RGB and HSL for every colour, so it drops straight into CSS or a design tool.
Sample history
Colours you pick are kept in a list, so you can build a palette by hand and copy any of them later.
Private
The image is read in your browser and never uploaded.
Good to know
Color Picker limitations
- Colours are read as displayed. An image with an embedded colour profile may sample slightly differently from how a colour-managed application shows it.
- JPEG compression shifts colours slightly, especially at edges, so a sampled value may differ a little from the original design.
- The palette is an approximation based on clustering; it is a starting point rather than a definitive answer.
- Images are limited to 25 MB.
Summary
Color Picker in short
- Sampling reads the exact pixel colour and reports it as HEX, RGB and HSL.
- The palette is clustered from the whole image, so it reflects genuine dominance.
- JPEG compression can shift colours slightly from the original design.
- Everything runs in your browser.
FAQ
Color Picker questions
How does picking a colour from an image work?
The image is drawn to a canvas and the pixel under your cursor is read directly, giving its exact red, green and blue values. Those are then expressed as HEX, RGB and HSL.
What is the difference between HEX, RGB and HSL?
All three describe the same colour. HEX is compact and standard in CSS. RGB states the red, green and blue components directly. HSL uses hue, saturation and lightness, which makes creating lighter or darker variants far easier.
How is the palette chosen?
By grouping the image's pixels into clusters of similar colour and taking the centre of each cluster. That surfaces what genuinely dominates rather than the brightest or most unusual colours.
Why does the colour look slightly different from the original?
JPEG compression alters colours slightly, most visibly near sharp edges. Embedded colour profiles can also shift how a colour is displayed. Sample from a PNG where exactness matters.
Can I pick a colour from anywhere on my screen?
Not from a web page — browsers cannot read pixels outside their own content for security reasons. Take a screenshot and sample that instead. Your operating system may also include a system-wide picker.
How do I check a colour is accessible?
Contrast is what matters: WCAG asks for at least 4.5:1 between body text and its background. Sample both colours here, then check the pair in a contrast checker.
How many colours should a palette have?
Most designs use one dominant colour, one accent and a few neutrals. Six extracted colours give plenty to choose from — using all of them usually looks incoherent.
What happens with transparent pixels?
They are sampled against the canvas background, so a fully transparent area reads as that background rather than as a colour of its own.
Is my photo sent anywhere to read its colours?
No. The image is drawn to a canvas and the pixel values are read directly in your browser. Client work and unreleased designs never leave your machine.
Discover
Related image tools
Image ConverterConvert images between JPG, PNG, WebP and AVIF in your browser. Batch convert, control quality, and download as a ZIP.Image CompressorCompress JPG, PNG and WebP images in your browser. Set a quality level or a target size and see exactly how much you saved.SVG OptimizerClean and minify SVG files. Removes editor cruft, comments and hidden metadata while keeping the graphic identical.Image CropperCrop images to any aspect ratio with a drag handle and live preview. Presets for square, 16:9 and social sizes. Runs in your browser.