iTechFever Tools
Menu

Image Colour Picker

Move across an image to read the colour under your pointer, and click to keep one. Copy it as hex, RGB or HSL, whichever your editor wants.

Runs entirely in your browser. Your files are never uploaded.

How to use Image Colour Picker

  1. 1Pick an image, or drag it onto the box above.
  2. 2Move across the image to read a colour.
  3. 3Click to keep a colour. Kept ones show up as swatches you can go back to.
  4. 4Copy the value in whichever notation you need.

Sampled from the real pixels

The preview on screen is scaled to fit the page, but colours get read from the image at its actual size. That distinction matters more than it sounds like it should. A scaled-down preview blends neighbouring pixels together, so sampling it would turn a one-pixel red line into pink and a crisp logo edge into a gradient of in-between values that exist nowhere in the file.

Hex, RGB and HSL

Hex is what CSS and most design tools want. RGB is the same three numbers in decimal, which is what you need when something has to compute with them.

HSL describes a colour as hue, saturation and lightness, and it's far easier to adjust deliberately. Want a lighter version of a brand colour? Raise the L and leave the rest alone. Doing the same in hex means guessing at three numbers at once.

All three describe the same colour, and converting between them loses nothing except the rounding to whole degrees and per cents in HSL.

The contrast reading

Each colour comes with whether black or white text is readable on it, and the ratio. WCAG asks for at least 4.5:1 for body text and 3:1 for large text, so the number tells you straight away whether a colour you pulled out of a photo or a brand asset can be used as a background without causing problems later.

Limits

  • 50 MB per image.
  • Reads a single pixel rather than averaging an area.
  • Only the first frame of an animated GIF can be sampled.
  • Colour profiles aren't applied. Values are as the browser decodes them.

Frequently asked questions

Why is the colour slightly different from Photoshop?
Usually a colour profile. Browsers decode images into sRGB, while an editor may be showing you the image through its embedded profile. For web work the browser's value is the one that matters.
Can I pick a colour from anywhere on my screen?
No, only from an image you open here. A web page can't read pixels outside itself, which is a privacy protection rather than an oversight.
Does it work on a phone?
Yes. Touch and drag to read colours, and lift your finger to keep the one underneath it.