How to pick a color from an image
- Drop an image, or click to browse.
- Click anywhere on the image. The HEX and RGB values of that exact pixel appear on the right, with a large swatch.
- Press Copy next to either value, or keep clicking to build a palette. Click any palette swatch to copy its HEX code.
A hex code finder for any picture
Whenever you need to get the hex code from an image — a brand logo, a screenshot, a product photo, a frame from a video — this page is the fastest way to do it. It works as an RGB color picker from an image at the same time: one click on any pixel shows both notations side by side, ready to copy. Designers use it to match brand colors exactly, developers use it to turn a mockup into CSS values, and everyday users grab colors from photos for slides, invitations and crafts.
HEX vs RGB
HEX (like #1657D8) is the compact form used in CSS and design tools. RGB (like rgb(22, 87, 216)) lists the red, green and blue values separately. Both describe the same color — use whichever your tool expects. This tool shows only these two; for HSL, paste your code into the Color Converter. The blog explains the differences in RGB vs HEX vs HSL.
What exactly gets picked
The tool reads one pixel at the spot you click, at the image's original resolution. It does not average the surrounding area, and it does not show a zoomed magnifier. That has practical consequences:
- Photos are noisy. A wall that looks uniformly beige is really thousands of slightly different values. Two clicks a few pixels apart can give two different hex codes. Click several spots, compare them, and choose the one that looks most representative.
- JPEG compression changes colors. JPEGs smear colors near edges and add faint blocks and halos. For a logo or flat graphic, a PNG or the original file gives the true color; in a JPEG, click in the middle of a large solid area, far from edges and text.
- Edges are blends. Anti-aliased borders between two shapes contain in-between colors. If you click a thin line of text, you will likely get a blend of the text and its background.
- Transparent areas. Fully transparent pixels read as black (000000), so a result of
#000000on a transparent PNG may mean "nothing there".
Why the color may look different on your site
The values are the raw numbers stored in the image file. How they appear depends on the screen and on the image's embedded color profile. A photo shot in a wide-gamut profile such as Display P3 can look slightly different from the same hex code in a standard sRGB web page, and phone, laptop and monitor screens all render colors a little differently. For web design the numbers are normally what you want, but if you must match a printed brand color, use the official brand guide values, since print uses different color systems entirely.
The palette
Each new color you click is added to the front of a palette, and duplicates are skipped. The palette holds up to 12 colors; once full, the oldest one drops off. It is cleared when you press Clear or leave the page, so copy values you want to keep into your design tool or a note. To build a palette in a more organized way from a single photo, read how to build a color palette from a photo.
Tips by audience
- Small-business owners: pull your logo color from the highest-quality version of the file you have, not from a screenshot of your website.
- Developers: sample a button or heading from a mockup export in PNG, then use the hex value directly in CSS.
- Photographers and bloggers: pick a few tones from the image itself to style captions and headings so the page feels coordinated.
Is it private and safe?
Yes. Toolyard reads pixel colors inside your browser on your own device. Your image is never uploaded anywhere, so it stays completely private.
Related guides
Read How to get the hex code from an image and How to convert HEX to HSL. You can also convert values directly with the HEX to HSL tool.
Frequently asked questions
How do I get a color from an image?
Drop an image and click anywhere on it. The HEX and RGB values of that pixel appear instantly, and you can copy either one with the Copy button.
Can I pick a brand color from a logo?
Yes. Use the best quality logo file you have, preferably a PNG, and click in the middle of a solid area rather than near an edge or text. Anti-aliased edges contain blended colors that do not match the real brand color.
Why do I get different codes when I click the same-looking spot?
The tool reads a single pixel, and photos contain slight variations from sensor noise and JPEG compression. Click a few nearby points and choose the one that best represents the area, or use a lossless version of the image if you have one.
Does it show HSL or CMYK values?
No, only HEX and RGB. You can paste a HEX code into the Color Converter or the HEX to HSL tool to get HSL. CMYK values for print are not provided, and screen colors rarely convert to print exactly.
Can I save several colors?
Yes. Each color you click is added to a palette of up to 12 swatches, and clicking a swatch copies its HEX code. The palette is not stored, so copy what you need before leaving the page.
Why does the color look different in my design software?
Screens and color profiles differ. The values come straight from the image file, but a wide-gamut photo profile can render differently from standard sRGB. Compare in the same environment where the color will finally be used.
What does #000000 mean on a transparent image?
Fully transparent pixels are read as black, so you may see #000000 when you click an empty area of a transparent PNG. Click a visible part of the artwork instead.
Are my images uploaded?
No. Color picking runs entirely in your browser, and your image is never uploaded.