Image Color Picker
This free image color picker lets you upload any image and hover or click to read the exact color under your cursor, complete with a zoom loupe for pixel-precise picking. It runs entirely in your browser, so your images never leave your device and nothing is uploaded.
Grab copy-ready HEX, RGB, and HSL values in a click, or extract a full palette from a photo, screenshot, or design. There is no sign-up and no limit on how many colors you sample.
Image
Click on the image to pick a color…
Color palette
Colors
View color details
Use your own image
Using a Google Images link?
- Open Google Images and search for your image.
- Click the image to open the large preview.
- Right-click the large photo → Copy image address.
- Paste above and click Load.
We think data protection is important — no data is sent. The magic happens in your browser.
How to use the image color picker
Upload an image by dragging it onto the canvas or clicking to browse. Move your cursor over the image and the zoom loupe magnifies the area beneath it, showing individual pixels so you can target the exact spot you want. The live readout updates with the color under the cursor as you move.
Click to lock a color and reveal its HEX, RGB, and HSL values, each with a copy button. Keep clicking to gather several colors, or use the palette extraction to pull the dominant colors from the whole image at once. Because everything runs locally, even large or confidential images stay private on your device.
What you can use it for
An image color picker is one of the fastest ways to bridge the gap between a visual you like and the exact values you need to reproduce it. Common uses include:
- Matching a brand color from a screenshot, logo, or marketing photo when you do not have the official hex code.
- Building a cohesive palette by sampling colors directly from a photograph or piece of artwork.
- Checking the real color of a pixel when a design looks slightly off compared to your style guide.
- Pulling accent and background tones from inspiration images for moodboards and mockups.
| Value | Best for | Example use |
|---|---|---|
| HEX | Web and CSS, design handoff | Pasting into stylesheets or design tools |
| RGB | Screens, digital editing | Setting colors in image editors |
| HSL | Adjusting hue, saturation, lightness | Creating tints and shades from a base color |
Tips for accurate color picking
Use the zoom loupe to land on a single representative pixel rather than guessing at full size, especially near edges where colors blend. Be aware that compressed images such as JPEGs introduce subtle color shifts, so the same flat area can vary pixel to pixel; sample a few nearby points and pick the value that repeats. Screenshots are more reliable than photos because they avoid lighting and camera variation. When matching a brand color, prefer a clean source like a logo file over a photographed product. Remember that on-screen colors depend on your display, so treat sampled values as a strong starting point and confirm against an official spec when one exists.
Color code formats explained
A single color can be written several ways, and the right one depends on where it will be used. Screens and CSS use HEX and RGB, design tools often use HSL for easy adjustment, and print work needs CMYK. OKLCH is a newer CSS format built for perceptually even adjustments. The table below shows what each format looks like and when to reach for it.
| Format | Example | Best for |
|---|---|---|
| HEX | #2596be | Web and CSS, design handoff and brand style guides |
| RGB | rgb(37, 150, 190) | Screens and digital editing; the values most apps read directly |
| HSL | hsl(196, 67%, 45%) | Adjusting hue, saturation and lightness by hand |
| CMYK | cmyk(81%, 21%, 0%, 25%) | Print work, where ink percentages matter more than screen values |
| OKLCH | oklch(63% 0.11 230) | Modern CSS where you want perceptually even lightness and hue steps |
Why a picked color can look different elsewhere
The exact value you sample is the color of one pixel as it was saved in the file. That can differ from what you remember seeing for a few reasons. Lossy formats such as JPEG shift nearby pixels during compression, anti-aliased edges blend two colors together, and gradients change shade pixel by pixel. Different monitors and color profiles also render the same code slightly differently, and print on paper via CMYK rarely matches a backlit screen. For brand colors, sample from a flat area away from edges and gradients, and confirm against an official value when one exists.
Frequently asked questions
How do I find the hex code of a color in an image?
Upload your image, hover over the area you want, and use the zoom loupe to position the cursor precisely. Click to lock the color and the tool displays its HEX value with a copy button. You can also copy the same color as RGB or HSL, or extract a full palette to capture several hex codes at once.
Are my images uploaded to a server?
No. The image color picker processes everything locally in your browser, so your images never leave your device and are not sent anywhere. This keeps private screenshots, client work, and unreleased designs secure, and it also means picking is fast because there is no upload or download step between you and your colors.
Can I get RGB and HSL as well as HEX?
Yes. Every color you pick is shown in HEX, RGB, and HSL at the same time, each with its own copy button. HEX suits web and CSS, RGB works well in image editors, and HSL makes it easy to adjust hue, saturation, and lightness when you want to build tints or shades from a sampled base color.
Why does the same area show slightly different colors?
Lossy formats like JPEG compress images by approximating color data, so flat-looking regions actually contain small pixel-to-pixel variations. Photos add lighting and camera differences on top. Use the loupe to sample several nearby pixels and choose the value that appears most consistently, or start from a cleaner source such as a screenshot or an original logo file.
What is the difference between HEX, RGB and HSL?
They describe the same color in different notations. HEX is a six-digit code used in web and CSS, RGB lists red, green and blue light values from 0 to 255, and HSL breaks a color into hue, saturation and lightness so it is easier to tweak by hand. This tool shows all three at once, so you can copy whichever your software expects.
Can I get CMYK values for print?
HEX, RGB and HSL are screen formats based on light, while CMYK describes ink percentages for printing. A screen-to-CMYK value is only an approximation because monitors and presses reproduce color differently. For accurate print work, take the sampled HEX or RGB into your design software and convert it there using your printer’s color profile, or ask your print supplier for a matched value.
Why do two nearby points give different color codes?
Images are made of individual pixels, and adjacent ones are rarely identical. Around the edges of shapes, anti-aliasing blends the foreground and background into in-between shades, and gradients change tone across every pixel. If you need a flat brand color, sample from the middle of a solid area rather than near an edge, line or shadow to avoid these blended pixels.
How do I build a full palette from one image?
Beyond picking single points, the tool extracts a set of dominant colors from the whole image into a palette you can copy. This is useful for turning a photo, screenshot or piece of artwork into a cohesive scheme. Pick the palette colors you like, then refine each one in HEX or HSL to balance contrast and make sure text remains readable.