Color Picker from Image

How a color picker reads an image

Every digital photo is a grid of pixels, and every pixel stores three numbers: how much red, green and blue light it gives off. A color picker simply looks up those numbers for the pixel you click and writes them out in the formats designers use. Nothing is guessed or estimated; the code is the value stored in the file.

That is also why the result depends on what you click. A sky that looks like one even blue is really thousands of slightly different blues, and the edge of a red logo on a white background contains pixels that are a mix of the two. For the cleanest code, pick from the middle of a flat area.

HEX, RGB and HSL, explained

HEX codes look like #2B5CFF. They pack the red, green and blue amounts into six characters and are the standard way to write colors in CSS, design tools and brand guides.

RGB writes the same three amounts as numbers, such as rgb(43, 92, 255). It is easy to read and is used in many apps and code libraries.

HSL describes a color by hue (where it sits on the color wheel), saturation (how strong it is) and lightness. It is the most useful format when you want a family of colors: keep the hue, then raise or lower the lightness for tints and shades.

All three describe exactly the same color, so copy whichever one your tool asks for.

Finding a photo’s main colors

Below the picked color you’ll see the image’s main colors, sorted by how much of the picture each one covers. They are found by grouping similar shades together and then showing the most common real color in each group, so every code in the list is a color that actually appears in your image.

This is a quick way to turn a photo into a palette. A beach photo might give you sand, sea and sky; a product shot might give you the packaging color and the background. Copy the ones you need into your design tool, your website’s stylesheet or a mood board.

When the code doesn’t match what you see

Two things can make a code look “wrong”. The first is your screen: displays differ in brightness and color, so the same code can look warmer on one laptop than on another. The code itself is still right, and it is what other software will use.

The second is the photo. Lighting, shadows and camera processing all change colors, so the white wall in a picture may really be light grey or slightly yellow. If you need the color of the real object, photograph it in daylight, without filters, and pick from a well-lit part.

Editing after you pick

Picking a color doesn’t change your image. If you want to go further, open More tools: you can replace one color with another while keeping the shading, adjust brightness and contrast, turn the photo black and white, or add a border. The color picker keeps working on the edited version, and the download is always full size.

Tips for picking cleaner colors

A few habits make the codes you collect far more useful. Pick from the middle of a flat area rather than near an edge, where two colors blend together. Avoid highlights and deep shadows, because glare washes a color out and darkness hides it. If the object has texture, such as fabric or wood, click a few spots and compare the codes, then choose the one that looks most typical. When you want a whole palette, start from the main colors list and fine-tune with your own clicks.

If you plan to reuse a color often, paste its HEX code into a note or your design tool’s saved styles, so the next project starts from the same value.

Your images stay on your device

The image is opened, read and edited by your own browser. It is never uploaded, there is nothing to delete afterwards, and the colors are read on your own device, so what you pick stays with you.