How to use the Image Color Picker
Open an image
Upload a photo, screenshot, logo or design.
Pick a colour
Click or tap any point. The magnifier loupe shows the pixels up close so you hit the exact shade.
Copy the code
Copy the HEX, RGB or HSL value with one tap.
Grab the palette
Use the automatic palette of the 6 dominant colours for a ready-made colour scheme.
Find the exact colour in any picture
Matching a brand colour from a logo, picking text that suits a photo, or building a palette for a post — all of these start with knowing the exact colour code. The image color picker gives you HEX, RGB and HSL from any point you tap.
Ways people use it
- Brand matching: pull the exact HEX from a logo screenshot so your designs stay on-brand.
- Social posts: choose text and background colours that come straight from your photo.
- Web design: copy HSL into your CSS and tweak lightness for hover states.
- Home and fashion: grab the shade of a fabric or wall from a photo to compare samples.
Getting accurate picks
Use the magnifier loupe and aim for flat areas without shadows or highlights. On a phone, zoom in on the image first for finer control. Compressed JPGs can have slight colour noise, so a PNG screenshot gives cleaner results for logos and graphics.
Remember that screens differ. A colour picked from a photo is exactly what’s in the file, but it may look slightly different on another phone or in print. For printed work, ask your printer to match the HEX code to a CMYK or Pantone equivalent.
The automatic 6-colour palette is the fastest way to build a colour scheme. Use the darkest colour for text, the lightest for backgrounds and one bright shade for buttons or highlights.
Put the colours to work
Use your picked shade as a border ring in the circle crop tool, or describe it in a prompt in the AI image generator for artwork that matches your brand. Browse all the free photo tools — each one runs privately in your browser, so nothing is uploaded.
Image Color Picker FAQ
What is a HEX code?
A six-character code like #1E90FF that describes a colour. It’s the format used by websites, Canva, Figma and most design apps.
When should I use RGB or HSL?
RGB is common in design and video software. HSL — hue, saturation, lightness — is handy in CSS when you want to make a lighter or darker version of the same colour by changing one number.
Why does the colour change slightly when I click next to it?
Photos are made of many slightly different pixels, especially in shadows and textures. Use the loupe to aim at a clean, flat area, and pick from a few nearby spots if you need an average.
How is the palette chosen?
The tool scans the whole image and groups similar colours together, then shows the six that cover the most area. It’s a quick way to build a scheme that matches a photo.
Is my image uploaded?
No. Everything happens in your browser on your own device, so it’s safe for unreleased designs and client work.
