dilettanteee
tools/image-toolkit/color-picker

Color Picker

Click anywhere on an image to sample its color.

Image
Click to choose a file, or drag and drop
Output

Add an image, then click anywhere on it to sample a color.

More in this kitAll of Image Toolkit

About Color Picker

The Color Picker lets you click any point on an image to read its exact color. Designers and developers use it to match brand colors from a logo, pull a palette from a photo, or find the precise shade used in a screenshot.

How to use it

  1. Add an image using the file picker or by dragging it in.
  2. Click anywhere on the image to sample the color at that point.
  3. Read the color as a hex code and as an RGB value.
  4. Use Copy hex to copy the code for use in CSS or a design tool.

Good to know

  • Photos contain subtle variations between neighboring pixels, so try a few spots to find the most representative shade.
  • For logos and flat graphics, sample away from edges, where anti-aliasing blends the color with its surroundings.
  • Your image is processed by your browser on your own device. It is never uploaded to a server.

Common questions

What is the difference between hex and RGB?

Both describe the same color. Hex is a compact six-character code like #1A73E8, and RGB lists the red, green and blue values from 0 to 255. CSS accepts either.

Why is the sampled color slightly different from what I expected?

Image compression and color profiles can shift colors slightly. For brand work, confirm against the official brand guidelines where possible.