PlainToolkit
English

Color Picker

Pick colours from a photo · HEX RGB

Pick a colour from a photo

Drop a file hereTap to choose a fileDrop it hereOne photo, up to 30 MB. Photos are never uploaded.1 photo · 30 MB

Choose a colour

Result

HEX
RGB
HSL
HSV
XYZ

Photos and colour values are processed only in your browser and are not sent to or stored on a server.

How to use

Choose a colour directly or pick a single pixel out of a photo and read its value. HEX, RGB, HSL, HSV and XYZ are shown together, ready to paste into CSS or a design tool. Images are handled in your browser and never uploaded.

When to use it

  • Finding the HEX value used in a logo or product shot.
  • Lifting a background colour straight out of a screenshot.
  • Checking one colour in every notation before using it.

How to use it

  1. To choose directly, use the colour field or type a HEX value.
  2. To sample from an image, load a photo under pick from a photo (up to 30MB).
  3. Click the photo to pick a colour; after zooming you can drag it around.
  4. Arrow keys move the pick one pixel at a time (ten with Shift) for precision.
  5. Copy the HEX, RGB, HSL, HSV or XYZ value you need.

Good to know

  • The pixel coordinates (x, y) are shown too, which makes it easy to return to the same spot.
  • In a JPG, compression means neighbouring pixels differ slightly. Sample a few points rather than trusting one.
  • Screen colour varies between monitors and devices, and print colour (CMYK) is outside what this tool does.
  • XYZ describes colour in terms of human vision and is used for precise colour work; HEX or RGB is enough day to day.
  • The image and the values stay in your browser and are stored nowhere.

Frequently asked questions

Can I pick a colour from anywhere on my screen?

Only from an image you load here — a web page cannot see the screen outside the browser. Take a screenshot first and load that.

The same colour gives slightly different values.

JPG compression blends neighbouring pixels, so a flat-looking area varies pixel by pixel. Sample several points and take the most common value, or use a PNG original if you have one.

How does zooming work?

After zooming you can drag the photo, and once you have clicked it the arrow keys move the pick one pixel at a time, or ten with Shift — handy for small icons and type.

What is the difference between HSL and HSV?

Both split a colour into hue, saturation and brightness, but measure brightness differently: in HSL the pure colour sits at 50%, in HSV at 100%. CSS uses HSL; painting tools tend to use HSV.