Octet ProwBETA
Sign inStart free trial
FREE TOOL · NO SIGN-UP

Extract colors from any website URL

Paste a website address to extract the color palette its CSS uses, with HEX, RGB and HSL values and where each color appears. Copy it as CSS variables, a Tailwind theme or JSON.

Try it on one of our demo pages:

We read the page’s public HTML and stylesheets, follow the site’s robots.txt and don’t keep the results.

HOW IT WORKS

How the color extractor works

  1. 01

    Read the CSS

    It loads the page you enter and the stylesheets it links to.

  2. 02

    Count every color

    It collects the colors the CSS uses for backgrounds, text, borders and icons, and orders them by how often the styles use them.

  3. 03

    Sort and check

    Colors with little saturation become backgrounds and text, the rest brand and accent colors. Text colors are then checked against background colors for contrast.

It reads one page and doesn’t run the page’s JavaScript, so colors a script adds after loading, and colors inside photos or illustrations, won’t show up. The percentages count style rules, not how much of the screen a color covers.

More free tools

Related guides

How to keep every landing page on brand: colours, type and spacing →How to make every landing page match your brand’s colours, fonts and spacing: what to fix first, what to write down, and how to check a page before launch.What a design system is for landing pages, and when you need one →What a design system for landing pages contains, how it differs from a brand kit, when it is worth making one and how to keep it up to date.
QUESTIONS

About the color extractor

How do I get the color palette from a website URL?

Paste the address in the box above and select Extract. The tool reads that page’s CSS and shows every color it uses, grouped into brand colors and background and text colors, with HEX, RGB and HSL values you can copy.

How do I find the HEX code of a color on a website?

Extract the site’s colors here and click any color to copy its HEX code. To check a single element, right-click it in your browser, choose Inspect and read its color in the Styles panel.

Is the color extractor free?

Yes, and there’s no sign-up. Each visitor can run 10 extractions an hour across our three free tools.

How is the contrast checked?

We put each color the site uses for text on the colors it uses for backgrounds and calculate the WCAG contrast ratio. 4.5:1 passes AA for body text and 3:1 passes for large text. These are possible combinations, not necessarily ones the site uses together.

Can it pick colors from an image or a logo?

No. It reads a website’s CSS, not its images. To take a color from a logo or a photo, use an image color picker instead.

Which formats can I copy?

Each color as HEX, RGB or HSL, and the whole palette as CSS custom properties, a Tailwind CSS theme block or JSON. You can also download the palette as a file.

Why are some colors missing?

The tool reads the CSS the page ships with. Sites that add their styles with JavaScript after loading, or use colors only inside images, show fewer results.

Do you store the sites I check?

No. The result is shown to you and not saved.