What this colour picker does
Upload a photo, logo, screenshot or design mock-up, then click any spot to read the exact colour of that pixel. The value is shown as a HEX code for CSS and design software, as RGB for code and image editors, and as HSL for tweaking lightness and saturation. Every pick is added to a palette strip you can click to copy again. For a quick brand-style summary, the extract button finds the dominant colours in the whole picture. On touch screens you can drag a finger across the image and watch the swatch follow.
When to use it
- Matching website or presentation colours to a logo when you do not have the brand guidelines.
- Pulling a colour scheme from a photograph for a room, an outfit or an illustration.
- Checking the real colour of a rendered element in a screenshot.
- Sampling a skin tone, a sky or a wall to use in editing or painting.
Getting accurate colour readings
A single pixel can be misleading. Photographs contain noise and compression speckles, so the exact pixel you click might be slightly lighter or darker than the area around it. Switching the sample size to an average of 3 by 3, 5 by 5 or 11 by 11 pixels smooths this out and returns the typical colour of that region. For flat graphics and logos, a single pixel is fine; just avoid anti-aliased edges, where colours blend with the background.
Remember that the colour you read belongs to the image file, not to the object in real life. Lighting, white balance and the camera's processing all shift colours, and screens differ in how they show them. If colour accuracy is critical, such as for print or paint matching, compare against a physical swatch. Semi-transparent pixels are reported with their alpha percentage so you know when a value is affected by transparency. For comfortable use without a mouse, focus the picture and move with the arrow keys, using Shift for bigger steps.
Worked example: reading one colour three ways
Click a pixel on a bright blue button whose HEX code is #1E90FF. The tool shows the same colour as rgb(30, 144, 255), because 1E, 90 and FF are 30, 144 and 255 in decimal, and as hsl(210, 100%, 56%): a hue of 210 degrees, full saturation and 56 percent lightness. An orange logo pixel at #FF6600 reads rgb(255, 102, 0) and hsl(24, 100%, 50%). To make a lighter shade for a hover state, keep the hue and saturation of the HSL value and raise only the lightness. In CSS, the short code #F60 means the same colour as #FF6600.
Privacy: your image is not uploaded
The picture is drawn onto a canvas in your browser and pixel values are read from that local canvas. Nothing is sent over the network, so you can sample unreleased designs and private photos without exposing them. The tool works offline after the first load.
Frequently asked questions
How do I get the HEX code of a colour in a picture?
Add the image and click the spot you are interested in. The HEX, RGB and HSL values update immediately and each has a copy button.
What is the difference between HEX, RGB and HSL?
They describe the same colour in different notations. HEX is a compact six-digit code used in CSS, RGB lists red, green and blue levels from 0 to 255, and HSL expresses hue, saturation and lightness, which is handy for making lighter or darker variants.
Why does the colour look different from the real object?
The file records what the camera captured after white balance and processing. Lighting, screen calibration and compression all change appearance, so treat the value as the colour of the image, not guaranteed truth.
Can I pick a colour from anywhere on my screen?
If your browser supports the EyeDropper feature, a "Pick from screen" button appears. Otherwise, take a screenshot and load it into the tool.
Does the tool save my images or colours?
No. Everything stays in the current page and disappears when you close or refresh it, so copy any codes you want to keep.