--- title: "Website Color Palette Extractor: Get Any Site's Colors" description: "Enter any URL to extract its color palette: every hex, rgb and hsl value, the background, text and brand colors, WordPress theme.json palettes, gradients, and WCAG contrast. Free, instant, no extension." canonical_url: "https://themesniffer.com/tools/wordpress-color-palette/" author: "Ruslan Saifullin" source: "Generated from HTML by scripts/build-markdown.mjs — do not edit by hand." --- Free Color Tool # 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. **100% free**, no signup **Private**: no site data stored Results in **~5 seconds** The Report ## 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. Guide ## "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](https://themesniffer.com/tools/wordpress-tech-stack/), or check the [fonts](https://themesniffer.com/tools/wordpress-font-detector/) while you are here. Use Cases ## What people do with a color report Six reasons a designer or developer pastes a URL in here. Case 01 ### 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. Case 02 ### 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. Case 03 ### 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. Case 04 ### 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. Case 05 ### 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. Case 06 ### 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. How it works ## 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. Compare ## 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. ~79% of home pages have low-contrast text somewhere 4.5:1 minimum contrast for normal text under WCAG AA 21:1 the highest ratio possible — pure black on pure white ~300M people worldwide have some form of color vision deficiency ~43% of all websites run WordPress ~5s from pasted URL to a full color report here Sources: WebAIM Million (2025), W3C WCAG 2.1, Colour Blind Awareness, W3Techs (2026). Figures rounded. FAQ ## 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](https://themesniffer.com/blog/reverse-engineer-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](https://themesniffer.com/tools/wordpress-tech-stack/). **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?](https://themesniffer.com/tools/is-it-wordpress/) first. ## Guides that go with this tool Colors are one layer of a site design. Here is how to read the rest of it. #### Read the method - [How to reverse-engineer a WordPress design](https://themesniffer.com/blog/reverse-engineer-wordpress-design) - Decode the typography, colors, spacing and page builder behind a site, then rebuild it as your own. - [How to check a WordPress site tech stack](https://themesniffer.com/blog/how-to-check-wordpress-tech-stack) - Theme, plugins, hosting, CDN and speed - all five layers in one pass. - [The most popular WordPress themes](https://themesniffer.com/blog/most-popular-wordpress-themes) - Market share data from 50,000 sites, and what those numbers do and do not tell you. #### More free tools - [Font Detector](https://themesniffer.com/tools/wordpress-font-detector/) - Every font family a page loads, with weights, sources and where each one is used. - [WordPress Tech Stack Report](https://themesniffer.com/tools/wordpress-tech-stack/) - Theme, plugins, hosting, CDN and a speed snapshot for any URL, with a downloadable PDF. - [Is It WordPress? Checker](https://themesniffer.com/tools/is-it-wordpress/) - Confirm the platform in one paste before you spend time digging deeper. ## 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. [Extract colors free](https://themesniffer.com/tools/wordpress-color-palette/#cp-form) [Or add the free Chrome extension](https://chromewebstore.google.com/detail/wordpress-theme-detector/jmfelpjpndlbhbpffecppfhnfjkamiaa?utm_source=color_palette_tool&utm_medium=website&utm_campaign=bottom_cta), rated 5.0/5 on the Chrome Web Store.