Pick a colour from an image — exact HEX, RGB and HSL

How to use the Color Picker

1. Choose an image. It opens in the page; nothing is sent anywhere.
2. Click or tap the point whose colour you want. A round magnifier shows the pixels around the pointer.
3. Or type the X and Y position in pixels, or move the crosshair with the arrow keys, and press Pick colour at ….
4. Copy the HEX, RGB or HSL value with its Copy button. An approximate CMYK value is shown underneath.
5. Earlier picks collect under Picked colours (up to 12). Click one to show it again, or Clear the list.

What it does and when to use it

Designers and developers often need the exact colour from a picture: a brand blue from a logo, a wall colour from a room photo, a shade from a screenshot of an app, or a colour to match text to a product photo. This tool gives the precise numbers so you can paste them into CSS, a slide template, or a design app.

Once you have a colour, convert it to other formats with the Color Converter, check text readability on it with the Color Contrast checker, or find the main colours of the whole picture with Dominant Colors.

How it works

Your browser decodes the picture (applying any phone rotation tag) and keeps it in memory in this tab. When you pick, the tool copies the 11 × 11 pixels around that point from the full-resolution image and reads the centre one. HEX and RGB are the stored 0–255 values. HSL is calculated from them, and CMYK uses the simple formula K = 1 − max(R, G, B), which ignores printing inks and paper, so treat it as a rough guide only.

Worked examples

A brand blue. Picking a pixel with red 37, green 99, blue 235 shows:

• HEX #2563eb
• RGB rgb(37, 99, 235)
• HSL hsl(221.2, 83.2%, 53.3%)
• CMYK ≈ 84.3% / 57.9% / 0% / 7.8%

An orange button in a screenshot. A pixel of (249, 115, 22) reads #f97316, with HSL hsl(24.6, 95%, 53.1%).

Finding a point by position. On a 1920 × 1080 screenshot, typing X 1900 and Y 20 checks the top-right corner, useful for reading the colour of a title bar.

Limits and tips

• Pictures with an embedded colour profile are decoded by your browser, so a value can differ slightly from what a desktop editor shows.
• Picking from screenshots gives exact interface colours; photos of screens or printed matter do not, because of lighting.
• The picker shows one pixel, not an average. For a palette, use Dominant Colors or the Image Color Extractor.