Skip to content
MyImageToolbox

Image Color Picker

Client-side

Pick any colour from an image and get its HEX, RGB and HSL codes plus the dominant colour palette.

Runs 100% in your browser · If you allow preferences, this browser saves the number of palette colours — never your images

Drag and drop your image here

or

JPG, PNG, WebP, GIF, BMP, AVIF, HEIC, SVG · up to 50 MB per file

Your images are processed in your browser and are not uploaded. You can also paste an image with Ctrl+V.

What does Image Color Picker do?

Image Color Picker tells you the exact colour of any point in a picture and extracts the palette of its dominant colours. Designers use it to match a brand colour from a logo, developers to copy colours from a screenshot into CSS, and anyone can use it to find the paint shade in a room photo or the colours that make a picture feel the way it does.

Picking colours

Move the pointer over the image and the panel shows the colour under it in HEX (#1E40AF), RGB and HSL, together with the pixel coordinates in the original image. Click to keep a colour: the last twelve picks are listed with a copy button each, so you can collect several colours before pasting them into your design tool or code. On touch screens, tap the image to pick.

The dominant palette

As soon as the image opens, the tool calculates its main colours using the median cut algorithm: it repeatedly splits the image's colours along the channel with the widest range until it has the number of groups you asked for, then averages each group. Each swatch shows its share of the image, ordered from most to least common. Choose between 4 and 12 colours, and copy the palette as ready-made CSS custom properties (--color-1, --color-2…) for your stylesheet. Fully transparent pixels are ignored, so logos on transparent backgrounds give clean results.

Colour formats in brief

  • HEX is the compact form used in CSS, design tools and brand guidelines.
  • RGB lists the red, green and blue values from 0 to 255.
  • HSL describes hue, saturation and lightness, which makes it easy to create lighter or darker variants.

Private by design

The image is read in your browser and never uploaded, so you can safely analyse unreleased designs and client material.

How to pick a colour from an image

  1. Drop an image (photos, screenshots, logos and SVG files all work).
  2. Hover to inspect and click to keep the colours you need.
  3. Copy individual codes or the whole palette as CSS.

Frequently asked questions

Why does a colour differ slightly from the original design?

JPG compression and colour profiles can shift colours by a few units. Use the original PNG or SVG when exact brand colours matter.