What is the fastest way to extract a color palette from a website?

A browser extension that reads the site's CSS directly. Sitegeist builds the full palette in one click, with a count of how often each color is used and the selectors it comes from. The manual DevTools route works everywhere but takes several minutes per page.

How do I find a website's brand colors in DevTools?

Open DevTools, click the html element at the top of the Elements panel, and look in the Styles pane for a :root block with variables like --color-primary. Sites built on a design system usually name their brand colors there. If the list is long, a short console snippet can print every variable at once.

Why do screenshot-based palette generators give wrong colors?

They average pixels from one frame. Photos and gradients skew the result, the soft edges of rendered text add colors that were never in the CSS, and anything not visible in that frame (hover colors, focus rings, sections below the fold) is missing entirely. They also cannot tell you which colors actually matter.

Is extracting a color palette with Sitegeist free?

Yes. The one-click teardown, the color palette with usage counts and source selectors, and the CSS variables export are all part of the free extension. A one-time $19.99 Pro upgrade adds the Tailwind config export and JSON token export, along with extras like batch asset download and full-page screenshots.

Extract a Color Palette From a Website: 2 Ways

To extract a color palette from a website, read the colors out of its CSS rather than out of a screenshot: sample them by hand with the eyedropper built into Chrome DevTools, look for the site's named color variables, or use a free extension like Sitegeist that reads the stylesheets and hands you the whole palette, counted and sorted, in one click. The manual method comes first below. It is worth knowing even if you end up using the shortcut, because it tells you what the shortcut is actually doing.

1. Pick colors manually with the eyedropper in DevTools

Say you love the purple on a site's buttons and want that exact value for a project, not a close guess. Chrome DevTools will hand it to you in about four clicks, and you never have to touch the Console.

Right-click the element you want (the button, the heading) and choose Inspect. DevTools opens with that element already selected.
Look at the Styles pane. Scan for a color line, something like background-color: #4f46e5. Every color value has a small square swatch next to it.
Click the swatch. Chrome's color picker opens with the exact value loaded, plus an eyedropper icon that lets you sample any pixel on the page.
Copy the value from the picker. Clicking the value cycles it between hex, RGB, and HSL if you need a different format.

One tip: when both are available, trust the Styles pane over the eyedropper. The Styles pane shows the color the designer actually wrote. The eyedropper reads the rendered pixel, and a translucent overlay or a subtle gradient can nudge that pixel away from the real brand color without you noticing.

This is genuinely the right tool for grabbing one or two colors. The pain starts when you want the whole palette. That is a lot of right-clicking, and at the end you still will not know which colors are the important ones. The next two sections deal with that.

2. Read the palette from :root custom properties

Here is the shortcut a lot of people miss. Sites built on a design system usually declare their entire palette in one place, as named CSS variables. Find that block and you are no longer sampling colors one at a time. You are reading the team's actual palette, with their own names attached: --color-primary, --brand-500, --surface.

In the Elements panel, click the <html> element at the very top of the tree.
In the Styles pane, look for a rule that starts with :root {. The variables inside it are the palette.

If the list is long, there is one snippet worth pasting. Open the Console panel, paste this, and press Enter; it prints a tidy table of every variable the site defines on :root:

const vars = {};
for (const sheet of document.styleSheets) {
  try {
    for (const rule of sheet.cssRules) {
      if (rule.selectorText === ':root') {
        for (const prop of rule.style) {
          if (prop.startsWith('--')) vars[prop] = rule.style.getPropertyValue(prop).trim();
        }
      }
    }
  } catch (e) { /* skips stylesheets the browser will not let us read */ }
}
console.table(vars);

Two honest caveats. Browsers refuse to let scripts read some third-party stylesheets, so the snippet quietly skips those. And plenty of sites do not use variables at all, or mix them with stray hex values scattered across hundreds of rules. When that happens you are back to inspecting elements one by one, with no way to tell a color used in two hundred rules from one used in a single forgotten rule. This is the tedious part, and it is exactly the part worth automating.

Why screenshot-based palette generators fall short

The other route you have probably tried is pasting a URL or screenshot into a palette generator that clusters pixel colors. Those tools are lovely for pulling a mood from a photo, but they are the wrong instrument for lifting a website's design palette:

They only see one frame. Hover, focus, and active colors never render in a screenshot, so a site's interaction colors simply are not in the output.
They average pixels, not styles. A big hero photo can take over the result, and the soft edges of rendered text produce in-between colors that exist nowhere in the CSS.
They count nothing. You get five to eight swatches with no hint of which one is the brand primary, which is a one-off, or where any of them are used.
Anything off-screen is invisible. Colors below the fold, in menus, or in modals never make it into the frame.

If you want a mood board, screenshot tools are fine. If you want the palette a design team actually shipped, you want something that reads the stylesheets themselves.

The one-click way: extract the palette with Sitegeist

Sitegeist is a free Chrome extension that does the stylesheet reading for you. One click runs a full teardown of the tab you point it at: colors, type, buttons, spacing, assets, and more.

Install Sitegeist from the Chrome Web Store and open the site you admire.
Click the Sitegeist icon. The full teardown runs in one click, no setup.
Open the Colors tab. Every color the site's CSS actually uses is listed with a usage count (how often it appears) and its source selectors (the rules it comes from).
Copy the values you need, or export the whole palette at once (covered below).

The usage counts are the part the manual method can never give you. The palette sorts itself into workhorses and strays, so the brand primary used across hundreds of rules stands apart from a leftover hex in one media query. And when you wonder "where is this teal even used?", the source selectors answer without another round of inspecting.

Because Sitegeist reads styles rather than pixels, the interaction colors come along too. Its buttons view recreates the site's real buttons complete with their hover, focus, and active states, so the colors that screenshot tools and single-frame inspectors miss are right there to copy. That is also the main gap in element-peeking extensions like CSS Peeper, which, as of this writing, shows resting styles only; we go through the differences in our CSS Peeper comparison.

Exporting the palette to your own project

Copying hexes one at a time is fine for two or three colors. For moving a whole palette into a real project:

CSS variables export is free: Sitegeist turns the extracted palette into a ready-to-paste block of custom properties, named and organized.
Tailwind config export and JSON design-token export are part of Pro ($19.99, one time), for dropping the palette straight into a Tailwind theme or a token pipeline.

Either way, the whole workflow is one click to extract and one copy to use. Keep the DevTools method in your back pocket for the odd pixel-precise sample, or for browsers where you cannot install extensions. But when the goal is an accurate, counted palette from a site you admire, reading the stylesheets wins, and Sitegeist does exactly that for you.

How to extract a color palette from a website