How to use the Image Color Picker
- Drop an image on the page, paste it with Ctrl+V, or click Choose image. A sample photo loads so you can try it straight away.
- Move over the image: the loupe magnifies the pixels under your pointer and previews the color live.
- Click (or tap) to pick a color. Use the arrow keys to nudge the selection one pixel at a time.
- Click any value (HEX, RGB, HSL…) to copy it. Picked colors are kept in your history for later.
Image Color Picker features
- Exact pixel values read straight from the image, with zoom up to 64×
- Floating loupe and side magnifier for pixel-perfect picking
- Average 3×3, 5×5 or 9×9 pixels for a true color from noisy photos
- HEX, RGB, HSL, HSV, CMYK and OKLCH codes, plus the closest CSS color name
- Screen eyedropper to pick colors outside the image (Chrome, Edge, Opera)
- Automatic palette of the 5, 8 or 12 dominant colors in the image
- Picked colors collected and exported as CSS, SCSS, Tailwind, JSON or PNG
- Paste screenshots with Ctrl+V; your last image and picks are kept in your browser
Get the color code of any pixel in an image
Need the exact color from a logo, a product photo or a screenshot of a website? This free image color picker works like an eyedropper for pictures. Open an image, click the spot you want, and you get its HEX, RGB, HSL, HSV, CMYK and OKLCH code straight away, ready to paste into CSS, Figma, Photoshop, Canva or any other app.
Because the color is read directly from the image data, the code you copy is the real value of that pixel, not an estimate. There is nothing to install and no account to create, and it works the same on Windows, Mac, Linux, Android and iPhone.
What people use an image color picker for
- Matching brand colors. Pick the exact blue from a company logo or a photo of packaging when you do not have the style guide to hand.
- Copying colors from websites and apps. Take a screenshot, paste it here and grab the button, background or text color for your own CSS.
- Design inspiration. Turn the colors of a sunset, a painting or an outfit into codes you can reuse in a presentation, a website or a social media post.
- Art, crafts and interiors. Find the color of a wall, fabric or makeup shade in a photo, then look up the closest paint or thread by its code.
- Checking design work. Compare the color a browser actually renders with the value in the design file, pixel by pixel.
How to pick an accurate color from a photo
Digital photos are made of millions of slightly different pixels. Sensor noise and JPEG compression mean that even a flat blue sky contains dozens of shades, so a single pixel is not always the most representative color. A few habits give much better results:
- Zoom in first. Scroll, pinch or use the zoom buttons (up to 64×) so you can see individual pixels and avoid edges, highlights and shadows.
- Average an area. Switch the sample size from 1 px to 3×3, 5×5 or 9×9 to get the mean color of the pixels around your click. This is the best choice for photos, skin tones and fabrics.
- Use the magnifiers. The floating loupe follows your pointer and the side magnifier shows the grid of pixels under it, so you always know exactly which pixel you are about to pick.
- Nudge with the keyboard. After clicking, use the arrow keys to move the selection one pixel at a time until the preview is exactly right.
| Sample size | Best for |
|---|---|
| 1 px | Logos, icons, screenshots, pixel art and flat graphics where every pixel is exact |
| 3×3 average | Sharp photos and small details |
| 5×5 average | Typical phone and camera photos |
| 9×9 average | Noisy, low-light or heavily compressed images and large uniform areas |
Color formats you can copy
Every pick is shown in all the common color notations at once. Click a value to copy it, or set Copy on click as so your preferred format is copied the moment you click the image.
| Format | Example | Where it is used |
|---|---|---|
| HEX | #1E90FF | CSS, HTML and nearly every design app |
| RGB / RGBA | rgb(30, 144, 255) | CSS, JavaScript, video and game engines |
| HSL | hsl(210, 100%, 56%) | CSS, especially when you want lighter or darker variants |
| HSV / HSB | hsv(210, 88%, 100%) | Photoshop, Procreate and most visual color pickers |
| CMYK | cmyk(88%, 44%, 0%, 0%) | A starting point for print work |
| OKLCH | oklch(65.2% 0.19 253) | Modern CSS and design systems |
Need another notation such as CIE LAB, HWB or code for Android, Flutter or SwiftUI? Paste the color into the Color Converter.
Pick a color from a screenshot
You do not need to save a screenshot as a file first. Copy it to the clipboard and paste it straight into the page:
- Windows: press Win + Shift + S, select an area, then press Ctrl + V here.
- Mac: press Cmd + Ctrl + Shift + 4 to copy an area to the clipboard, then press Cmd + V.
- Phone or tablet: take a screenshot as usual, then tap Choose image and select it from your photos.
If the color is already on your screen and you use Chrome, Edge or Opera, you can skip the screenshot altogether: the screen eyedropper button above the image picks a color from anywhere on your display, including other apps.
Build a palette from the same image
Below the image, the picker also finds the 5, 8 or 12 dominant colors so you can see the overall palette at a glance. Every color you click is collected in Picked colors, and both lists can be exported as CSS variables, SCSS, a Tailwind config, JSON or a PNG swatch image. For more control over the number of colors and their style, open the image in the Image Color Extractor.
Your images stay on your device
Most online color pickers upload your file to a server. This one does not. The image is opened by your browser and drawn on a canvas on your own device, so private photos, client work and unreleased designs never leave your computer or phone. Your last image and the colors you picked are kept in your browser's own storage, so they are still here when you come back, and you can clear them at any time.
What to do with your color next
- Check that text in that color is readable with the Contrast Checker.
- Create lighter and darker versions with the Shades & Tints Generator.
- Build a full color scheme around it in the Color Palette Generator.
- Find out what the color is called with the Color Name Finder.
Image Color Picker: frequently asked questions
Is my image uploaded to a server?
No. The image is opened by your browser and drawn on a canvas on your own device. Nothing is uploaded or stored by us.
Which image formats are supported?
Any format your browser can display: JPG, PNG, GIF, WebP, AVIF, BMP, ICO and SVG. Most modern browsers also handle HEIC on Apple devices.
How do I pick a color from a screenshot?
Take the screenshot, then press Ctrl+V (Cmd+V on Mac) on this page. The image is pasted straight into the picker.
Why does the color differ slightly from what I see in another app?
Some photos carry a color profile (such as Display P3). Browsers convert images to sRGB for display, so the picker reports the sRGB value you see on screen, which is what you need for CSS.
What is the difference between HEX, RGB and HSL?
They are three notations for the same sRGB color. HEX is a compact hexadecimal form (#1E90FF), RGB lists the red, green and blue channels from 0 to 255, and HSL describes hue, saturation and lightness, which is easier to adjust by hand.
How do I find the hex code of a color in a picture?
Open the picture here and click the color. The hex code appears at the top of the Selected color panel; click it to copy. Set "Copy on click as" to HEX to copy it the moment you click the image.
Does the image color picker work on iPhone and Android?
Yes. Tap the image to pick a color, pinch to zoom and drag to pan. It runs in Safari, Chrome and any other modern mobile browser without an app.
Can I pick several colors from the same image?
Yes. Every color you click is added to Picked colors. Copy them all, open them in the palette generator, or export them as CSS variables, SCSS, Tailwind, JSON or a PNG swatch image.