Color Picker from Image & Color Code Converter
Hover over a photo and see the color as HEX, RGB and HSL right away. You can also pull out the main colors automatically, type a code to convert it, or check the contrast ratio between two colors.
Loading the tool...
How to use
- Pick a color from a photo: upload a photo and hover over it to see the color in real time. Click to lock that color and copy its HEX code.
- Extract the main colors: choose how many colors you want and the tool pulls 5 to 8 main colors from the photo. Click a swatch to copy its HEX code.
- Convert color codes: type into HEX, RGB (red, green, blue) or HSL (hue, saturation, lightness) and the others update automatically.
- Check contrast: pick a background color and a text color to see the contrast ratio and whether it passes WCAG.
Everything is calculated in this browser. Your photo is never uploaded to a server.
Tips
The most common mistake in design work is picking colors that just "look about the same." The same photo can look slightly different on different monitors and devices, so if you pull out the exact HEX code and write it down, you can reuse exactly the same color in other tools or on another day. Getting into the habit of recording your brand colors, logo colors and favorite background colors as HEX codes makes your work much faster.
RGB and HSL are useful in different situations. When you paste a code straight into CSS or a design tool, HEX or RGB is convenient. When you want adjustments like "a little brighter than this" or "less saturated and calmer," HSL is much more intuitive. Keep H (hue) the same and only raise or lower L (lightness) to easily get lighter and darker shades of the same color.
When choosing text and background colors, contrast (the difference in brightness) matters more than hue. Even two completely different colors are tiring and hard to read if their brightness is similar. Checking background and text pairs with the contrast checker helps you avoid text that disappears into the background on thumbnails and posters. For small text or important notices, we recommend meeting at least the AA level (4.5:1).
FAQ
What are HEX, RGB and HSL?
They are different ways to describe the same color. HEX is a hexadecimal code like #FF5A36 and is the most common in web and design tools. RGB mixes red, green and blue light on a 0–255 scale. HSL describes a color by hue, saturation and lightness, which makes adjustments like "brighter than this color" intuitive.
Can I use colors picked from a photo in my logo or website?
Yes. Colors themselves are not protected by copyright, so you can use them freely. The copyright of the photo or design elements you apply them to is a separate matter, so keep that in mind.
Why should I check the contrast ratio?
If the background and text colors are too close in brightness, the text is hard to read, especially for people with low vision or anyone looking at a bright screen. The web accessibility guidelines (WCAG) recommend at least 4.5:1 for normal text.
Is my photo sent to a server?
No. Picking and extracting colors all happens inside this browser. Your photo is not uploaded anywhere.