How to find the colours used on a website

One swatch is easy. The whole palette — with the alpha intact, the token names where they exist, and the colours that only appear on hover — takes a slightly different approach.

Updated September 2026 · by the Design Toolkit team

1. Get the whole palette at once

Picking colours one at a time with an eyedropper means you find the obvious ones and miss the rest — the border grey, the muted text, the hover fill, the state colours you never triggered.

A page palette tool walks every element, collects the colours the CSS actually declares, and groups them. Design Toolkit lists them by role — text, surfaces, borders, accents — with the alpha preserved rather than flattened, and shows how often each one appears, so the two or three that carry the design separate themselves from the fifty one-offs.

Free alternatives: ColorZilla's page analyser and CSS Peeper's palette view both do a version of this. Both give you flat hex codes.

2. Read the custom properties

This is the part most guides skip, and it is the best answer on any modern site.

You can also list them from the console:

const style = getComputedStyle(document.documentElement);
[...document.styleSheets].flatMap(sheet => {
  try { return [...sheet.cssRules]; } catch { return []; }
})
  .filter(rule => rule.style)
  .flatMap(rule => [...rule.style])
  .filter(name => name.startsWith('--'))
  .forEach(name => console.log(name, style.getPropertyValue(name)));

Stylesheets served from another origin without CORS headers will throw, which is why the try is there — you get whatever is readable.

3. Do not miss the state colours

A static scan sees the page at rest. It never sees the button's hover fill, the input's focus ring, the link's visited colour or the error red that only appears on a failed form — and those are often the most characteristic colours in the whole system.

Two ways to get them:

• Force the state. In DevTools, select the element, open :hov in the Styles panel, and tick :hover or :focus. The styles update and you can read the colours.
• Read the state rules directly. An inspector that reports what changes on hover gives you the before and after without forcing anything — useful when hovering the element would have dismissed it, as with a dropdown or a tooltip.

Why your extracted palette looks wrong

The single most common failure. A card defined as rgba(255, 255, 255, 0.06) over a near-black page samples as roughly #161616. That grey is correct on screen and wrong everywhere else — put it on a lighter background and the card disappears, because the original was never a grey. It was a translucent white layer that takes its character from whatever sits behind it.

Anything that samples pixels flattens this. To keep it, you need the authored value — from DevTools, or from a reader that reports alpha as declared. Same story with mix-blend-mode, gradients and backdrop filters.

Colours inside images and logos

No CSS, nothing to read. Here an eyedropper is the correct tool, or an image-palette extractor that clusters the pixels into dominant colours. Sample from a few different points — a logo rendered as a JPEG has compression artefacts and the pixel you land on may be a couple of steps off the brand colour.

Common questions

Read next