Tooltrusty

Image Colour Picker

Click any pixel for its exact colour code, or pull a whole palette out of the image at once.

Drop an image here or click to choose a file — JPG, PNG, WebP or GIF

Runs in your browser. Everything you type or load here is processed locally by JavaScript on this page. Nothing is uploaded to Tooltrusty or to any third party.

What the image Colour Picker does

This is an eyedropper that works on a file rather than on your screen. Load an image, click a pixel, and the tool reads that pixel's exact red, green and blue values out of the canvas and presents them as a HEX code, an RGB triplet and an HSL triplet.

Three formats are given because they are useful in different situations. HEX is the compact form you paste into a design tool or a stylesheet. RGB is the same information in decimal, which is what you need when a value has to be calculated or passed to code. HSL describes the colour as hue, saturation and lightness, which is far easier to reason about when you want a variation — to make a colour lighter you change one number, rather than guessing at three.

The relative luminance figure underneath is the value the WCAG contrast formula is built on. It tells you, roughly, whether text over this colour should be dark or light. It is not a full contrast check — that needs both colours — but it is a fast sanity test when you are picking a background from a photograph.

The palette below the image is extracted automatically. Every fourth pixel is read, quantised into coarse colour buckets, and the eight most populated buckets are averaged and shown in order of how much of the image they cover. That gives you the colours a viewer actually perceives as dominant, rather than a handful of arbitrary samples — which is exactly what you want when building a palette around a photograph.

How to use it

  1. Drop in an image. Large images are scaled down for display, but colour values are read from the rendered pixels accurately.
  2. Click or tap anywhere on the image to sample that pixel.
  3. Copy the value in whichever format you need — HEX for CSS, RGB for code, HSL for building variations.
  4. Or click one of the dominant-colour swatches to load it into the readout.

A worked example

Building a landing page around a product photograph. You load the photo and click the deepest part of the product's shadow, which gives:

HEX  #1e2732
RGB  rgb(30, 39, 50)
HSL  hsl(212, 25%, 16%)
Luminance 0.021 (use light text)

The HSL form is what makes the next step easy. To build a matching but lighter surface colour, you keep the hue and saturation and raise only the lightness: hsl(212, 25%, 24%). To get an accent that sits opposite it on the colour wheel, you add 180 to the hue: hsl(32, 25%, 16%). Doing either of those from the HEX value would mean guessing.

Frequently asked questions

Can it pick colours from anywhere on my screen?

No — a web page cannot read pixels outside itself, for obvious security reasons. This tool works on an image file you load. Some browsers offer a native EyeDropper API for screen picking; a screenshot loaded here achieves the same result.

Why does the same colour look different in another app?

Colour profiles. An image tagged with a wide-gamut profile such as Display P3 is converted when it is drawn to a canvas, so the numeric values can differ slightly from what a colour-managed design application reports. For web work the canvas values are the right ones, because that is what browsers will render.

How is the dominant palette calculated?

Every fourth pixel is sampled and grouped into coarse colour buckets; the eight largest groups are averaged and sorted by how much of the image they cover. Fully transparent pixels are ignored. It approximates what the eye reads as the image's main colours.

Is my image uploaded to read its pixels?

No. The image is drawn into a canvas element in your browser and pixel data is read from there with getImageData. Nothing is transmitted.