Pick Colors from Image

How to pick a colour from an image — 3 steps

1. 1

   Open your image

   Drop in a screenshot, photograph, logo, or design mockup. It is read directly in the browser, so nothing is uploaded.

2. 2

   Click the colour you want

   Click anywhere on the image to read the exact pixel value at that point. Zoom in first when you are sampling something small, like a single line of a logo.

3. 3

   Copy the value you need

   Take the HEX, RGB, or HSL form depending on where it is going — a stylesheet, a design tool, or a colour picker in another application.

HEX, RGB, and HSL describe the same colour differently

All three notations point at the same pixel; they differ in what they make easy to reason about. HEX — the familiar #2F6DF6 — is a compact way of writing three numbers and is what most stylesheets and design tools expect. RGB writes those same three numbers plainly as amounts of red, green, and blue, which matters when you need an alpha channel for transparency, since rgba() accepts one and a plain HEX does not.

HSL is the one worth learning, because it maps to how people actually think about colour. It describes a colour as hue (which colour it is, as a position on the colour wheel), saturation (how vivid), and lightness (how close to white or black). That separation is what makes it useful: to create a hover state you lower the lightness and change nothing else, and to build a palette that hangs together you keep saturation and lightness fixed while rotating the hue.

This is why sampling a colour and then adjusting it is easier in HSL than in HEX. Darkening #2F6DF6 by hand means guessing at three hexadecimal pairs at once and usually shifting the hue by accident; darkening the same colour in HSL means changing one number and leaving the character of the colour intact.

Sampling accurately, and checking the result is usable

A pixel from a photograph is rarely the colour you think you are picking. Lossy compression shifts individual pixel values slightly, so two neighbouring pixels in what looks like flat colour can differ measurably — and JPG artefacts around edges are worse still. Lighting compounds it: a red jumper photographed near a window carries the colour of that light. When you need a colour that represents an area rather than a point, sample several spots across it and take the value that keeps recurring, rather than trusting one click.

Screenshots and exported design files are far more reliable sources than photographs, because their colours are stored as authored rather than captured. If you are trying to recover a brand colour, a screenshot of the logo on a white background will give you a truer reading than any photograph of a printed sign or a product.

Before you commit a sampled colour to an interface, check it against what it has to sit on. Text needs a contrast ratio of at least 4.5:1 against its background to meet the standard accessibility threshold for normal body text, and 3:1 for large headings. Colours lifted from photographs frequently fail that test — mid-tones sampled from an image look attractive in isolation and become unreadable as text. Adjusting lightness in HSL until the contrast passes is usually a small change, and keeps the hue you chose the colour for.

Related tools