How to find the hex color of an image: open it in any eyedropper tool, click the spot you want, and copy the six-character code such as #F45C75. On a Mac use Digital Color Meter; on Windows, PowerToys Color Picker (Win+Shift+C); in Photoshop press I. Or use a free browser color picker that shows HEX, RGB and HSL in one click.
The quickest no-install option is our free color picker from image: drop in a photo, click any spot with a zoom loupe, and copy the HEX, RGB or HSL code. It saves up to 12 colors and exports them as CSS variables or JSON, and the photo never leaves your device. This guide goes further: the built-in method on every computer and phone, why the same color can give different codes, and how to use the hex for brand colors and product backgrounds.
- A hex code is a color written as #RRGGBB: two characters each for red, green and blue, from 00 to FF.
- Fastest: a browser color picker, which works on any device with no install.
- Built in: Digital Color Meter on Mac, PowerToys Color Picker on Windows, the eyedropper in Photoshop, GIMP, Figma and Canva.
- Photos are noisy: neighboring pixels differ, so zoom in and pick a spot that represents the color, or use a palette generator.
- Check the color space: some phone pickers show Display P3 hex, which won't match sRGB web colors exactly.
What is a hex color code?
A hex code is a six-character recipe for a screen color, written as # plus three pairs of hexadecimal digits for red, green and blue. #000000 is black, #FFFFFF is white, and #FF0000 is pure red. Each pair runs from 00 (none) to FF (255, full), which gives about 16.7 million colors.
| Format | Example | Where it's used |
|---|---|---|
| HEX | #F45C75 | Websites, store themes, Canva, Figma, brand guides |
| RGB | rgb(244, 92, 117) | CSS, design apps, video tools |
| HSL | hsl(350, 87%, 66%) | CSS; easy to make lighter or darker shades |
| CMYK | 0, 62, 52, 4 | Print; convert carefully, screen colors don't map exactly |
HEX and RGB describe the same color in different notation, so any picker that gives one can give the other.
How to find the hex color of an image online (any device)
Open a browser color picker, load the image and click the color. It works the same on Windows, Mac, Chromebook, iPhone and Android.
- Open the color picker from image and drop in your photo, or tap to choose one. JPG, PNG, WebP and iPhone HEIC all work.
- Move the picker over the photo. The zoom loupe magnifies the pixels so you hit the exact spot.
- Click or tap to read the color. You get HEX, RGB, HSL and the nearest CSS color name, each with a copy button.
- Keep clicking to save up to 12 swatches, then export them as CSS variables or JSON.
The tool reads the single pixel under the picker from the full-size image, not a shrunken preview. If you want the main colors of a photo without clicking, the free color palette generator pulls 5 to 8 colors automatically.
How do you find a hex color on a Mac?
Use Digital Color Meter, which comes with macOS, in Applications > Utilities.
- Open Digital Color Meter (search for it with Spotlight, Cmd+Space).
- Go to View > Display Values and choose hexadecimal.
- Set the color space menu to sRGB so the code matches web colors.
- Hover over the color anywhere on screen. Drag the aperture slider to its smallest so it reads one pixel rather than an average.
- Press Cmd+L to lock the position, then Shift+Cmd+C to copy the color as text.
macOS also has a system color panel with an eyedropper (in apps such as Pages, Keynote and TextEdit), where the RGB sliders tab shows a hex field.
How do you find a hex color on Windows?
Install Microsoft PowerToys (free, from Microsoft) and use its Color Picker, which is set to Win+Shift+C by default.
- Install PowerToys from the Microsoft Store or Microsoft's GitHub page, and turn on Color Picker in its settings.
- Open your image in any app, then press Win+Shift+C.
- Hover over the color; scroll the mouse wheel to zoom in on pixels.
- Click to copy the code. HEX is the default format, and you can add RGB, HSL and others in settings.
Without PowerToys, Microsoft Paint has a color picker tool too: pick the color, then open Edit colors to see its values. Recent versions of Paint show a hex field; older ones show only RGB, which any converter turns into hex.
How do you find a hex color in Photoshop, GIMP, Canva and Figma?
Every design app has an eyedropper; select it, click the color, and read the hex in the color panel.
| App | How to pick | Where the hex appears |
|---|---|---|
| Photoshop | Press I (Eyedropper), click the image | Double-click the foreground color; hex field marked # |
| GIMP | Press O (Color Picker), click | Info window or foreground color dialog, “HTML notation” |
| Figma | Press I, click anywhere on the canvas | Fill color field in the right panel |
| Canva | Select an element, open the color panel, click the eyedropper icon | Hex field in the color panel |
| Chrome / Edge DevTools | Click a color swatch in the Styles pane, then the eyedropper | Color value in the picker |
| Google Slides / Docs | No built-in eyedropper | Use a browser picker, then paste the hex under Custom color |
App layouts change; Canva's eyedropper in particular sits in the color panel and may depend on your browser or the desktop app. If an icon has moved, search the app's help for “eyedropper”.
Menu paths and shortcuts for these apps were checked in October 2026. Marketplaces change their rules, so confirm the current requirements in your seller dashboard before you upload a large batch.
How do you find a hex color on iPhone or Android?
On iPhone, the Markup color picker has an eyedropper; on Android there is no system-wide one, so a browser picker is the simplest route on both.
- iPhone and iPad: open a photo, tap Edit > Markup, tap the color wheel, then the eyedropper, and tap the spot you want. In the Sliders tab of the color panel you'll see a hex code. By default iOS shows it in the Display P3 color space; switch to sRGB in that panel, where offered, for a web-matching code.
- Android: open the browser color picker in Chrome, tap to choose the photo from your gallery, and tap the color. Some manufacturers' gallery editors include an eyedropper, but they rarely show hex.
- Screenshots: to pick a color from an app or website on your phone, take a screenshot first and load that into the picker.
Click any spot on your product photo or logo and copy the exact HEX, RGB or HSL code. Free, no sign-up, and your photo stays on your device.
Pick a color7 days free · 50 credits · No credit cardWhy does the same color give different hex codes?
Because photos aren't flat color. Light, shadow, compression and color spaces all change the pixel values.
| Cause | What happens | Fix |
|---|---|---|
| Sensor noise and texture | Neighboring pixels differ by a few values | Zoom in and pick a middle-tone spot, or use a palette tool |
| Shadows and highlights | A red mug reads dark red on one side, pink on the other | Pick from the evenly lit side |
| JPG compression | Blocks of slightly shifted color near edges | Pick away from edges, or use the original file |
| Color space | Display P3 and sRGB give different codes for the same look | Use sRGB for web and store colors |
| White balance | A warm or cool cast shifts every color | Correct white balance first |
| Screen vs product | The photo's color isn't the real object's color | Use the brand's official hex for logos when you have it |
If you're matching a real product's color, fix the photo's white balance before picking; our product photo color accuracy guide explains how. For logos, the cleanest source is a vector file or the brand guide, since a photo of a logo always picks up some noise.
How do you use a hex color for your brand and product backgrounds?
Pick two or three colors from your logo or hero product, record their hex codes, and reuse them everywhere: store theme, social templates and image backgrounds.
- Store theme: paste the hex into Shopify, Etsy banner tools, WooCommerce or Squarespace color settings so buttons and headings match your packaging.
- Design templates: Canva, Figma and similar apps accept hex in every color field.
- Product backgrounds: a soft tint of your brand color behind products gives social posts and your own store a consistent look. Keep marketplace main images on pure white (#FFFFFF) where the platform requires it.
- Contrast: check that text on your brand color is readable; dark text on light tints, white text on deep colors.
- Write it down: keep HEX, RGB and, for print, CMYK in one brand sheet.
Take your main brand hex and make a lighter tint for backgrounds and a darker shade for text, by adjusting the L value in HSL. Pick an accent from a contrasting part of your product. For a fuller method, see how to choose brand colors.
AiArter can put your products on a brand-color background with a soft shadow for 4 credits in product photos, and colors saved in a brand kit show up there as one-click swatches. For full scenes, the AI background generator includes a Pastel color preset. Our guides to creating a brand kit and the best background color for product photos cover how to choose.
Frequently asked questions
How do I find the hex code of a color in an image?
Open the image in an eyedropper tool, click the color, and copy the code that starts with #. A free browser picker such as AiArter's color picker from image works on any device, and Mac and Windows both have built-in or free system tools.
How do I get a hex color from a picture on my phone?
On iPhone, open the photo in Markup, tap the color wheel and use the eyedropper; the Sliders tab shows a hex code. On Android, open a browser color picker, load the photo from your gallery and tap the color.
Is there a color picker built into Windows?
Windows has no system-wide hex picker by default, but Microsoft's free PowerToys adds one: press Win+Shift+C, hover and click to copy the hex. Paint's color picker also shows values under Edit colors.
Why is the hex code different every time I click?
Photos contain noise, shading and compression, so neighboring pixels have slightly different values. Zoom in, pick from an evenly lit spot, or use a palette generator that groups similar pixels into main colors.
How do I find the hex color of a logo?
The most accurate source is the brand guide or the original vector file. If you only have an image, pick from the middle of a solid area of the logo, away from edges where compression shifts colors.
Can I convert a hex code to RGB or CMYK?
Yes. HEX and RGB are the same values in different notation, and most pickers show both. CMYK for print is an approximation, so ask your printer to proof important brand colors.
Cut products out of your photos and place them on your brand color or a gradient with a soft shadow, with brand-kit colors as one-click swatches.
Start free trialSee pricing7 days free · 50 credits · No credit card. Trial images carry a small “Made with aiarter” mark; paid plans export clean files you can use commercially.
