Pick Colours From Any Image and Build a Palette That Works

What the Color Picker does

Upload an image and click anywhere on it. The tool shows the colour at that point as HEX, RGB and HSL, with copy buttons for each. It can also extract a dominant palette from the image automatically, which is handy when you want the main tones of a photo at a glance.

The image is read in your browser and is not uploaded to a server.

This is useful for designers, bloggers and anyone matching a brand. Instead of squinting at a screen and approximating, you get a number you can paste straight into your CSS, slide deck or design file.

Picking a colour step by step

The process takes under a minute.

1. Open the Color Picker and add your image.
2. Click the exact spot whose colour you want.
3. Read the HEX, RGB and HSL values shown.
4. Click the copy button for the format you need.
5. Paste the value into your design tool or stylesheet.

HEX, RGB and HSL explained

HEX is a six-character code such as #1A73E8, common in web design. RGB gives the red, green and blue amounts from 0 to 255. HSL describes a colour by hue, saturation and lightness, which is the friendliest format for adjusting a shade.

All three describe the same colour. Use HEX for quick pasting into CSS, and HSL when you want a lighter or darker version by changing only the lightness value.

Lightness is the easiest value to adjust. Raising it gives a tint for backgrounds, and lowering it gives a shade for hover states or borders, all while keeping the same hue so the family of colours stays consistent.

Building a palette from a photo

Use the automatic palette to see the dominant colours, then choose a small set: one main colour, one or two supporting colours and a neutral. A brand palette with five or six colours is usually plenty. Photos often contain subtle variations, so click a few nearby spots and choose the one that feels most representative rather than a single noisy pixel.

Check that your neutrals match too. A warm cream background looks odd next to a cold grey text colour, so pick the neutral from the same image so the whole palette feels related.

Checking contrast and accessibility

A beautiful colour is useless if text on it is hard to read. Light grey text on white and yellow text on white are common failures. Aim for strong difference in lightness between text and background, and test your pair with a contrast checker before publishing.

Do not rely on colour alone to convey meaning. Add labels or icons so that people with colour blindness can still follow your design.

Test your final choices on a phone in daylight as well as on a desktop. Screens differ in brightness and tint, and a colour that looks fine indoors can wash out outside.

Common mistakes

Be aware of what can mislead you.

• Picking from a compressed or heavily edited image where colours have shifted.
• Choosing a single pixel in a shadow or highlight.
• Assuming screens show colours identically.
• Using too many accent colours in one design.

Scenario: matching a logo to a website

A small business owner has only a JPG of her logo. She uploads it, clicks the main blue and copies the HEX value. She uses the same value for buttons and headings, so the website matches her printed material without asking a designer for the original files.

Because both the logo and the website now share a single value, any future designer can pick it up easily. She also saves the palette in a note so the same colours are used for social posts.

Frequently asked questions