Skip to content
WGX

Color Picker from Image

Read the colors out of a picture, in hex and RGB.

Choose a picture

JPEG, PNG or WebP. The file is read by your browser and never uploaded.

Sampled colorExample

#0D5744

choose a picture to sample one

Choose a picture to get started.

Find the hex code in any image

Somebody sends a screenshot and asks for "that blue". A logo has to be matched in a document. A photograph has exactly the green a page needs. The usual answer is to open an image editor and hunt for the eyedropper; this page is the eyedropper on its own — click a pixel and the hex code is there to copy. (Spelled colour picker outside the United States — same tool, same codes.)

Hex, RGB and HSL: three ways to write one color code

  • Hex — #3d5a80. Two hexadecimal digits each for red, green and blue. What CSS, design tools and most brand guidelines are written in.
  • RGB — rgb(61, 90, 128). The same three numbers in the ordinary way, which is what word processors and spreadsheets usually ask for.
  • HSL — hsl(214, 35%, 37%). Hue, saturation and lightness. The one to use when you want the same color a little lighter or a little less intense, because you can change one number and leave the others alone.

Why a flat-looking area is not flat

Pick two neighboring pixels from a photographed wall and you will often get two different codes. That is not a fault in the picker: lighting falls unevenly, sensors add noise, and JPEG compression rearranges detail in small blocks, so a surface that looks uniform is made of dozens of near neighbors. Screenshots and exported graphics are usually genuinely flat, and give the same code everywhere.

When a picture is noisy, the palette under it is the more useful answer: each of those six colors is the average of one group of similar pixels from across the whole image, so they describe what it is made of rather than what one pixel happens to be.

Picking without a pointer

The picture is a button. Focus it and the arrow keys move the sampler — a hundredth of the picture per press, or a single pixel with Shift held for the last step. The value is always given as text, never only as a swatch, and the label on the swatch is black or white depending on which can be read against the color.

Nothing is uploaded

Your browser draws the picture onto a canvas and reads the pixel you asked for. Nothing is sent anywhere, and the test suite for this page records the requests the tool makes while a file is open and fails if one of them could carry it. If the file needs to go somewhere afterwards and it is too large, that is the Image Compressor.

Questions

How do I get the hex code of a color in an image?

Choose the picture and click the color you want. The hex code appears straight away, with the RGB and HSL values beside it and a button to copy each one.

Why does the same color give slightly different codes?

Photographs and JPEGs are not made of flat color. Lighting, sensor noise and JPEG compression mean neighboring pixels differ by a few units even where the surface looks uniform. Pick from the flattest part of the area, or take one of the palette entries below the picture, each of which is the average of one group of similar pixels drawn from across the whole picture.

What is the difference between hex, RGB and HSL?

They describe the same color three ways. Hex is what stylesheets and design tools usually want. RGB is the same three numbers written out, and is what most document software asks for. HSL names the hue, how strong it is and how light it is, which makes it the easiest of the three to adjust by hand.

Can I pick a color without a mouse?

Yes. Tab to the picture and use the arrow keys: each press moves the sampler a hundredth of the way across, and holding Shift moves it a single pixel. The palette entries are buttons too.

What are the colors listed under the picture?

The six colors the picture is mostly made of. The picture is shrunk to 160 pixels on its longest side, each pixel is sorted into one of 4,096 groups by how it looks, and the fullest groups are reported as their average — skipping any that is too close to a color already listed, so a photograph of a beach gives you its sand and its sky rather than six shades of one blue. A picture with fewer than six distinct colors shows fewer.

Is my image uploaded?

No. Your browser draws the picture onto a canvas and reads the pixel you asked for. Nothing is sent anywhere, and the test suite for this page fails if any request the tool makes could carry the file.

  • Image Editor

    Crop, resize, turn, fix the light and add text to a picture in one place, with every step undoable — without uploading it.

  • Image Cropper

    Keep the part of the picture you want.

  • Image Converter

    Turn a JPG, PNG, WebP, AVIF or GIF into a JPG, PNG or WebP.