HEX · RGB · HSL · Palette from any image
Image Color Picker
A pixel in your image.
A colour you can use.
Add a photo, logo or screenshot, tap or click any spot and copy its HEX, RGB or HSL code. Let the tool find the image's main colours, build a palette and copy it as a HEX list or CSS variables. Your image stays in this browser.
Add an image or screenshot
Drop, paste (Ctrl+V) or choose one image.
JPG · PNG · WebP · AVIF · BMP · GIF · SVG · HEIC · 10 MB
No image yet. You can still load a saved palette.
Add an image to begin, or load a saved palette.
Mouse: move over the image, click to keep a colour. Touch: tap a spot, then Pin colour. Keyboard: select the image, use the arrow keys (Shift moves 10 px) and press Enter to keep a colour.
Find main colours adds the six most common, clearly different colours of the image to your palette.
Exact pixel (X and Y)
Counting starts at 0 in the top-left corner. Reading shows the colour without adding it to the palette.
Which code to copy
Same colour. Seven ways to write it.
Every row shows the same pixel. Copy the one your app or website asks for.
| Format | Looks like | Use it in |
|---|---|---|
| HEX | #245A4E | Canva, Figma, PowerPoint, website CSS and most colour boxes. |
| HEX + alpha | #E7C38480 | CSS and design apps when the pixel is partly see-through; the last two digits are the opacity. |
| RGB / RGBA | rgb(36, 90, 78) | Photoshop, GIMP, Excel cell colours, Android and CSS. RGBA adds opacity from 0 to 1. |
| HSL | hsl(167, 43%, 25%) | CSS when you want lighter or darker shades: change only the last number. |
| HSV | 167°, 60%, 35% | Colour wheels in Procreate, Photoshop's picker and many drawing apps. |
| CMYK estimate | 60%, 0%, 13%, 65% | A first number to discuss with a printer. Ask for their profile before printing. |
Three deliberate steps
From an image to a usable colour.
Choose the reference
Add one image, or paste a screenshot. The tool reads the full-size picture even though the preview is smaller.
Find the pixel
Watch the magnifier, tap a spot or type X and Y. The arrow keys move one real pixel at a time.
Keep the useful values
Copy the code you need, pin colours to the palette and save it as JSON before you leave.
A worked example
Solid or see-through. The codes change.
Two pixels as the tool reports them: one solid, one half transparent. These values were produced by the tool's own conversion.
| Pixel | HEX + alpha | RGBA | HSL |
|---|---|---|---|
| Solid green (alpha 255) | #245A4EFF | rgba(36, 90, 78, 1) | hsl(167, 43%, 25%) |
| Half-clear gold (alpha 128) | #E7C38480 | rgba(231, 195, 132, 0.502) | hsl(38, 67%, 71%) |
The gold pixel's plain HEX, #E7C384, would paint it fully solid. Copy HEX + alpha or RGBA to keep it see-through, for example at the soft edge of a logo.
How a colour is read
The full-size image. Not the preview.
The preview on screen is scaled down, but every value comes from the image at its real size.
What happens when you tap
Use the reference carefully
A pixel tells you where to start.
| Use | How | What to check |
|---|---|---|
| Matching a saree, kurti or dupatta colour for an online shop listing | Tap the fabric in a daylight photo · Pin two or three nearby spots | Folds and shadows change the shade; describe the colour from the middle value, and say screens can vary. |
| Brand colours from a logo for Canva or a WhatsApp Business post | Find main colours · Copy HEX list | Use the original logo file, not a blurred screenshot, and confirm with the brand guide if there is one. |
| A website accent taken from a design screenshot | Paste the screenshot · Copy CSS variables | Screenshots of compressed images contain nearby shades; check a flat area, not an edge. |
| A soft logo edge or shadow | Read RGBA or HEX + alpha | Plain HEX drops the transparency that blends the edge into its background. |
| Paint or print reference | Note HEX and the CMYK estimate | Paint and print never match a screen exactly; ask the shop for their closest shade card or proof. |
When a value looks unexpected
Check the pixel, then its context.
A tap picks a nearby pixel
On a phone, one fingertip covers many pixels of a large image.
- Check the magnifier first.
- Use the arrow keys to nudge.
- Or type X and Y exactly.
A transparent area reads black
A fully clear pixel has no visible colour at all.
- Look at the alpha line.
- Alpha 0 means nothing to copy.
- Pick a solid spot instead.
The palette did not load
Only JSON files saved by this tool, up to 100 colours, are accepted.
- Use Save JSON to create one.
- Keep the file under 64 KB.
- A failed load keeps your palette.
The image is rejected
It is too large, or this browser cannot open its format.
- Stay under 10 MB and 20 MP.
- Shrink it with the Image Resizer.
- Or convert it to PNG or JPG.
Image color picker questions
Know what you are copying
How do I get the HEX code of a colour in an image?
Add the image, then click the spot with a mouse, or tap it on a phone. The HEX code appears under the image with a Copy button, and the full list of codes is in the colour panel. A click also adds the colour to your palette; on touch, press Pin colour.
Can I pick a colour from a screenshot?
Yes. Take the screenshot, click on this page and press Ctrl+V (Cmd+V on a Mac) to paste it straight in. In Chrome and Edge, Pick from screen also lets you take a colour from anything visible on your screen.
How do I find the main colours of a logo or photo?
Add the image and press Find main colours. The tool groups similar shades and adds the six most common colours that differ clearly from each other to your palette, most common first. Transparent areas are ignored.
How do I copy my palette into Canva, Figma or CSS?
Copy HEX list gives one code per line, ready to paste into Canva, Figma or a document. Copy CSS variables gives a :root block with --color-1, --color-2 and so on. Save JSON keeps the palette to load here again later.
What do alpha and HEX + alpha mean?
Alpha is opacity from 0 (fully clear) to 255 (solid). HEX + alpha adds two more digits for it, and RGBA writes it from 0 to 1. Plain HEX and RGB leave it out, so a half-clear pixel copied as HEX becomes solid.
Is the CMYK value right for printing?
It is a simple estimate worked out from RGB, without a printer profile, paper type or ink limits. Use it as a starting point and ask your printer for their colour process and a proof before printing in bulk.
Will the colour match the original file exactly?
The tool reads the full-size image as your browser opens it, in standard sRGB. For most photos, logos and screenshots that matches the file. Images saved with special wide-gamut colour profiles can read slightly differently from a professional editor.
Can I select a pixel with the keyboard?
Yes. Select the image with Tab, move with the arrow keys one pixel at a time or ten with Shift, and press Enter or Space to pin the colour. You can also type X and Y under Exact pixel and press Read this pixel.
Which images can I use?
JPG, PNG, WebP, AVIF, BMP, GIF, HEIC and self-contained SVG files up to 10 MB, 20 MP and 16,384 px a side. The type is checked from the file itself, not its name. A GIF is read from its first frame.
Is my image sent to a server?
No. The image is opened and read in this browser and is not sent to our server. Only a HEIC photo that the browser cannot open itself loads a decoder from jsDelivr, without your image. The palette is not saved unless you press Save JSON.
Related image tools
Work with the source image.
Ready to build your image palette?
Return to your image, or see the image tools and the full tools directory.