How to get the color palette of any website

Two copy-paste snippets for the DevTools console: one lists the colors the page actually shows, the other the color variables the site defines.

1. The colors the page uses, most used first

Open the page, press F12 (or Cmd+Option+J on a Mac), go to Console, paste this and press Enter. Chrome may ask you to type "allow pasting" first.

(() => {
  const count = new Map();
  const hex = c => {
    const m = c.match(/^rgba?\((\d+), (\d+), (\d+)(?:, ([\d.]+))?\)$/);
    if (!m || m[4] === '0') return null; // skip transparent and non-sRGB colors
    return '#' + [m[1], m[2], m[3]].map(n => (+n).toString(16).padStart(2, '0')).join('');
  };
  for (const el of document.querySelectorAll('*')) {
    const s = getComputedStyle(el);
    if (s.display === 'none' || s.visibility === 'hidden') continue;
    for (const prop of ['color', 'background-color', 'border-top-color', 'fill']) {
      if (prop === 'border-top-color' && s.borderTopStyle === 'none') continue;
      const h = hex(s.getPropertyValue(prop));
      if (h) count.set(h, (count.get(h) || 0) + 1);
    }
  }
  const palette = [...count].sort((a, b) => b[1] - a[1]).slice(0, 20);
  console.table(palette.map(([color, uses]) => ({ color, uses })));
  return palette.map(([c]) => c).join('\n');
})()

It reads the computed text, background, border and SVG fill color of every visible element and prints a table of up to 20 colors, ordered by how many times each is used. The return value is the hex list, one per line, ready to copy. Results from our runs:

Limits: colors inside images, gradients and shadows are not counted, and only what is on the page right now is counted, not hover states or other pages. Colors the browser reports in newer formats (such as oklch()) are skipped by the hex conversion. Visit two or three typical pages of a site to get its full palette.

2. The site's color variables (design tokens)

Many sites define their palette as CSS custom properties such as --color-base. This snippet lists every variable that holds a color, with its current value:

(() => {
  const names = new Set();
  const walk = rules => { for (const r of rules) {
    if (r.style) for (const p of r.style) if (p.startsWith('--')) names.add(p);
    if (r.cssRules) walk(r.cssRules); // @media, @layer, @supports, nested rules
  } };
  for (const sheet of document.styleSheets) {
    try { walk(sheet.cssRules); } catch { /* other-domain stylesheet: not readable */ }
  }
  const root = getComputedStyle(document.documentElement), out = {};
  for (const name of [...names].sort()) {
    const v = root.getPropertyValue(name).trim();
    if (/^(#[0-9a-f]{3,8}|rgba?\(|hsla?\(|oklch\(|oklab\()/i.test(v)) out[name] = v;
  }
  console.table(out);
  return Object.keys(out).length;
})()

It found 172 color variables on Wikipedia (for example --color-base: #202122, --color-progressive: #36c) and 1,365 on GitHub (--fgColor-default: #f0f6fc, --bgColor-default: #0d1117 in the dark theme our browser got). It reads rules nested in @media and @layer. A first version that read only plain :root rules found 0 on both sites. Stylesheets served from another domain can't be read by page scripts and are skipped, and example.com and Stripe returned none.

3. Turn the list into CSS

Paste the hex list into the free color palette to CSS converter to get CSS variables, SCSS or Tailwind config, and check text and background pairs with the contrast checker.

Written with AI assistance. Both console snippets were run in Chromium 153 on example.com, Wikipedia, GitHub and Stripe on 2026-10-01; the numbers quoted are from those runs. PlainInspect is our extension; the other methods are free.