Skip to content
DayUtils

Image Color Picker – Get Colour Codes from Any Picture

Upload a photo, logo or screenshot and click or tap anywhere to get the exact colour as a HEX code, RGB and HSL. The tool also shows the main colours in the whole picture, so you can build a palette for a website, presentation or brand in seconds.

Your files stay on your device

Loading tool…

How to pick a colour from an image

  1. Choose an image — JPG, PNG, WEBP or GIF.
  2. Click or tap the area whose colour you want.
  3. Copy the HEX code, or note the RGB or HSL values.
  4. Look at Main colours for a ready-made palette.

Uses for a colour picker

  • Matching brand colours from a logo when you don’t have the official codes.
  • Designing a website or slide deck around a photo.
  • Choosing paint, fabric or decor colours from a picture — then compare the codes with a paint brand’s colour tools.
  • Creating social media templates that match your photos.
  • Checking colours in a design mock-up or screenshot.

Building a palette

A good palette usually has:

  • One or two main colours — the biggest shares from the picture.
  • A dark neutral for text.
  • A light neutral for backgrounds.
  • An accent for buttons and highlights.

Copy codes from the Main colours list, then use the colour converter to check contrast and readability between them — for example dark text on a light background should have a contrast ratio of at least 4.5 : 1.

Colour formats

FormatExampleWhere it’s used
HEX#1E90FFCSS, Figma, Canva, most design apps
RGBrgb(30, 144, 255)CSS, coding, video apps
HSLhsl(210, 100%, 56%)CSS, building shades and tints

Tips for accurate picks

  • Use the original image, not a compressed copy — compression changes colours slightly.
  • Pick from flat areas of logos and graphics, not edges, where colours blend.
  • Avoid shadows and highlights in photos if you want an object’s true colour.
  • Zoom your browser for small details.

Matching colours on screen and in print

Colours on screen are made of light (RGB), while printers use ink (CMYK), so a HEX code may print slightly differently. If you are matching printed materials, use the colour converter to see a CMYK estimate, and ask your printer for a proof.

How it works

The image is drawn on a canvas in your browser. When you click, the tool reads the exact pixel under your pointer. For the palette, a small copy of the image is analysed: colours are grouped into buckets, averaged and sorted by how much of the picture they cover.

To remove a background before picking, try the background remover. For favicons in your brand colours, use the favicon generator.

Frequently asked questions

How do I find the colour code of something in a picture?

Upload the picture and click or tap the spot. The picked colour appears with its HEX code (such as #1E90FF), RGB and HSL values, ready to copy.

How is the palette chosen?

The image is shrunk and every pixel grouped with similar colours. The most common groups become the palette, skipping colours that are too close to one already chosen. The percentage shows how much of the picture each colour covers.

Why does the colour differ slightly from what I see?

Photos contain noise and shading, so neighbouring pixels can differ. Click a few points to find the shade you want. Screens also display colours differently, especially in night mode or with colour filters.

Can I pick colours from a website?

Take a screenshot, then upload it here. In Chrome and Edge you can also use the developer tools’ built-in eyedropper.

What is the difference between HEX, RGB and HSL?

They’re different ways of writing the same colour. HEX is used in web design and design apps; RGB lists the red, green and blue amounts from 0 to 255; HSL describes hue, saturation and lightness, which is handy for making lighter or darker shades.

Is my image uploaded?

No. The picture is read in your browser only.

Related tools

Last updated: