Skip to content
toolwise

Color Picker from Image

Click anywhere on an image to get its HEX and RGB color code.

Your files never leave your device.

When to use it

The image colour picker finds the exact colour code of any point in a picture. Designers use it to match brand colours from a logo, web developers to copy a colour from a screenshot, crafters and decorators to match paint or fabric to a photo, and social media creators to build a palette that fits their photos. It also suggests the main colours in the whole image.

How to pick a colour from an image

  1. Tap Choose image, or drag a JPG, PNG, WebP or HEIC file onto the box.
  2. Tap or click anywhere on the image. Drag to fine-tune while watching the swatch.
  3. Read the Picked color, with its HEX, RGB and HSL codes, and press Copy next to the one you need.
  4. Check Main colors in this image for a ready-made palette; tap one to select it.
  5. Every colour you pick is kept under Picked so far (up to 12) so you can compare them.
  6. Press Choose another image for a different picture.

A worked example

A client sends their logo as a PNG but doesn’t know the brand colours. Open the logo and click the blue part of the symbol: the tool shows #1D4ED8 with its RGB and HSL values. Click the orange accent: #F97316. Both appear under Picked so far. Copy the HEX codes into your design app or CSS, and the new website matches the logo exactly.

Which code to use where

  • HEX: websites, design tools, presentation apps.
  • RGB: code, video and image editors.
  • HSL: CSS when you want lighter or darker versions of the same colour, by changing the last number.

Tips

  • Zoom into your browser to click small details precisely.
  • Use PNG logos or screenshots for exact colours; JPG photos vary slightly from pixel to pixel.
  • Pick from flat, well-lit areas of photos, avoiding highlights and shadows.
  • Check contrast for text with the Color Picker’s contrast checker before using colours together.

Common mistakes

  • Picking from a blurry edge, which gives a blend of two colours.
  • Trusting colours from a heavily edited photo to match a real product.
  • Expecting printed colours to match the screen exactly; print uses a different colour system.

Private by design

Your image is analysed in your browser and never uploaded.

Work with colour codes and contrast in the Color Picker, build backgrounds with the CSS Gradient Generator, or remove the background of a logo with the Background Remover.

Frequently asked questions

Which colour codes do I get?

HEX (like #1D4ED8), RGB (like rgb(29, 78, 216)) and HSL (like hsl(224, 76%, 48%)), each with a Copy button. HEX is the most common for websites and design apps.

Why is the colour I picked slightly different from what I expected?

Photos contain tiny variations, shadows and compression noise, so neighbouring pixels can differ. Drag to fine-tune, and for a typical colour, use the "Main colors in this image" palette instead.

How are the main colours chosen?

The tool samples the whole image and picks up to eight common colours that are clearly different from each other. They're a quick starting point for a matching palette.

Can I pick colours from a screenshot of a website?

Yes. Take a screenshot, open it here and click the colour. Screenshots give exact colours because they aren't compressed like photos.

Is my image uploaded?

No. Colours are read in your browser.

Related tools