How to Get HEX Color Codes from a Photo, Including CSS Variables
2026-11-08
Pull dominant colors from a photo as HEX, RGB and HSL values, pick the exact color at any point, and copy them as CSS variables.
When this helps
Use it to carry the mood of a photo into a design, or to get the exact color code of a logo or product. You can pull the main colors from one photo and pick the exact color of any spot.
Get the dominant colors
1. Add your photo to the color palette tool.
2. Use the "Number of colors" slider to choose from 3 to 12.
3. Read the "Dominant colors" list. Colors are listed from the largest share down, each with its HEX, RGB and HSL values.
4. Click a color to copy its HEX value.
Pick the exact color at one point
Click the image where you want. The color at that spot appears as HEX, RGB and HSL, and "Copy HEX" copies it. Transparent points cannot be picked.
Copy all colors as CSS variables
Press "Copy" under "Copy as CSS variables". You get a :root block with names such as --color-1 and --color-2, ready to paste into a stylesheet.
Things to know
- Similar colors are grouped and shown as an average, so a result can differ a little from one pixel. For an exact value, click that spot.
- The analysis runs on a copy reduced to 200px on its long side, so it is fast, and the photo is never sent to a server.
- Colors on screen can look different depending on your monitor and color profile.