How to get the colors from an image on a website

An eyedropper gives you one pixel. A palette gives you the colors the picture is actually made of. Here is how to get that from any photo, banner or video on a live page, and take it into Figma or your code.

Updated October 2026 · by the Design Toolkit team

Why one eyedropper click misleads you

Zoom far into any photo and the colors you thought were solid break apart:

• Compression. Neighboring pixels in a JPEG differ by a few steps even where the picture looks flat.
• Anti-aliasing. Where two colors meet, the edge is a blend of both, a third color that exists nowhere in the design.
• Gradients and shadows. There is no single color. The answer depends on where you click.
• Scaling. The browser resamples the image to fit its box, which blends pixels further.

So you sample a few spots, squint, and still end up a shade off. Reading every pixel and grouping the results is what fixes it.

1. Work out what kind of image it is

The route depends on how the page draws the picture:

• An <img> tag. Right-click, save, done. The easy case.
• A CSS background-image. There is no save option on right-click. Find the url(...) in the Styles panel of DevTools and open it in a new tab.
• A <video>. There is no image file at all. The colors live in a frame that changes 24 times a second, so you need a still of the frame you mean.
• A <canvas>. WebGL hero images and generative backgrounds exist only as pixels on the screen. There is nothing to save.

The last two are where saving the file and uploading it stops working, and where reading the picture straight off the page earns its keep.

2. Get a palette, not a pixel

For an image you can save, drop it into a palette generator such as Coolors or Adobe Color. Under the hood they all do roughly the same thing:

1. Shrink the picture, so noise averages out.
2. Split its colors into groups. The classic method is called median cut: keep dividing the color space where the pixels are most spread out.
3. Take one representative color from each group.
4. Merge near-duplicates, so you do not get five almost-identical blues.

Two details decide whether the result is any use: how many colors it returns, and whether each one is a real color from the image or an average of several. An average of orange and blue is a muddy grey that is not in the picture. The better extractors take the densest cluster in each group, not the mean.

3. Take the colors into Figma

Figma's eyedropper only samples inside Figma. To use a web image's palette you either place the picture in your file and sample it by hand, or use a palette plugin.

A faster route is to paste the palette as SVG. Figma turns pasted SVG into editable layers, so a row of colored rectangles arrives as a row of swatches you can restyle, rename and turn into styles or variables yourself. They are plain shapes, not Figma styles, so decide how to organize them once they are in.

4. Take the colors into code

For a project, you want the same palette as tokens with names. As CSS custom properties:

:root {
  --color-blue-950: #1f2347;
  --color-red-500: #c6543e;
  --color-orange-300: #f4a261;
}

Tailwind v4 reads the same variables from an @theme block, Tailwind v3 wants them under theme.extend.colors in the config, and a design-token pipeline wants JSON. It is the same list in four wrappers, so copy the one your project already uses.

The shortcut

Design Toolkit reads the colors of an image straight off the live page. Switch the toolbar's color tool to Colors from image (or press Shift + C), hover a picture and it outlines the one you are about to read: an <img>, a CSS background, a video frame or a canvas. Click it and a card opens with the picture's colors, each with its code.

• Real colors, not blends. Each color is the densest cluster of its group, and near-duplicates and anti-aliased edges are merged away. You get up to ten, and a flat logo gives a few.
• Copy for Figma. One click copies the palette as SVG, which pastes in as one editable rectangle per color, named after it.
• Copy as code. The dropdown next to it switches the format: CSS variables, Tailwind v4, Tailwind v3 or JSON tokens.
• Pick another. Reads a different image without leaving the tool.

When a site stops the page from reading an image's pixels, which cross-origin pictures often do, Design Toolkit falls back to reading them from a screenshot of what is on screen, and the card tells you the colors may be off by a shade. It never shows a guess as exact.

Before you use them

• An image's colors are not a brand's colors. A photo gives you a mood. If you need the colors a site actually declares, use the page's own palette instead.
• Check the contrast. A color pulled from a photo makes a good background and a poor text color more often than not. Test the pair before you commit to it.
• Take the palette, not the picture. The colors are inspiration. The image itself still belongs to whoever made it.

Common questions

Read next