Move over the image to preview, click to lock a color in. The magnifier shows individual pixels.
Picked color
Image palette
History
Colors you click are kept here.
Building tints, shades, and harmonies from a color you picked here? Send it to the Color Converter & Picker. Cropping or resizing the image first? Use the Image Cropper.
Values are read straight from the decoded image data, and the magnifier enlarges individual pixels so you pick the one you actually meant.
Swatches are the colors that genuinely fill the most of the image, kept far enough apart that you never get six shades of the same blue.
Everything happens on your device with canvas. Nothing is uploaded, nothing is tracked, and it all works offline.
How to pick a color from an image
Drop a photo, screenshot, or logo onto the box above, or just paste one from your clipboard. Then:
Hover, magnify, click
Moving over the image previews the color under your cursor live. The circular magnifier enlarges the surrounding pixels so you can land on exactly the one you want, which matters more than people expect: what looks like a flat area of color is often dozens of slightly different shades. Click to lock a color in and add it to your history.
Use the extracted palette
The palette panel shows the image's dominant colors, measured across every sampled pixel rather than picked from a few at random, and spaced apart so you get six usable colors instead of six shades of the same one. It is the fastest way to build a scheme from a photograph, a brand asset, or a screenshot of a site you like. Copy all as CSS gives you the whole set as custom properties, ready to paste into a stylesheet.
Pick from anywhere on screen
In Chrome, Edge, and Opera a Pick from screen button appears, using the browser's built-in EyeDropper to sample any pixel on your display, with no need to screenshot first. Other browsers hide the button; drop a screenshot in instead and the result is the same.
HEX, RGB, and HSL: the same color, three ways
Every color here is shown in three notations. They are interchangeable, and which one you want depends on what you are doing with it.
| Notation | Example | Best for |
|---|---|---|
| HEX | #2563eb | CSS, design tools, and anywhere a color is pasted as a single token |
| RGB | rgb(37, 99, 235) | Code that mixes channels, canvas work, and adding transparency |
| HSL | hsl(221, 83%, 53%) | Adjusting a color by hand: tints, shades, and building harmonies |
HSL is the one worth learning. Because hue, saturation, and lightness are separated, making a color lighter means raising one number, and finding its complement means adding 180 to the hue. Doing either in HEX means recalculating all three channels.
Frequently asked questions
How do I get the HEX code of a color in an image?
Load the image onto this page, then move your cursor over it. The color under the pointer is read live and shown as a HEX code. Click to lock that color in, then copy it. The magnifier that follows your cursor shows the individual pixels enlarged, so you can pick precisely even in a detailed photo.
What is the difference between HEX, RGB, and HSL?
They are three ways of writing the same color. HEX (#2563eb) is a compact six-digit form used throughout CSS and design tools. RGB (37, 99, 235) states how much red, green, and blue light is mixed, from 0 to 255 each. HSL (221, 83%, 53%) describes hue, saturation, and lightness, which is far easier to adjust by hand: to lighten a color in HSL you simply raise the L.
How is the color palette extracted from my image?
The image's pixels are sampled and sorted into a grid of color buckets, and the buckets holding the most pixels win, so the swatches really are the colors that fill the most of the picture, not a few arbitrary samples. One extra rule keeps the result useful: a bucket is skipped if it is too close to a color already chosen. Without it, a photo of a blue sky would hand you six almost identical blues. Each swatch is the true average of the pixels in its bucket, so a flat color comes back exactly.
Why is the color I picked slightly different from the original?
Two common reasons. Lossy formats such as JPEG alter pixels slightly during compression, so a region that looks like one flat color often contains many near-identical shades, which the magnifier reveals immediately. Screenshots and photos also carry lighting, shadow, and color-profile differences. The value shown here is always the true pixel value from the decoded image data.
Can I pick a color from anywhere on my screen?
Yes, in browsers that support the EyeDropper API (Chrome, Edge, and Opera). The Pick from screen button appears automatically when it is available and lets you sample any pixel on your display, not just the loaded image. In other browsers, take a screenshot and drop it onto this page instead. The result is identical.
Is my image uploaded anywhere?
No. The image is decoded and read pixel by pixel in your browser using canvas, so it is never uploaded, stored, or seen by anyone else. Nothing is tracked, there is no account, and the page keeps working with your connection switched off.