Image Color Picker: Pick HEX, RGB and HSL From a Photo

Drop in a photo, a logo or a screenshot. Move over it to see a magnified loupe and the colour under the pointer, then click to keep that colour. Copy any picked colour as HEX, RGB or HSL, and see your picks on a small mock website with contrast warnings. Your image is read inside your browser with a canvas. It is never uploaded to We.Inc or anyone else.

How it works

  1. Choose an image, drag it onto the box, or paste one with Ctrl+V (Cmd+V on a Mac). PNG, JPG, WebP and GIF all work.
  2. The image is drawn onto a canvas in your browser. Move the pointer over it to see an 8x magnified loupe and the live HEX value of the pixel in the centre.
  3. Click to add the colour to your picked list. On a touch screen, tap the spot you want.
  4. Copy each picked colour as HEX, RGB or HSL, or remove the ones you do not need.
  5. Choose which picked colours to use for background, text and buttons in the mock website preview. Contrast warnings appear when text would be hard to read.

Worked example: matching a shop sign

Say you run a bakery with a painted sign in a warm terracotta and cream. Photograph the sign in daylight, load the photo and pick from the flat middle of each painted area. You might get #C8643B for the terracotta and #F4EAD5 for the cream.

In the preview, set the cream as the background, a dark brown such as #3B2A20 for text and the terracotta for buttons. White text on #C8643B scores about 3.9:1, which passes for large button labels but not for small text, so the preview warns you and you can darken the button slightly.

Using picked colours on a website

Most small business sites need only three or four colours: a background, a text colour, one brand colour for buttons and links, and maybe a soft accent for cards. More than that usually looks busy.

Keep the picked HEX codes somewhere safe. When you build a site you can paste them into the site brief so the design starts in your colours, then adjust in the editor.

Tips

  • Pick from a flat area, not an edge. Pixels on the border between two colours are a blend of both.
  • Photos contain noise, so neighbouring pixels differ slightly. Pick two or three points of the same area and keep the one that looks right.
  • Take logo colours from the original file (SVG or PNG) rather than a compressed screenshot, which shifts colours a little.
  • Keep your brand colour for buttons and accents and use a very light or very dark colour for body text backgrounds.
  • Aim for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large headings, the WCAG AA levels.

Frequently asked questions

Is my image uploaded anywhere?

No. The image is loaded into a canvas in your own browser and the pixel values are read there. Nothing is sent to We.Inc or any other server.

How do I get the HEX code of a colour in a picture?

Load the picture, move the pointer to the spot you want, check the value in the loupe and click. The colour is added to your list with its HEX, RGB and HSL values and a copy button for each.

Why is the colour slightly different from what I expected?

JPG compression, screenshots and colour profiles all shift pixel values a little. The picker reports exactly what is stored in the pixel. For brand work, pick from the original logo file.

What is the difference between HEX, RGB and HSL?

They describe the same colour in different ways. HEX is the six-character code used in CSS and design tools, RGB lists red, green and blue from 0 to 255, and HSL gives hue, saturation and lightness, which is handy for making lighter or darker versions.

What does the contrast warning mean?

It compares the text colour with the background using the WCAG contrast formula. Below 4.5:1 normal text is hard to read for many people; below 3:1 even large headings are. Change the text colour or pick a darker or lighter background.

Is the website preview a real template?

No. It is a small mock section drawn with your colours so you can judge them together. It is not a We.Inc template and nothing is built until you choose to start a site.

Related: Color Palette From Image, HEX Color Picker, Color Contrast Checker, Service Area Radius Map, Website builder.

Turn this result into your website or see the We.Inc website builder. The free plan gives you up to 3 template sites on a we.inc address, with no AI credits and no custom domain. Paid plans are Starter at $20 a month, Pro at $49 and Max at $99. See pricing.

More in Free Tools

Product

Who It's For

Features

Resources

Company

View Sitemap