Image Color Picker

How the picker works

Upload a photo, screenshot or logo and click anywhere on it. The tool reads that exact pixel and shows its colour as HEX (for example #1e88e5) and RGB (rgb(30, 136, 229)). The Copy button puts the HEX code on your clipboard. When the image first loads, the centre pixel is picked so you see a value straight away.

Every colour you click is added to a row of recent swatches (up to eight), so you can sample several spots — a button, a background, a heading — and compare them before choosing. The image is read on a canvas in your browser and is never uploaded.

HEX, RGB and HSL in plain words

All three describe the same colour on screen; they just write it differently.

• HEX — #RRGGBB, three pairs of hexadecimal digits for red, green and blue, from 00 to ff. It's what CSS, Figma, Canva, WordPress themes and most "brand colour" fields expect.
• RGB — the same three channels as decimal numbers from 0 to 255. #1e88e5 and rgb(30, 136, 229) are identical. Useful in code, Office apps and design tools that show sliders.
• HSL — hue (0–360° around the colour wheel), saturation and lightness in percent. The picker doesn't output HSL, but any design tool or CSS converts HEX to it instantly. HSL is handy when you want a lighter or darker version of a colour you picked: keep the hue, change only the lightness.

Picking colours from screenshots

To match a colour from an app, a website or a video frame, take a screenshot (Windows: Win + Shift + S; Mac: Cmd + Shift + 4; phones: power + volume down, or side button + volume up on iPhone) and drop it here.

Some tips for accurate results:

• Click flat areas. Aim for the middle of a button, not its edge — edges are blended (anti-aliased) with the background and give an in-between colour.
• Photos are noisy. Neighbouring pixels in a photograph differ slightly, so sample a few spots and pick the one that looks most representative.
• Screenshots can shift colours. Night mode, Night Shift, HDR or a colour-managed display can tint what gets captured. Turn them off before taking the screenshot if exact brand colours matter.
• Compressed images drift. A JPG that was saved many times may show blotchy colours near edges. Use the original PNG or SVG export of a logo when you have it.
• Transparent areas have no real colour; picking one gives black (#000000). Click the visible part of the logo.

Check contrast before you use the colour

A colour that looks good can still be unreadable as text. Accessibility guidelines (WCAG) ask for a contrast ratio of at least 4.5:1 between normal text and its background, and 3:1 for large text and icons. Light grey on white and mid-blue on dark blue often fail.

After picking your text and background colours, paste both HEX codes into any contrast checker. If the ratio is too low, darken the text or lighten the background — adjusting the lightness in HSL is the quickest way to stay on-brand while fixing it.

Typical uses

• Matching a brand colour from a logo someone sent as a picture.
• Recreating a website's button or background colour in your own design.
• Building a palette from a photo for slides, social posts or a room-painting mood board.
• Choosing a background colour for the Apple touch icon in the favicon generator.

Related tools

• Cut the subject out first, then sample it without the background: Remove Background.
• Isolate a small area to make clicking easier: Crop Image.
• Need the image itself as code for CSS? Image to Base64.