You love the colour of a sunset, a product or a logo and want that exact shade for your design. You do not need special software. A browser colour picker can give you the code in seconds.
Pick a colour from a photo
- Open Color Picker from Image.
- Drop in your picture.
- Move the cursor over the image. A magnifier shows the pixels under it, and the colour preview updates as you move.
- Click to pick. Copy the HEX, RGB, HSL or CMYK value.
Which colour code do I need?
| Code | Looks like | Used for |
|---|---|---|
| HEX | #4338CA | Web design, CSS, most design apps |
| RGB | rgb(67, 56, 202) | Screens, CSS, code |
| HSL | hsl(245, 57%, 51%) | Adjusting lightness and saturation in CSS |
| CMYK | cmyk(67%, 72%, 0%, 21%) | Print (approximate) |
CMYK values from a screen colour are approximate. For professional printing, ask your printer for a proof.
Build a palette automatically
Below the picker, the tool lists the main colours found in the image. Click any to copy it, or press Copy CSS variables to get a ready-made :root block for your stylesheet.
Tips for choosing colours
- Pick from a mid-lit area of the picture, not a glare or deep shadow.
- Compare a few spots, because gradients vary across the image.
- A palette from a nature photo often looks harmonious. Take 3 to 5 colours.
- Check contrast. Text needs enough contrast against its background to be readable (aim for a ratio of at least 4.5:1).
Change colours after you pick them
Want to shift every colour in a picture? Use the Hue Changer. To remove one colour completely (such as a white background), use Remove Color from Image.
Why not use a screenshot colour picker?
Screen pickers read what is displayed, which can be altered by night mode, colour profiles or monitor calibration. Picking from the image data itself gives the real stored value.
Related tools
- Image Size Finder for dimensions
- Black & White to check how a design reads without colour
Picking the right colour
Zoom in on the area you want, and click on a flat patch rather than an edge. Photos have noise and gradients, so neighbouring pixels differ slightly. Sample a few spots and compare. The colour picker shows HEX, RGB and HSL values you can paste straight into CSS or a design tool.
Building a palette
- Pick a dominant colour from the main subject.
- Pick an accent from a smaller, brighter area.
- Pick a light and a dark neutral for backgrounds and text.
- Check that text on each background has enough contrast to read.
Understand the formats
| Format | Example | Use |
|---|---|---|
| HEX | #4338CA | CSS, design tools |
| RGB | rgb(67, 56, 202) | CSS, code |
| HSL | hsl(245, 57%, 51%) | Easy to adjust lightness |
Tweak the result
Shift all the colours in a photo with hue changer, or strip a particular tone with remove colour from image. To know exactly how large your reference image is, use image size finder.
Photos on screens may not match printed colours, so test prints before committing to a brand palette.
Frequently asked questions
How do I get the HEX code of a colour in a photo?
Open a colour picker for images, click on the colour and copy the HEX value, such as #4338CA.
What is the difference between HEX and RGB?
They describe the same colour. HEX writes it as six hexadecimal digits, while RGB lists red, green and blue values from 0 to 255.
Can I build a palette from a photo?
Yes. Tools that list the main colours of an image give you a palette you can copy as CSS variables.
Why do colours look different on my screen?
Colour profiles, night mode and monitor calibration change how colours appear. The picked value is the real data stored in the image.
