How to get the hex code of a color from an image
Matching a brand color from a logo, or borrowing a shade from a photo you love, starts with the exact hex value. Load the image, click the pixel, and copy the code straight into your CSS or design tool.
Open the free image color picker →Free · no signup · no watermarks
Step by step
- Open the image color picker. Start the free picker — it works with photos, logos, and screenshots.
- Load your image. Drop in the file that contains the color you want.
- Click the exact spot. Zoom in if needed and click the pixel; the picker reads that precise point.
- Copy the hex code. Grab the hex, RGB, or HSL value and paste it into your project.
Tips that save a second try
- Logos often use slight gradients — sample two or three nearby pixels and pick the value that appears most.
- Screenshots of a screen are more accurate than photos of a screen, which shift colors with lighting.
- Build a small palette by sampling the image's main areas, then check your text contrast before shipping the design.
Common questions
Why does the hex code differ from the official brand color?
Compression and display rendering can shift pixel values slightly. When an official brand guide exists, treat the sampled value as a close starting point and confirm against the published palette.
What is the difference between hex and RGB?
They describe the same color in different notations: hex packs red, green, and blue into one #RRGGBB string, while RGB lists the three numbers separately. Use whichever your tool or stylesheet expects.