How to get exact hex codes from a photo

You photograph a blue door, open the image, pick the door and get a hex code. Pick two centimeters to the left and get a different one. Both are correct. That is the problem.

A “color” in a photo is hundreds of colors

Light, shadow, the camera’s white balance and image compression all move the pixels. A painted wall that looks like one flat color is, to the image, a cloud of slightly different values. So the question is never “what is the hex code of this wall?” but “which value represents it best?”

Three ways to pick it

• An eyedropper on the image. Fast, and it returns exactly one pixel. That pixel may sit in a shadow or a highlight. If your tool can sample an area average instead of a single pixel, use it.
• A live camera picker. Point a phone at the real object and read the value under a crosshair as you move. You see how the number shifts with the light, and can hold it where the color looks right.
• Palette extraction. Let software group all the pixels in a photo into a handful of representative colors. This is the most useful when the photo is the inspiration, not a single object: a street, a market stall, a sunset.

Tips for values you can trust

1. Shoot in soft daylight. Direct sun and warm indoor bulbs shift everything toward white or orange.
2. Avoid glare and reflections; they read as near-white.
3. Crop to the subject before extracting a palette, so the sky or the floor doesn’t take a slot.
4. Check contrast before using a color for text. WCAG asks for at least 4.5:1 for normal body text (level AA).
5. Name your colors. “Teal” in a file ages better than “that nice blue”.

From a palette to code

Once you have the colors, write them down where your project can use them: CSS custom properties, a Tailwind config, a Swift color extension or design tokens for Figma. Paste once, use everywhere, and the palette from the photo stays consistent across the product.

How Palettio does it

Palettio reads any color live through the camera, with its HEX, RGB, HSL, HSV and CMYK values and its nearest name. It extracts a full palette from a photo (3 extractions free, unlimited with Palettio Pro), checks contrast against WCAG AA and AAA, and simulates seven kinds of color blindness. Palettes export as CSS variables, JSON or plain text for free, and as Tailwind, Swift, Figma tokens and more with Pro. It works offline, with no account, on iPhone and Android.