Skip to content
Color Palette Extractor

Colors from a URL

Website Color Extractor

Website Color Extractor reads a website's HTML and CSS from its URL and returns the site's color palette: the brand color, accents, backgrounds, text and borders, with each color's CSS variable and share of use.

  • Free, no signup
  • Reads real CSS and variables
  • Nothing is stored
Extract from

Site blocked? Paste its HTML or CSS

How does the website color extractor work?

The website color extractor downloads a page and its stylesheets, reads every color value in the code, and ranks the colors by where and how often the page uses them.

  1. Enter an address

    Type a domain such as example.com or paste the full URL of any public page. The extractor fetches the page and up to 25 of its stylesheets.

  2. Stylesheets are parsed

    Every color syntax is read: hex, rgb, hsl, hwb, lab, lch, oklab, oklch, color() and the 148 named colors. CSS variables resolve to their values.

  3. Colors get roles

    The CSS property sets each color's role: background, text, border, fill or shadow. Rules that match elements on the page count three times.

  4. Copy the palette

    The brand color leads, followed by accents, backgrounds and text colors. Export the palette as CSS, Tailwind or design tokens.

How does the extractor find a site's brand color?

The brand color is the most-used saturated color that appears on buttons, links or CSS variables named for the brand.

  • Saturation. Only colors with an OKLCH chroma of 0.05 or more qualify as brand or accent colors. Grays and near-grays count as neutrals.
  • Placement. Colors in selectors such as .btn, button, a and .cta gain weight.
  • Naming. Variables such as --primary, --brand and --accent gain weight.
  • theme-color. A <meta name="theme-color"> value that matches a CSS color adds a strong brand signal.
How CSS properties map to color roles
RoleCSS properties
Backgroundbackground, background-color, gradients
Textcolor, text-decoration-color, caret-color
Borderborder, outline, column-rule
Fillfill, stroke, stop-color, accent-color
Shadowbox-shadow, text-shadow (listed, left out of the main palette)

How does it separate used colors from unused CSS?

The extractor gives three times the weight to CSS rules whose selectors match elements in the page's HTML. CSS frameworks ship many colors that a page never uses, and selector matching keeps those colors from outranking the real design.

  • :hover and :focus colors count at half weight, because they appear only during interaction.
  • @media print rules are ignored.
  • Colors under 35% opacity are skipped as overlays and tints.
  • Colors closer than ΔE_OK 0.02 merge into one swatch that lists its variants.

Does the extractor find dark mode colors?

Yes. Rules inside @media (prefers-color-scheme: dark) and rules under selectors such as .dark or [data-theme="dark"] form a separate dark mode palette.

Dark values of CSS variables replace the light values when the extractor resolves a dark rule, so the dark palette shows the colors a visitor sees in dark mode.

Which colors can the website extractor not read?

The website extractor reads the code a server sends, so three kinds of color stay out of reach.

  • Runtime styles. CSS-in-JS libraries inject styles after the page loads in a browser.
  • Image colors. Colors inside photos, raster logos and videos are pixels, not CSS. The extractor reads the site's logo and icon colors separately.
  • Protected sites. Sites behind bot protection refuse automated requests.

For these cases, paste the page's HTML or CSS into the code box, or take a screenshot and drop it into the Color Palette Extractor. The guide How to find the colors a website uses also covers browser DevTools methods.

Who uses a website color extractor?

  • Designers

    Audit a client's current brand colors before a redesign, or study the palette of a reference site.

  • Developers

    Recover a site's color tokens and variable names to rebuild a theme.

  • Marketers

    Match landing pages, ads and emails to the colors of the main website.

  • Accessibility reviewers

    Test the site's text and background pairs against WCAG contrast thresholds in the Contrast tab.

Website color extractor FAQ

Why are some colors of the site missing?

Colors applied by JavaScript at runtime, colors inside images and colors on pages behind a login do not appear in the HTML and CSS the server sends.

Can I extract colors from a site that blocks bots?

Yes, with a fallback. Open the site in your browser and paste its HTML or a stylesheet into the code box, or upload a screenshot to the image extractor.

Does the extractor store the websites I check?

No. The server fetches the page and its stylesheets for your request and keeps no copy. The color analysis runs in your browser.

What does the percentage next to a color mean?

The percentage is the color's share of weighted CSS usage on the page. It measures how often the code uses the color, not how much screen area the color covers.

Can I check a page other than the homepage?

Yes. Enter the full URL of any public page, for example example.com/pricing.