ImageColorPick
Menu

Image Color Picker

To get a color from an image, upload or paste it, zoom in with the loupe and click the pixel. You get the HEX, RGB, HSL and CMYK codes instantly, plus the closest color name and an automatic palette. Nothing is uploaded; the image stays in your browser.

Color picker from image

The color picker needs JavaScript. Below is the sample image; the text on this page explains every format and formula.

Sample photo: a sunset over the sea with green hills and a red boat

How to use it

  1. Choose an image, drag it onto the box, paste it with Ctrl+V, or take a photo on your phone.
  2. Move over the image. The round loupe shows the pixels under the pointer, enlarged, with the current HEX code.
  3. Click or tap the pixel you want. Use the arrow keys for one-pixel steps and Enter to pick.
  4. Copy the HEX, RGB, HSL or CMYK code with its Copy button.

Four codes for one color

  • HEX (#1E90FF) is the code used in HTML, CSS and most design apps. Three pairs of hexadecimal digits for red, green and blue.
  • RGB (30, 144, 255) is the same color as three numbers from 0 to 255. Office programs, game engines and many APIs want this form.
  • HSL (210°, 100%, 56%) describes hue, saturation and lightness. It is handy when you want a lighter or darker version of the same color.
  • CMYK (88%, 44%, 0%, 0%) is an estimate of the cyan, magenta, yellow and black ink. Treat it as a starting point, because real print values depend on the paper and printer profile.
Example colors in every format
ColorHEXRGBHSLCMYK (approx.)
Red#FF0000255, 0, 00°, 100%, 50%0, 100, 100, 0
Lime green#00FF000, 255, 0120°, 100%, 50%100, 0, 100, 0
Blue#0000FF0, 0, 255240°, 100%, 50%100, 100, 0, 0
White#FFFFFF255, 255, 2550°, 0%, 100%0, 0, 0, 0
Black#0000000, 0, 00°, 0%, 0%0, 0, 0, 100
Mid gray#808080128, 128, 1280°, 0%, 50%0, 0, 0, 50
Dodger blue#1E90FF30, 144, 255210°, 100%, 56%88, 44, 0, 0
Tomato#FF6347255, 99, 719°, 100%, 64%0, 61, 72, 0
Gold#FFD700255, 215, 051°, 100%, 50%0, 16, 100, 0
Rebecca purple#663399102, 51, 153270°, 50%, 40%33, 67, 0, 40
Teal#0080800, 128, 128180°, 100%, 25%100, 0, 0, 50
Saddle brown#8B4513139, 69, 1925°, 76%, 31%0, 50, 86, 45

HSL rounded to whole numbers. CMYK from the simple formula below, without a color profile.

Your image stays on your device

Your image is opened by your own browser and drawn on a canvas element on this page. The color values are read from that canvas with JavaScript on your device. There is no upload button that sends the file anywhere, and the site’s security policy blocks scripts from sending data to other servers. You can even disconnect from the internet after the page has loaded and the picker keeps working.

Why a picked color can look slightly off

  • Compression: JPEG photos store color in small blocks, so neighboring pixels in a "flat" area can differ by a few values. Use the 3×3 or 5×5 sample size for an average.
  • Edges: the pixels where two colors meet are a blend of both. Zoom in and pick from the middle of an area.
  • Color profiles: browsers convert images to the standard sRGB space before the page can read them. A photo saved in a wider space, such as Display P3 from a recent phone, can give slightly different numbers here than in a photo editor that works in that space.
  • Light and camera: a photo records the light that hit the object, not the object’s "true" color. Shade, warm bulbs and the camera’s white balance all shift it.

Ways to use it

  • A website or app: pick a color from a photo or mockup and paste the HEX code into your CSS. Build a whole scheme on the palette page.
  • A brand: get the exact colors from a logo file with the logo color finder.
  • A slide or document: copy the RGB numbers into the custom color box of PowerPoint, Word or Google Slides.
  • Something on your screen: take a screenshot and paste it, or use Pick from screen.
  • Paint for a wall: get a starting code, then read what a photo can and cannot tell you.

After you have a palette, check how it looks to color-blind people on our sister site.

Frequently asked questions

How do I find the hex code of a color in a picture?

Open the picture in the color picker above, zoom in with the loupe and click the color. The hex code appears at the top of the result, with a Copy button. For photos, choose a 3×3 or 5×5 sample to average out noise.

Is my image uploaded to a server?

No. The browser reads the file on your device and draws it on a canvas on this page. The colors are calculated there with JavaScript. No image data is sent to us or to anyone else, and nothing is stored except the color codes you pick.

Which image types can I use?

JPG, PNG, WebP, GIF (the first frame) and SVG work in all modern browsers. HEIC photos from iPhones open in Safari; most other browsers cannot read HEIC, so convert to JPG first. Very large images are read at up to 4096 pixels on the longest side.

How do I pick a color on a phone?

Tap Take a photo or Choose image. Then put your finger on the image and drag: the loupe appears above your finger so you can see the pixels. Lift your finger to pick that color. Pinch with two fingers to zoom.

What is the difference between 1×1, 3×3 and 5×5?

1×1 gives the exact value of one pixel. 3×3 and 5×5 average the 9 or 25 pixels around the point. Averaging helps with photos, where JPEG compression and sensor noise make neighboring pixels slightly different.

Why does the color name not match exactly?

The name is the closest of the standard CSS color names, measured in a color space that follows human vision. Most picked colors fall between named colors, so the tool shows the nearest one with its own hex code for comparison.

Can I use the picker offline?

Yes, once the page has loaded. All the work happens in your browser, so you can open and pick from images without an internet connection until you reload the page.

Last updated: October 15, 2026

More color tools