Image Color Picker & Color Extractor

Picking a colour reads the value of a single pixel and reports it in the notations different tools expect. HEX for CSS and design software, RGB for code, HSL when you want to build a family of related shades by adjusting one component at a time.

HSL deserves more use than it gets. Because it separates hue from saturation and lightness, producing a lighter version of a brand colour is a matter of changing one number, whereas doing the same in HEX means guessing at three. For generating hover states, disabled variants and tints from a single base colour, it is much the easier model.

One practical caution: photographs contain noise, so what looks like a flat area is not. Sampling two neighbouring pixels in the same patch of sky will give you two slightly different values, neither of them wrong.

A dominant-colour analysis looks at the whole image rather than one pixel, groups similar colours together and reports the ones covering the most area. That gives you the palette a viewer actually perceives, which is not always what you would have picked by eye — a colour can feel prominent while occupying very little of the frame.

Photographs make good palette sources because the light in a scene has already harmonised them. Colours lit by the same sun, or the same lamp, share an undertone, and that shared cast is what makes a palette feel coherent rather than assembled.

The usual approach is to take the dominant colour as a base, a light neutral from the image for backgrounds, and one saturated colour for accents. Three or four is plenty; a palette of eight tends to lose its identity.

This is the mistake worth avoiding. A palette lifted from a photograph is selected for how the colours sit together, and that says nothing about whether text in one of them is legible on another.

Mid-tone colours are the particular trap: they look sophisticated and frequently fail contrast requirements in both directions, being neither light enough to carry dark text nor dark enough to carry light text. WCAG asks for 4.5:1 for normal text and 3:1 for large text, and a good-looking mid-grey-blue on a good-looking mid-tan can land near 2:1.

The workable pattern is to use the sampled palette for accents, borders, illustrations and backgrounds, and to keep text in tones you have explicitly checked. Harmony and contrast are separate problems and need to be solved separately.

Matching a design to a photograph is the most frequent one — a site whose accent colour is drawn from its hero image feels considered in a way that an arbitrary blue does not. Building a brand palette from a mood board works the same way.

Beyond that: recovering a colour from a logo when nobody can find the brand guidelines, matching a chart's series colours to a product photo, sampling a competitor's palette from a screenshot, and picking colours out of a painting or textile that already work together.

Everything is sampled from a canvas inside your browser, so the image is never uploaded — which matters when the source is unreleased design work or a client's material.