Color Picker

How to pick a colour from an image

1. Drop an image into the box above, or click browse. JPG, PNG, WebP, GIF and most formats your browser can open will work.
2. The colour at the centre of the image shows first, as a swatch with its codes.
3. On a computer, move the mouse over the image to see colours change live. Click to pick one. On a phone, tap the spot you want.
4. Click any code (HEX, RGB or HSL) to copy it.
5. Every colour you click is added as a dot in the history row. Click a dot to bring back its codes.
6. In Chrome, Edge or Opera on a computer, a Pick from screen button also appears. It lets you pick a colour from anywhere on your screen, even outside the browser tab.

HEX, RGB and HSL: what the codes mean

All three describe the same colour in different ways. Pick the one your app asks for.

HSL is the easiest to tweak by hand. Keep the hue, raise the lightness, and you get a paler version of the same colour for a background. Lower it for a darker shade for text.

Worked example: one saffron pixel

Arjun clicks the orange border of a Diwali poster and gets rgb(255, 153, 51). Here is how the tool turns that into the other two codes.

1. HEX: 255 is FF in base 16, 153 is 99 and 51 is 33. Put them together: #FF9933.
2. Scale to 0 to 1: red 1.0, green 0.6, blue 0.2.
3. Lightness = (highest + lowest) ÷ 2 = (1.0 + 0.2) ÷ 2 = 0.6, so 60%.
4. Saturation = (highest − lowest) ÷ (1 − |2 × lightness − 1|) = 0.8 ÷ 0.8 = 1, so 100%.
5. Hue: red is highest, so hue = 60 × (green − blue) ÷ (highest − lowest) = 60 × 0.4 ÷ 0.8 = 30°.

Result: hsl(30, 100%, 60%). To get a soft background tint for his invitation, Arjun keeps hue 30 and saturation 100% and raises lightness to 90%.

Getting an accurate colour

• Pick from flat areas. JPG photos have tiny speckles from compression, so two neighbouring pixels can differ by a few points. Click the middle of a solid area, not an edge.
• Click a few spots. On a photo of fabric, skin or a wall, light and shadow change the colour across the surface. Pick three or four points and choose the one that looks right in the swatch.
• Use the original file. A screenshot of a WhatsApp-forwarded image has been compressed twice. For a brand colour, use the logo file the company provides.
• Large images are scaled for picking. Images bigger than 2000 px on the long side are shown at 2000 px while you pick. That doesn’t matter for normal areas, but a hairline only 1 px wide may read as a blend with its background.

What people use it for

• Matching brand colours: pull the exact HEX from a logo to use in a Canva poster, a PowerPoint deck or a WordPress theme.
• Web and app design: copy RGB or HSL straight into CSS.
• School and college projects: keep charts, slides and posters in the same colours.
• Shopping and decor ideas: get the shade of a kurta, a sofa or a wall from a photo to compare with other products. Treat it as a starting point, since screens, lighting and cameras all shift colour, and paint or fabric will never match a screen exactly.

To get a logo from a JPG into a sharp, scalable file with those colours, try PNG to SVG. If your image is a PDF, turn the page into an image first with PDF to PNG.

Limitations

• Single pixel only: there is no averaging over an area and no zoom loupe. Pick from flat areas for steady results.
• HEX, RGB and HSL only: no CMYK for print or Pantone matching. Ask your printer to convert the HEX code.
• No palette extraction: the tool does not suggest the main colours of an image on its own. You build the palette by clicking.
• Transparent areas: fully transparent pixels in a PNG read as black, rgb(0, 0, 0).
• Pick from screen: only in Chrome, Edge and Opera on a computer. Firefox, Safari and phone browsers don’t support it as of October 2026.
• History resets when you load a new image or refresh the page. Copy the codes you need first.
• iPhone HEIC photos open only in Safari. Convert them with HEIC to JPG for other browsers.

Key facts

• The screen colour picker uses the browser’s EyeDropper feature, which Chrome and Edge support from version 95 and Opera from version 81. Firefox, Safari and Chrome for Android don’t support it. (Can I use (opens in new tab))
• A HEX colour code is the same red, green and blue values as RGB, written as three two-digit base-16 numbers, so #FF9933 and rgb(255, 153, 51) are the same colour. (MDN (opens in new tab))