New Chrome extension: Design inspiration in every new tab →
A1 Gallery

Free website colour palette extractor

Get the colours, greys and gradients from any website, then copy them as hex, CSS variables or a Tailwind theme. Free, no sign-up.

Or try an example: , ,

Example result: 33 colours. A dark palette with pink and lime accents

A dark palette with pink and lime accents

Colours (12)

Neutrals (8)

Gradients (2)

How to get the colours from a website

It takes one link and a few seconds. The tool reads the site’s stylesheets, so you get the exact hex codes the designer wrote, not a guess from a screenshot.

  1. Paste the website link

    Any public page works: a homepage, a pricing page, a blog post. Press “Get colours”. The tool fetches the page and every stylesheet it links, up to 60 files.

  2. Read the board

    The top block is the colour scheme: the page background, the main text colour and up to three accents. Under it sit the greys as one ramp from light to dark, the supporting colours by hue, and any gradients. Each swatch says what the site uses it for and how often.

  3. Click a colour to copy its hex code

    One click copies the value. Switch between HEX, RGB, HSL and OKLCH at the top of the board first if you need another format. Gradients copy as a full CSS linear-gradient.

  4. Export the whole palette

    The export card gives you the palette as CSS variables, a Tailwind 4 @theme block or JSON. The Figma tab copies an SVG: paste it on a canvas and the swatches arrive as named layers. Need the type scale and spacing too? Run the same link through the design token extractor.

  5. Check the contrast, then find more like it

    The contrast card tests the text and the accent against the WCAG levels, so you know the scheme is readable before you borrow it. Then browse real sites by colour in A1: blue websites, green websites, black websites or every colour.

Frequently asked questions

Paste the link above and press “Get colours”. The tool fetches the page and its stylesheets, reads every colour in the CSS and counts how often each one is used. You get the background, the text colour, the accents, the greys and the gradients, each one click from your clipboard.

Run the site through the tool, then click the swatch you want. That copies the hex code. If you’d sooner do it by hand, right-click the element in your browser, choose Inspect and read the colour in the Styles panel.

Look at the top block of the result. It names the page background, the main text colour and the accent colours, which together are the colour scheme. The greys and supporting colours sit below it.

It counts where each colour is used. The colour on the page body is the background. The text colour is the one the body sets, if it reads clearly on that background. An accent is a real colour, not a grey, which the site uses on buttons and links or names “brand” or “primary” in its own CSS.

No. The tool reads CSS, not pixels. A colour inside a photo, a video or an image file isn’t in the stylesheet, so it won’t show up. Colours set on inline SVG logos are included.

A stylesheet covers the whole site, not one page. It holds colours for hover states, error messages and pages you haven’t opened. The number under each swatch tells you how much the site leans on it.

Yes. If the page ships with its dark theme switched on, you get the dark palette. If a site has both themes, you get the one a new visitor sees first, and the other theme’s colours count for less.

Yes. The export card gives you CSS variables, a Tailwind 4 @theme block, JSON, or an SVG to paste into Figma. Pick a colour format first and the code follows it. For spacing, radius and type sizes, use the design token extractor.

They’re the two pass levels in the WCAG accessibility guidelines. AA needs a contrast ratio of 4.5 to 1 between text and its background. AAA needs 7 to 1. Large text passes AA at 3 to 1.

Yes. It’s free, with no sign-up and no limit on palettes. There’s a rate limit to stop abuse, and nothing you check is stored. To see which typefaces a site pairs with its colours, try the font finder.

More free tools

All tools →