Guides CSS
How to extract a website's colour palette
Install Verbatim, the free Chrome extension, and open the page. Press Alt+Shift+P and choose Design system for the whole palette, or Sample a colour for one pixel. The panel lists every colour the page uses, ordered by how much of the screen each one actually covers, with its role named and a contrast check, exportable as Tailwind @theme, CSS variables or W3C design tokens.
What you need first
Verbatim is a free Chrome extension that reads the CSS actually applying to a live page, by resolving the cascade rather than dumping computed styles. Thirteen tools sit on a toolbar inside the page itself, not in a popup: pick an element, measure it, pull the palette and type scale, turn the page into a prompt, or hand any of it to a coding agent.
It is free forever with no account and no sign in, nothing is uploaded anywhere, and it works in Chrome, Edge, Brave, Arc and Opera. Install it, then follow the steps below on any page, including one behind a login.
Why coverage beats counting
Most palette extractors count. They parse the stylesheet, tally how often each colour appears, and sort by frequency. That produces a confident list in the wrong order.
A colour declared in forty rules that only ever paints a 2px border is not a primary colour. A colour declared once on body is most of what you are looking at. Counting declarations measures how the CSS was written; measuring coverage measures what the page looks like.
So the list here is ordered by how much of the screen each colour actually covers, which puts the background first, the surfaces next, the text after that, and the accents where they belong: last, and few. If the ordering surprises you, the ordering is usually right and the impression was wrong.
The ways to get a palette off a page, compared
| Method | What you get | What goes wrong |
|---|---|---|
| Screenshot into a palette generator | Five or six colours sampled out of an image. | They are averages of compressed pixels, not the values. Anti-aliasing, overlays and JPEG artefacts all shift them, and none of them are the hex the site actually declared. |
| An eyedropper extension | One exact colour at a time, from where you clicked. | No inventory and no roles. Twelve clicks later you have twelve hexes and no idea which is the surface and which is a one-off. |
Reading :root in the stylesheet |
The tokens the team declared. | What they declared is not what they use. Half are unused, others are overridden, and colours hardcoded outside the token set are invisible. |
| A CSS parser that counts declarations | Every colour in the stylesheet, ranked by how often it appears. | Ranked by how the CSS was written rather than by what the page looks like, and it includes colours on pages you are not looking at. |
| Measuring painted coverage | Every colour actually painting, ordered by screen area, with roles named, contrast checked and exportable as tokens. | It describes this page. A different page on the same site may use a different slice of the same system. |
How to extract a colour palette, step by step
Two tools, depending on whether you want the system or one value.
- Add Verbatim to Chrome. It is a free extension, there is no account and no sign in, and it works in Chrome, Edge, Brave, Arc and Opera.
- Open the page and press Alt+Shift+P, or click the Verbatim icon.
- Choose Design system. It reads every stylesheet on the page, including cross-origin ones, and every element that uses them.
- Read the colour list. It is ordered by coverage, so the first rows are the page background and surfaces and the last are accents used once.
- Filter by role if you only want one kind: background, text, accent or border.
- Choose an export format: Tailwind
@theme, CSS custom properties, or W3C design tokens. - For one specific colour instead, choose Sample a colour and click any pixel, including inside an image, a canvas or a video.
Design system is the panel; Sample a colour is the eyedropper. The eyedropper uses Chrome's own, so it reads any pixel on screen including inside images, canvas and video, which no CSS-reading tool can do.
Roles, not just hexes
A list of hexes is not a palette. What makes it usable is knowing what each one is for, and that comes from where the colour is painting rather than from its name.
- Background and surface: the page ground and the raised areas on it, which are usually the two largest by coverage and the two that set the whole feel.
- Text: the body colour and its dimmer variants, which is where a design usually has more values than anyone intended.
- Accent: the primary action colour. Real designs have one or two. A list that shows six is telling you something.
- Border: rules and outlines, often one hairline value doing all the work.
The site's own custom property names come through where they exist, so if the team called it --brand-600 you see that alongside the value, which makes the export drop into your own tokens with far less renaming.
Checking contrast while you are there
The panel runs a WCAG contrast check on the text colours against the surfaces they sit on, and reports the ratios.
Use it in both directions. Auditing your own page, it is the fastest accessibility pass available: the failures are listed with the pair that failed. Borrowing from someone else's page, it tells you whether the palette you admire actually passes, because plenty of admired palettes do not, and inheriting a 3.1:1 body text is inheriting a problem.
Formats, and getting it into your project
Colours copy as hex, rgb() or oklch(), and the last one is worth a moment. OKLCH is perceptually uniform, so lightening a colour by adjusting one number produces a result that looks lightened rather than washed out. If you are building a scale from a colour you sampled, it is the format to build it in.
Three exports for the whole palette:
- Tailwind
@theme, which drops straight into a v4 project. See converting a website's CSS to Tailwind for the component side of the same job. - CSS custom properties, for a plain
:rootblock. - W3C design tokens, the JSON format, for a token pipeline or a Figma import.
If you want the palette as part of a whole-page brief for a model rather than as code, that is turning a website into an AI prompt, which carries the palette, the type scale and the section order in one document.
Questions
How do I extract the color palette from a website?
Open the page, press Alt+Shift+P and choose Design system. The panel lists every colour the page actually paints, ordered by how much of the screen each one covers, with its role named and its contrast checked, and exports as Tailwind @theme, CSS variables or W3C design tokens.
How do I get the exact color of a button or background?
Choose Sample a colour and click it. It uses Chrome’s own eyedropper, so it reads any pixel on screen including inside images, canvas and video, and copies as hex, rgb or oklch. For a colour that comes from CSS rather than a pixel, picking the element shows the declared value and the token it came from.
Why is a screenshot palette generator inaccurate?
Because it averages compressed pixels. Anti-aliasing, overlays, shadows and image compression all shift the sampled value, so what you get is close to the colour rather than the colour. Reading the page gives you the value the site declared.
Can I export the palette as design tokens?
Yes, in three formats: Tailwind @theme for v4, CSS custom properties, and W3C design tokens as JSON for a token pipeline or a Figma import.
Does it find colours that are not in :root?
Yes. It measures what actually paints, so hardcoded colours outside the token set are included, and declared tokens that nothing uses are not promoted above colours that are doing real work.
Can it check colour contrast at the same time?
Yes. The panel runs a WCAG check on text colours against the surfaces they sit on and reports the ratios, which doubles as an accessibility pass on your own page and a warning before you inherit someone else’s failing pair.
What is OKLCH and should I use it?
A perceptually uniform colour space, so adjusting lightness by one number produces a result that looks correspondingly lighter rather than washed out. If you are building a scale from a sampled colour, build it in OKLCH; for pasting one value into an existing codebase, hex is fine.