What colors does this website use?
Paste a URL to pull its whole color palette out of the CSS: every hex code with its role, the WordPress theme.json colors, gradients, and a contrast check. Click any swatch to copy it.
Extracting colors from
Fetching the page and its stylesheets, reading color values and theme palettes...
A site's whole color system, in one look
Not just a grid of hex codes. The report tells you which color does what, and hands it to you in the format you are about to paste it into.
Every color, click to copy
The full palette as swatches, each with hex, rgb and hsl on a toggle. Click any swatch to copy the value in the format you picked.
Which color does what
Background, body text, brand, accent and border, inferred from how often each color appears and on which properties — so you can tell the palette from the noise.
WordPress theme.json palette
Block themes declare their colors as presets. We list them by name and slug — the palette the theme designer actually chose, not just what shows up on the homepage.
Page builder globals
Elementor, Astra, Kadence, Blocksy, Bricks, GeneratePress and Tailwind all publish their palettes as CSS variables. We name the framework and list its colors.
Contrast, checked
WCAG 2.1 ratios for the pairs that matter: body text on the background, the brand color on the background, and white or black on a brand-colored button.
Export in your format
Copy the palette as CSS custom properties, SCSS variables, a Tailwind color block, or JSON — plus a free PDF of the whole report for a client deck.
How to get a website's color palette
No install, no eyedropper, no DevTools. Three steps and about five seconds.
1. Paste the URL
Type any domain. We normalise it for you, so example.com and https://example.com both work.
2. We read the CSS
Our server fetches the page and its stylesheets, reads every color value, resolves custom properties like --brand, and finds the theme's declared palette.
3. Copy the palette
Click a swatch to copy it, or export the whole palette as CSS, SCSS, Tailwind or JSON. Save the report as a PDF — free, no email.
"What color is that?" — three ways to answer it
Each route gets you a color. Only one gets you the palette.
1. The eyedropper (fast, but it lies)
Every modern browser and design app has a color picker. Point it at a button, get a hex code.
The catch is that you are sampling rendered pixels, not declared colors: what you pick up
includes any overlay, opacity, gradient, shadow, JPEG compression, or image behind the element.
A brand color of #10b981 sitting under a 90% white overlay samples as something that
is in no stylesheet anywhere. It is fine for a rough match and wrong for a rebuild.
2. DevTools (accurate, but one value at a time)
Open the inspector, select an element, read background-color in the styles pane.
This gives you the real declared value, and the Computed tab even resolves the cascade for you.
It is the right tool when you want to know about one element. It is a slow way to
answer "what is this site's palette?", because you have to know which elements to click, and
the colors that define a design system — the ones sitting in :root as custom
properties, used in a dozen places — are exactly the ones you will not find by clicking around.
3. Read the CSS itself (what this tool does)
A site's palette is not spread across its pixels; it is written down, usually in one place. We
fetch the page and its stylesheets, pull out every color literal, resolve var(--brand)
style references back to real values, and count how often each color appears and on which
properties. That last part is what turns a list into a palette: a color declared on 40
background rules is the page's canvas, and a saturated color used on links and
buttons is the brand.
On WordPress there is an even better source. Block themes declare their palette in
theme.json, which WordPress prints into the page as
--wp--preset--color--primary and friends; page builders like Elementor and Astra do
the same thing with their own variable names. Those are not inferred at all — they are the
designer's palette, named, straight from the theme. When a site has one, it gets its own section
in the report. Want to know which theme wrote it? Run the same URL through the
Tech Stack Report, or check the
fonts while you are here.
What people do with a color report
Six reasons a designer or developer pastes a URL in here.
Match a client's existing brand
The client has a live site and no brand guide. Extract the palette in one pass and start the new design from their actual colors instead of a screenshot approximation.
Rebuild a design you admire
You like how a site looks and want the colors it is built on, complete with the neutral scale — the grays are usually the part that makes a palette work.
Seed a design system
Export straight to CSS custom properties, SCSS variables or a Tailwind config and paste it into a fresh project as the starting token set.
Audit contrast before a launch
See whether the body text and brand-colored buttons clear WCAG AA, before an accessibility review tells you they don't.
Check a competitor's positioning
Colors are strategy. Pull the palettes of five competitors, put them side by side, and pick the space nobody in the category is occupying.
Find the theme's real palette
On WordPress, see the theme.json presets and builder globals by name — the colors the theme intended, which is what you want before customising it.
Honest about what we can and can't see
The extractor reads the same public HTML and CSS your browser downloads. Here's what that means.
What we detect reliably
Every declared color value in the fetched CSS — hex, rgb, hsl, oklch and named — plus custom properties, WordPress theme.json presets, builder palettes, gradients and the theme-color meta tag.
What's a judgement call
The roles. Which color is "the brand" is inferred from how often it appears and on which properties, and near-identical shades are grouped so one palette entry isn't thirty grays. Both are heuristics, and the report shows its working.
What we can't see
Colors inside images, video or canvas, anything painted by JavaScript after load, computed results of the cascade, and stylesheets beyond our fetch cap on very heavy sites. When that happens, the report tells you instead of pretending.
Why not just use an eyedropper?
You can — but a picker samples pixels, and a palette lives in the CSS.
| What you want | Eyedropper / picker | DevTools by hand | This tool |
|---|---|---|---|
| The whole palette at once | One pixel at a time | One element at a time | Yes |
| Exact declared values | Sampled, overlays included | Yes | Yes, from the CSS |
| Colors behind CSS variables | No | Manual digging | Resolved for you |
| WordPress theme.json palette | No | Manual | Named and listed |
| Contrast ratios (WCAG) | No | Per pair | Computed for key pairs |
| Works on mobile / no install | Desktop only | Desktop only | Any browser |
| Export to CSS / Tailwind / JSON | Copy by hand | Copy by hand | One click |
Why color is worth checking
It is the first thing a visitor processes, and the thing most sites get wrong for accessibility.
Sources: WebAIM Million (2025), W3C WCAG 2.1, Colour Blind Awareness, W3Techs (2026). Figures rounded.
Frequently Asked Questions
How do I find out what colors a website uses?
Paste the site's URL above. The extractor fetches the page and its stylesheets server-side, reads every color value in the CSS, resolves custom properties like --brand back to real values, and groups the result into a palette. You get each color as hex, rgb and hsl, with the roles it is used in — no extension, eyedropper or DevTools knowledge needed, on any device. For the manual eyedropper method, and how colors fit into a full design teardown, see our guide on reverse-engineering a WordPress design.
Is the color palette extractor free?
Yes, completely. The full palette, the WordPress colors, the contrast checks, all four export formats and the PDF are free with no signup and no email. Fair-use rate limiting is the only cap.
Can I export the palette to CSS or Tailwind?
Yes. Every report includes copy-ready CSS custom properties, SCSS variables, a Tailwind theme.extend.colors block and plain JSON. Colors that map to a known role (background, text, brand, accent, border) or to a WordPress preset keep their names in the export, so the output reads like a design system rather than color-1 through color-12.
What is a WordPress theme.json color palette?
Block themes define their colors in a theme.json file, which WordPress outputs as CSS custom properties like --wp--preset--color--primary. That is the palette the theme's designer actually chose, rather than whatever happens to appear on one page, so it gets its own section in the report. We do the same for page builder palettes from Elementor, Astra, Kadence, Blocksy, Bricks and GeneratePress. To find out which theme wrote them, run the URL through our Tech Stack Report.
Does it check color contrast for accessibility?
Yes. We compute WCAG 2.1 contrast ratios for the pairs that matter — body text on the page background, the brand color on the background, and white or black text on a brand-colored button — and mark each as passing or failing AA (4.5:1), AA Large (3:1) and AAA (7:1). It is a useful first pass, not a full audit: only the pairs we can infer are checked, and real pages combine colors in ways a static scan cannot enumerate.
Does it support oklch and modern CSS colors?
Yes. Alongside hex (3, 4, 6 and 8 digit), rgb()/rgba() in both legacy and modern syntax, hsl() and named colors, we convert oklch() and oklab() to sRGB. That matters more each year: Tailwind v4 and many current themes emit oklch, and a tool without the conversion would report those sites as having almost no colors. Values built with color-mix(), lab() or lch() are flagged in the report rather than silently dropped.
Why is a color I can see on the page missing?
Usually one of three reasons: it comes from an image or video rather than the CSS; it is applied by JavaScript after the page loads; or it lives in a stylesheet past our fetch cap on a very heavy site. Near-identical shades are also grouped into one swatch, so a color one step off another may be listed as its variant rather than separately. The report's summary line tells you how much CSS was actually read.
Can I check a site that isn't WordPress?
Yes. Color extraction works on any website — the CSS is the CSS. The WordPress-specific extras (theme.json presets, the WordPress badge) simply stay empty elsewhere. Not sure what a site runs on? Try Is It WordPress? first.
Take the palette. Build the thing.
Extract any site's colors in seconds — then add the free extension to see themes and plugins on every WordPress site you visit.
Or add the free Chrome extension, rated 5.0/5 on the Chrome Web Store.