How to Find a Hex Code From an Image

If the color you want already exists in an image, you do not need to recreate it by eye. Sample the actual pixel and copy the resulting hex value.

Find the color in five steps

1. Save the image, screenshot or mockup that contains the color.
2. Open it in a pixel color picker.
3. Zoom in if the area is small or surrounded by similar shades.
4. Tap the exact pixel you want to identify.
5. Copy the hex value and test it in your design.

Image color vs. design color

Photos often contain many closely related shades because of lighting, reflections and compression. If you are building a reusable palette, sample several nearby pixels and choose the value that best represents the visual role you want.

Common uses

• Finding a brand-like color from inspiration imagery.
• Matching a UI color from a screenshot.
• Recreating a palette in CSS or a design program.
• Pulling colors from product photography or digital artwork.
• Sampling a color and immediately checking whether it works with text.