Pick a Color From an Image: Exact HEX and RGB Values

Eyedropper vs extracted palette: which one you need

GrabCast's Color Palette and Picker does both jobs on the same image, in your browser, without uploading it.

• Pixel picker (eyedropper): reports the exact HEX and RGB of the single pixel under the pointer. Use it for a logo, a UI element or a specific paint or fabric shade.
• Extracted palette: groups similar pixels and averages each group into 4 to 10 swatches. Good for the overall mood of a photo, wrong for an exact spec, because an average can be a color that appears nowhere in the image.

If a palette swatch looks close but not right, switch to the picker and sample the object itself.

Why JPG compression and soft edges shift the color you pick

Three things make one pixel differ from its neighbors, even on a flat logo.

• JPG compression stores color at lower detail than brightness, often sharing color across small blocks of pixels, and adds faint ripples near edges. A red logo on white can read #E0204A in the middle and #E86A80 near the border.
• Antialiasing blends the edges of text and shapes with the background so they look smooth. Edge pixels are a mix, never the true color.
• Resizing averages pixels. The picker reads from a display copy of up to 1,200 pixels on the long side, so on big photos thin details blend with their surroundings.
• Lighting gives a painted wall in a photo dozens of real colors.

Pick a color from an image accurately: where to sample

A few habits get you the value that matches what people see.

• Sample from the middle of the largest flat area, several pixels away from any edge or text.
• Hover across the area and watch the HEX value. When it stays the same over a patch, you have found the true color; if it jumps around, it is noise or compression.
• For small details, crop the image tightly first with a crop tool so the area fills the preview, and keep the cropped image under 1,200 pixels so each pixel is read as is.
• Use the original file, such as a logo's PNG export, not a screenshot of a screenshot.
• Transparent areas have no color and read as #000000; sample only the visible parts of a PNG.

The picker has no magnifier, which is why cropping is the practical way to zoom in.

Copy the code and convert it to other formats

Hovering updates the swatch live; clicking the image locks the color and copies its HEX code. On a phone, tap the spot and use Copy HEX. The RGB value is shown underneath as rgb(r, g, b) for you to select and copy.

• Values are sRGB, the standard for web and most apps, and match what your browser displays.
• For HSL, which is handy for making lighter or darker variants, paste the HEX into the Color Converter.
• For print, treat a screen HEX as a starting point and ask for a proof; screens and ink differ.
• Check contrast before using a picked color for text, especially light colors on white.

Using the picked color in design and code

Once you have the HEX code, paste it into your stylesheet, design tool or brand document. Keep a note of where the color came from, and check that text using it has enough contrast against its background, since a color that looks good in a logo may not work for small copy.

• Save HEX, RGB and a name for each color in a shared palette.
• Check contrast of text and background against accessibility guidelines.
• Use the same value everywhere to avoid slightly different shades.

To convert between formats, converting HEX to RGB and HSL explains the math, and converting RGB to HEX covers the reverse. For a whole image, extracting a color palette from an image finds the dominant colors automatically.

Common mistakes when sampling colors

Avoid picking from photographs of printed items, because lighting changes the result. Do not sample near edges, gradients or shadows, and remember that a screenshot may be color-managed differently from the original file. When accuracy matters, ask for the brand guidelines from the owner of the logo.

Using the picked shade in design and code

Once you have the HEX code, paste it into your stylesheet, design tool or brand document. Keep a note of where the value came from, and check that text using it has enough contrast against its background, since a hue that looks good in a logo may not work for small copy.

• Save HEX, RGB and a name for each shade in a shared palette.
• Check contrast of text and background against accessibility guidelines.
• Use the same value everywhere to avoid slightly different tones.

To convert between formats, converting HEX to RGB and HSL explains the math, and converting RGB to HEX covers the reverse. For a whole picture, extracting a palette finds the dominant tones automatically.

Common mistakes when sampling

Avoid sampling a photograph of a printed item, because lighting changes the result. Do not sample near edges, gradients or shadows, and remember that a screenshot may be managed differently by your display than the original file. When accuracy matters, ask for the brand guidelines of the logo's owner.

Step-by-step

Common mistakes to avoid

Pro tips

Frequently asked questions