Colour Picker

About the Colour Picker

This image colour picker lets you drop any image and click on a pixel to read its exact colour in HEX, RGB, and HSL. It is an essential free tool for designers extracting brand colours, developers matching UI colours, and artists pulling palette colours from references — the whole colour extraction job that used to require a desktop graphics editor. To use it, upload or drag an image, then click anywhere on it. The tool reads the exact colour values at that pixel and immediately shows the HEX, RGB, and HSL values you can copy. This is how you match the blue of a logo to your site's accent, pick a skin tone for an illustration, or sample colours from a photograph to build a cohesive palette. No guesswork, no screenshot with the eyedropper in a heavy editor — just drop and click. HEX is the familiar six-digit code (e.g. #FF5733) representing red, green, and blue values as pairs of hexadecimal digits from 00 (no colour) to FF (full colour). RGB specifies the same thing as decimal numbers — for example 255, 87, 51 — and is how CSS and many APIs expect colour. HSL describes colour differently, by hue (the position on the colour wheel from 0-360 degrees), saturation (the intensity), and lightness, which is far more intuitive for humans to reason about and useful when you want to create lighter or darker tints or shades of the same hue. The distinction between RGB and HSL matters in design. If you have a colour and want a lighter version of the same hue, you raise the lightness in HSL instead of doing a painful guesswork adjustment in RGB. Many designers use the HSL values from tools like this to systematically build a scale of tints and shades for a UI palette. The HEX output is what you paste into your CSS or your design tool. Having all three formats in one place makes this the single best colour extraction utility.