Color Picker from Image and Palette Generator

You have a photo, a logo or a screenshot, and you need the exact color code: to match a Shopify theme to your packaging, to brief a designer, to keep social graphics on brand, or to copy a color you like from a competitor's banner. This tool reads the image in your browser and gives you the code for any pixel, plus the handful of colors that make up most of the picture.

The image never leaves your device. It is drawn onto a canvas in the page, and every color is read from those pixels.

How to pick a color from an image

1. Drop an image into the box, click to choose one, or copy an image and press Ctrl+V (Cmd+V on Mac) anywhere on the page. JPG, PNG, WebP, GIF, SVG and AVIF work.
2. Move the pointer over the image. A loupe shows an 11 x 11 pixel close-up with the pixel under the pointer outlined and its HEX code, so you can hit a thin line or a small logo accurately.
3. Click (or tap on a phone) to pick the color. The Selected color panel shows it as HEX, RGB, HSL and CMYK, each with a Copy button.
4. Keep clicking to collect colors. The last 16 you pick stay in Picked colors; click a swatch to select it again and copy its HEX code.
5. Scroll to Dominant colors for the automatic palette. Choose 5, 6, 8 or 10 colors. Click a swatch to copy its HEX.
6. Export the palette with Copy CSS variables, Copy JSON, Copy Tailwind colors or Download palette PNG.

In Chrome and Edge you also get a Pick a color from anywhere on screen button. It uses the browser's built-in eyedropper, so you can grab a color from another window, a PDF or a web page without taking a screenshot first.

What each color code is for

How the dominant color palette is calculated

The palette is not a guess from a few random pixels. The tool samples about 40,000 pixels spread evenly over the image, ignores transparent ones, and groups similar colors into small bins. It then runs a weighted k-means clustering: it starts from the most common color, adds colors that are both common and different from those already chosen, and refines the groups over 12 rounds. Color distances are weighted toward green and blue differences, which roughly matches how the eye separates colors.

Each swatch shows the share of the image it represents, so you can tell a background color (often 40% or more) from an accent that covers 3%. The result is the same every time for the same image, so a teammate who runs the same file gets the same palette.

Large images are scaled so the longest side is 1,600 px before reading, which keeps the page fast. For photos and logos this makes no visible difference. For a one pixel hairline in a huge screenshot, crop closer to the detail first.

Checking text contrast

Every selected color is tested against white and black text using the WCAG contrast formula, the accessibility standard most sites follow. The badge tells you the result:

• AAA: 7:1 or higher, suitable for any text.
• AA: 4.5:1 or higher, the usual target for normal body text.
• Large text only: 3:1 to 4.5:1, fine for big headings and bold buttons, too weak for small text.
• Fails: under 3:1.

This matters when you turn a brand color into a button or banner. A gold such as #B27E23 scores 3.56:1 with white text, so white only works for large button labels, while black text on the same gold scores 5.90:1 and passes AA. A deep navy such as #1E3A8A scores 10.36:1 with white, so white text on navy is safe at any size.

Worked examples

Matching a Shopify theme to your packaging

Photograph your box or label in daylight, crop to the printed area, and drop it in. Pick the main printed color from a flat area away from shadows and highlights, copy the HEX, and paste it into your theme editor's color settings. Check the contrast panel before you use it as a button color, then pick a darker or lighter variant if it fails.

Pulling a palette from a product photo

A seller of linen bedding drops in a lifestyle photo and sets the palette to 6 colors. The result gives a warm off-white background (the largest share), two linen tones, a wood brown and two small accent colors from plants. Those six HEX codes become the colors for social templates and email headers, so every graphic matches the photos.

Choosing text for a sale banner

A seller wants a red sale banner in the red from their product photo, #C0392B. The contrast panel shows white text at 5.44:1 (AA) and black text at 3.86:1 (large text only). White is the right choice for the banner text, and it passes for small print too. If the red had come out lighter, the panel would have pointed them to a darker shade or to black text before the banner went live.

Handing colors to a developer

Click Copy CSS variables to get a block like :root { --color-1: #F2EEE6; ... }, or Copy Tailwind colors for a brand scale numbered 100, 200, 300 and so on in order of how much of the image each color covers. The JSON export includes the HEX, RGB values and percentage share for each color.

Check an Amazon or marketplace white background

Amazon requires the main product image to sit on pure white, RGB 255, 255, 255. A background that looks white can easily be #F7F7F7 or have a faint blue cast from the camera, and that can get a listing flagged. Drop the photo in and click several spots on the background, especially corners and areas near shadows:

1. If every pick reads #FFFFFF and rgb(255, 255, 255), the background is pure white.
2. If you see values like rgb(246, 247, 250), the background is off-white. Fix it in your editor with a levels or white point adjustment, or re-shoot with more light on the backdrop.
3. Check the palette too: on a compliant main image, the largest swatch should be #FFFFFF.

Compression can nudge near-white pixels, so check the final exported JPG, not only your editing file. If you shrink the photo with our image compressor or any other tool, drop the compressed file back in and pick the background again before you upload it.

Reading HEX, RGB and HSL

A HEX code is three pairs of hexadecimal digits for red, green and blue, each from 00 to FF (0 to 255). #B27E23 means red B2 (178), green 7E (126) and blue 23 (35), which is the same color as rgb(178, 126, 35). Most apps accept either.

HSL describes the same color in a way that is easier to adjust by hand: hue is the position on the color wheel in degrees (38 is an orange-gold), saturation is how intense it is, and lightness runs from 0% (black) to 100% (white). To make a lighter tint of a brand color for a background, keep the hue and saturation and raise the lightness, for example from hsl(38, 67%, 42%) to hsl(38, 67%, 92%). To make a darker shade for hover states, lower the lightness. The tool gives you the HSL value of every pick so you can do this in CSS or any design tool that accepts HSL.

Using image colors to build a brand palette

A palette pulled from a photo is raw material, not a finished brand system. A practical way to turn it into one:

1. Pick one main color that represents you, usually the most distinctive color in your logo or product, not the background.
2. Pick one or two neutrals from the palette for backgrounds and text, typically a light off-white and a dark gray or brown.
3. Pick one accent for buttons and sale badges, and check it passes AA with its text color.
4. Write the codes down in one place and use only those. Consistency across the store, social posts and packaging matters more than the exact shades.

To go further, our brand kit generator builds logo ideas, color sets and font pairings, and the favicon generator turns your logo into browser icons in your colors.

Troubleshooting

The color I picked is slightly different from the original design

Photos and JPGs shift colors: lighting, camera processing and compression all change pixels. For exact brand colors, pick from the original logo file (PNG or SVG), not a photo or a screenshot of a compressed image. Screenshots can also differ if your screen uses a wide color profile.

The palette is dominated by the background

That is accurate: the background covers most of the pixels. Crop the image around the product first, or raise the number of colors to 8 or 10 so smaller accents get their own swatch.

Paste does nothing

The page must be focused, and you must have copied an image, not a file name. In some browsers, copying a file in Finder or File Explorer copies only its name; open the image and copy it, or drag the file in instead.

The colors look different on my phone and my laptop

Screens differ in brightness, color profile and night or blue light filters, so the same HEX code can look warmer on one device than another. The code itself is what matters for your theme and designs. Judge colors with night mode off, and check important brand colors on a couple of devices before you commit.

The eyedropper button is missing

The screen eyedropper uses an API that Chrome and Edge support on desktop. Safari and Firefox do not, so the button is hidden there. You can still pick from any image you drop in.

The image looks blank or a transparent PNG shows odd colors

Fully transparent pixels are skipped when building the palette. If you click a transparent area you get black, because transparent pixels store no visible color. Pick from the visible parts of the image.

If you are building a new store or niche site around these colors, the AI Site Builder in AM Jarvis sets up the theme, pages and product sections, and you can apply your palette in the theme settings.