Color Picker from Image

Click anywhere on an image to read the exact HEX, RGB and HSL color at that point.

Why use this tool?

Find the exact color at any point of an image as HEX, RGB and HSL - for matching brand colors or designing with colors from a photo.

How to use it

  1. Upload an image.
  2. Click the spot whose color you want.
  3. Copy the HEX, RGB or HSL value.

Reading a color from an image

Click any point of your image and the tool reads the exact color of that pixel, shown in three formats. HEX is the six-digit code used in web design and most design tools (#1E90FF). RGB gives the red, green and blue amounts from 0 to 255 (rgb(30, 144, 255)). HSL describes the same color as hue (0-360°), saturation and lightness, which is easier to adjust by hand.

Uses include matching a brand color from a logo, building a palette from a photo, or finding the exact color of a button in a screenshot so you can reproduce it.

Why the color you pick may vary

Photos rarely have one uniform color. Lighting, shadows and camera noise mean neighbouring pixels differ slightly, so clicking two spots on the "same" red wall can give different values. Pick from the area that best represents the color you want, away from highlights and shadows.

JPG compression also shifts colors a little, especially near edges and in small details. For brand colors, sample from the highest-quality source you have, ideally a PNG or SVG logo, or a screenshot rather than a photo of a screen.

Using the values

In CSS, any of the three formats works: color: #1E90FF, color: rgb(30 144 255) or color: hsl(210 100% 56%). HSL is handy for creating lighter or darker variants: keep the hue and saturation and change only the lightness.

Screens and printers show color differently. A HEX value is exact for screens, but for print you'll want the brand's official CMYK or Pantone values, which can't be read reliably from an image.

Frequently asked questions

Is the image uploaded?

No. The image is drawn in your browser and the pixel is read there.

Why does the same area give slightly different codes?

Real photos contain noise, shading and compression artifacts, so neighbouring pixels differ. Sample a few points and choose the most representative one.

What's the difference between HEX and RGB?

Nothing in the color itself: HEX writes the same red, green and blue values in base 16. #FF0000 and rgb(255, 0, 0) are both pure red.