Image Color Picker Online Free
Use this image color picker in the browser. Paste a screenshot or open a photo, then copy HEX, RGB, or HSL. The image is not uploaded, and there is no watermark.
- Image stays in the browser
- HEX, RGB, and HSL
- Palette from the image
How to Use This Image Color Picker
Open an image
JPG, PNG, WebP, AVIF, GIF, or SVG, up to 25MB. Paste with Ctrl or Cmd+V. The file stays in this browser.
Move the sample
The magnifier follows the pointer, a finger, or the arrow keys. Shift moves 10 pixels. Numbers use the original pixels.
Set the sample size
1×1 is selected at the start. 3×3 and 5×5 average the pixels still inside the picture. The edge is cut off, not wrapped.
Copy the color
Copy HEX, RGB, or HSL. The page also shows contrast with white and black, a short history, and a palette as CSS variables or a HEX list.
Read a Color From the File You Opened
An image color picker on this page reads the pixel under your pointer and writes it as HEX, RGB, and HSL. Drop a file, choose one, or paste a screenshot with Ctrl or Cmd+V. JPG, PNG, WebP, AVIF, GIF, and SVG are accepted, each up to 25MB, at most 8,192 px on a side, and at most 24 megapixels. The image is not uploaded. There is no watermark and no credit. A GIF is read from its first frame only.
The sample starts at 1×1, one pixel of the original file. Coordinates stay in those original pixels, so a smaller preview does not change the numbers. A round magnifier shows the area about nine times larger, with a cross on the sample. Click, tap, or press Enter to keep the color. Arrow keys move one pixel, and Shift moves 10. Use a 3×3 or 5×5 average when the neighbors should count.
A round crop of the frame, with no color read, is crop to circle. Two photos in one file, still in the browser, is combine two images. A cutout with a real alpha channel is the PNG maker. To drop the background instead of reading a color, use the background remover.
Why the Same Spot Can Read a Slightly Different Color
A photograph is not a flat patch of one color. Sensor noise changes neighboring pixels, and JPEG compression changes them again. Move the sample by one pixel and the HEX can shift even though the region still looks the same. A 3×3 or 5×5 average mixes those neighbors and is steadier on a photo. A flat logo or a solid swatch should stay on 1×1.
Why the Screen and the File Can Disagree
The color on a monitor is not always the number in the file. The browser applies color management when it decodes the image, and the display has its own gamut. This image color picker does not measure the glass. It reads the sRGB numbers after that decode. It does not report a distance between the screen and the file, and it does not convert a display profile.
Where HEX, RGB, and HSL Each Belong
A hex color from image usually lands in CSS. The six-digit form is what a stylesheet expects. RGB is the same color as three channels from 0 to 255, which is what many design panels show. HSL separates hue, saturation, and lightness, which helps when you want a lighter step of the same hue. Hue is 0–359. Saturation and lightness are 0–100. A gray has hue 0 and saturation 0.
What a Palette Share Actually Counts
The page builds a color palette from image pixels after the long side is reduced to about 100 px. A small image is not enlarged. A share is the portion of that reduced sample, not a count of every original pixel. Pixels with alpha below 16 are left out. Grouping uses median cut with a fixed rule, so the same sample stays the same. Choose 4, 6, 8, or 10 colors. Six is selected at the start. A flat picture returns fewer colors when nothing is left to split. Copy a swatch, CSS variables from --color-1, or a HEX list.
Contrast Tells You White Type or Black Type
Use the contrast lines to decide whether white type or black type is easier to read on the color you picked. The math is the WCAG 2.1 ratio for ordinary text: AA is 4.5 and AAA is 7. The number on screen is rounded to two decimals. Large-text thresholds are not applied, and this is not an audit of a whole layout. The formula is in the W3C note on contrast minimum. Partly transparent pixels still report HEX, RGB, and HSL from the color channels. Contrast ignores alpha.
When You Need a Number From a Picture
A screenshot
Paste a screen capture and read the button, the badge, or the chart color without installing a desktop eyedropper.
A brand color
Sample a logo or a product photo, then check whether white or black type clears the ordinary text contrast bar.
A palette for a layout
Take the six main colors, copy them as CSS variables, and drop the block into a stylesheet.
A noisy photo
Switch to 3×3 or 5×5 so JPEG blocks and sensor noise do not decide the HEX by one pixel.
Before You Copy
Paste the screenshot
Ctrl or Cmd+V reads a capture that is already on the clipboard. You can also drop a file.
Match the sample to the surface
Use 1×1 on a flat swatch. Use 3×3 or 5×5 on a photograph, where JPEG values shift by a pixel.
Read both contrasts
A color can pass with black type and fail with white type. Check both lines.
Treat the share as a sample
The percentage comes from the reduced image. A thin edge can look larger than its share.
Limits
These match the current page. This image color picker never uploads the image. It also does not claim a reading from anywhere except the file you opened.
- An eyedropper online on this page reads only the image you opened. It does not read the browser chrome, another window, or the rest of the screen.
- An animated GIF is read from the first frame. Later frames are not sampled.
- CMYK for print is not converted. The numbers are sRGB values from the browser's decode.
- JPG, PNG, WebP, AVIF, GIF, or SVG only, up to 25MB, at most 8,192 px on a side, and at most 24 megapixels. A larger bitmap is refused. HEIC is not accepted. AVIF needs a browser that can decode it.
- An SVG is drawn at its width and height, or its viewBox, or 512 px when neither is set. If that size would pass the canvas limit, it is scaled down. A bitmap over the limit is refused, not scaled.
- The palette share is an approximation from a sample whose long side is about 100 px. Pixels with alpha below 16 are ignored. The history holds 12 picks in memory only, and nothing is written to localStorage.
- The color on your monitor can differ from the decoded sRGB number because of color management and the display. Contrast labels use 4.5 and 7 for ordinary text. A JPEG is turned upright from its EXIF orientation before you sample it.
A Pixel, an Average, and a Print Number
| 1×1 sample | 3×3 or 5×5 average | Print values | |
|---|---|---|---|
| What you get | One original pixel | The mean of the pixels still inside the file | Not produced here |
| Useful when | The area is flat | The photo is noisy or JPEG-compressed | You need a CMYK plate |
| Where it runs | In this browser. The image is not uploaded | In this browser. The image is not uploaded | This page stays in sRGB |
The magnifier is a view of those same original pixels. It does not change the sample.
Image Color Picker FAQ
Does the image leave my browser?
No. This image color picker reads the pixels in this browser. The image is not uploaded.
How do I pick color from image files I already have?
Drop the file or paste a screenshot. Pick color from image by clicking the point, or focus the picture and press Enter.
How do I get color from image without an account?
Get color from image here with no sign-in, no watermark, and no credit. Copy HEX, RGB, or HSL.
Is a color picker from image the same as a screen eyedropper?
A color picker from image on this page reads the opened file only. The sample can be 1×1, 3×3, or 5×5.
Can I copy a hex color from image into CSS?
Yes. A hex color from image is the six-digit value on the swatch, or the palette as CSS variables such as --color-1: #aabbcc;.
What does the color palette from image percentage mean?
A color palette from image uses a sample reduced to about 100 px on the long side. The percentage is that sample, with nearly clear pixels left out.
Can this eyedropper online read another window?
No. An eyedropper online here stays on this image. GIF files use the first frame, and the values stay in sRGB. CMYK is not calculated.
Pick a Color in This Browser
Open an image color picker here. The image is not uploaded.
More in the toolbox
background remover on the homepage when the subject should be a cutout instead of a color sample.