How to extract a color palette from a website

Last updated: September 7, 2026

Sampling one color is easy. Getting the whole palette a site uses, in the format you need, without missing the colors that only appear in a gradient or a shadow, is the part that takes time.

Method 1: the browser eyedropper

Chrome ships an eyedropper inside DevTools. Open any color swatch in the Styles pane and the picker includes a sampling tool that reads any pixel on screen.

It is accurate and it is one color at a time. For a full palette you are sampling, pasting, sampling, pasting, and hoping you did not miss one.

Method 2: screenshot and sample

Take a screenshot and use a design tool's picker. This is the common fallback and it has a specific trap: color management.

If the display is wide gamut and the screenshot is tagged with a different profile than the tool assumes, the value you sample will be close to the real one but not equal to it. Off by a couple of points per channel is enough to fail a brand match or a contrast check.

Sampling from the live page avoids this because you are reading the value the CSS declared, not a reconstruction of what the screen displayed.

Method 3: pull the palette from the console

You can have the page enumerate its own colors without installing anything:

[...new Set([...document.querySelectorAll("*")].flatMap(el => {
  const s = getComputedStyle(el);
  return [s.color, s.backgroundColor, s.borderTopColor];
}))].filter(c => c && c !== "rgba(0, 0, 0, 0)")

This catches text, background and border colors. It will not catch the stops inside a gradient or the color of a box shadow, because those live inside a longer value that needs parsing rather than reading. That gap is the usual reason a hand built palette comes out incomplete.

Method 4: extract the whole palette at once

The console gets you a flat list. What it will not give you is the format you actually need, or the stops buried inside a gradient.

Screen Ruler extracts the palette from whatever you select, walking that element and everything inside it in one pass. Gradient stops are included, which is where hand sampling usually falls short. Select the page body and you get the whole thing. Values come out in the format you need rather than whatever the picker defaults to, and the eyedropper is free and still there when you only want a single value.

Palette extraction is a paid feature. The eyedropper is not.

What else is worth knowing

• Transparency changes what you see. A swatch reading #000000 at 6% opacity over white displays as a light grey. Sampling the pixel gives you the grey, reading the CSS gives you the black. They are both correct answers to different questions.
• Modern CSS colors may not be hex at all. oklch() and color-mix() are common now, and converting them to hex loses precision outside sRGB.
• Dark mode is a second palette. If the site responds to prefers-color-scheme, sampling in one mode gives you half the system.

Common questions

Why does the color I sampled not match the brand guide?

Usually opacity on the element or an ancestor, or a wide gamut display shifting the sampled pixel. Read the declared value rather than the rendered pixel when precision matters.

Can I get the colors used in a gradient?

Not by sampling, since a gradient is a continuum and the stops are what you want. You need to read the CSS value.

How do I find every element using a particular color?

Extract the palette, then search by selector or property to find the elements that reference it.