Image Colour Picker

Click any pixel of an image to get its hex code, plus a palette.

Picking colours from an image

Drop in an image, hover to preview colours live, click to lock one โ€” hex, RGB and HSL all shown, each a click from the clipboard. Below, the dominant palette: the image's eight main colours extracted automatically, ready for a design's starting point. The image is read locally and never uploaded.

Picking colours that survive reuse

The pixel you click is rarely the colour you remember seeing: photographs are gradients everywhere, a "red" jumper spans dozens of reds, and JPEG compression shifts individual pixels โ€” sample a large flat area, not an edge. The dominant palette averages whole regions, which is usually what a design actually needs, and why brand-from-photo workflows start there.

The three notations are one colour in different clothes: hex for CSS and design tools, rgb() for the channels, hsl() when you want to reason about lightening or shifting โ€” our hex colour guide explains the relationships. Once picked, the colour converter translates further and checks contrast, and two palette colours drop straight into the gradient generator.

Frequently asked questions

How do I find a colour's hex code from a photo?

Drop the photo here and click the pixel โ€” the hex appears with RGB and HSL, each copyable in a click.

Why does the picked colour look different from the image?

A single pixel is one point on a gradient, and JPEG shifts pixels subtly. Sample a flat area, or use the dominant palette, which averages regions.

How is the dominant palette calculated?

The image is downsampled and colours grouped into buckets; the eight most-populated buckets are averaged and shown. It finds the colours that dominate area-wise.

Is my image uploaded?

No โ€” it is read into a canvas in your browser, picked locally and never transmitted.