My Tool Studio
BrandURL-first

Website Color Extractor

This website color extractor pulls the colors a site really uses out of its CSS and gives you the hex codes. Paste a URL and it reads the page's HTML, up to 25 linked stylesheets and every inline style block, converts hex, rgb, hsl and named colors to hex, merges near-identical shades and ranks the rest by how often they appear. A Contrast tab checks the most readable text and background pairs against WCAG. Export the top colors as CSS or SCSS variables, a Tailwind config, JSON, a GIMP palette, Adobe .ase swatches, or an SVG or PNG swatch sheet. Designers use it to extract colors from a website before a redesign, and marketers use it to match a partner's brand in a co-branded deck.

Always freeNo sign upRuns in your browser

How to use

01

Enter the site URL

Paste the full address and click Extract brand colors. The scan fetches the HTML and the linked stylesheets on our server, which usually takes 5 to 20 seconds.

02

Review the tabs

From CSS ranks every color by usage, Grouped sorts them by role, Contrast lists readable pairs, and From OG image samples the social image. Use the slider to merge similar shades and switch values between HEX, RGB and HSL.

03

Copy or export the palette

Copy one value or all of them, or pick Top 5 to Top 48 and a format in the export box. Copy the code, or download it as a file such as example.com-colors.ase or a PNG swatch sheet.

Why Website Color Extractor

Finding a site's brand colors: this tool or DevTools

Both approaches read the same CSS, but they answer different questions. This tool gives you the whole palette of a site at once, ranked by use, without opening any code. Browser DevTools show you the exact color of one element as it appears on screen, including anything JavaScript changed after the page loaded.

A good routine is to run the extractor first to see the brand color, text color and background colors, then use DevTools to confirm one or two specific elements such as the main button.

  • Use this tool for the full palette of a site you do not control, ranked by usage, with values ready to copy or export.
  • Use DevTools (right-click, Inspect) for the exact color of one element, a hover state, or a color set by a script.
  • Use Color Palette from Image when the color lives in a photo or logo file rather than in CSS.

Export formats

Every export uses the same names, by role and rank, such as brand-1, dark-accent-1 and neutral-2, so code and design files stay in step.

FormatFileOpen it in
CSS variables.cssAny stylesheet, as a :root block
SCSS variables.scssSass projects
Tailwind config.jstailwind.config.js, under theme.extend.colors
JSON.jsonDesign tokens and scripts, with hex, rgb and hsl
GIMP palette.gplGIMP, Inkscape and Krita
Adobe swatches.asePhotoshop, Illustrator and InDesign
SVG or PNG swatch sheet.svg or .pngFigma, slides, briefs and email

Common questions

How do I find the exact colors a website uses?
Paste the URL into the Website Color Extractor and it lists every color declared in the site's CSS with a usage count. The top of the From CSS tab is usually the brand color, the background and the text color. For the exact color of one element, right-click it in your browser, choose Inspect, and read the Styles panel.
Can I get hex codes from a website without inspecting the code?
Yes. The tool reads the stylesheets for you and converts rgb, hsl and named colors to hex. Click Copy all to grab every value as a comma-separated list, or use the export box for code or a file.
Why are some colors missing from the website color results?
The tool only sees colors written in the CSS the server sends. Colors set by JavaScript after load, colors inside images or SVG files, stylesheets pulled in with @import, and stylesheets past the first 25 are not read. The summary bar also shows how many stylesheets blocked the request.
Can I extract colors from a logo image instead of a website?
This tool reads CSS, and its From OG image tab only samples the page's social image. For a logo or photo file you already have, use Color Palette from Image, which pulls the main colors out of any uploaded picture.
Can I export website colors to Adobe, Figma or Tailwind?
Yes. The export box writes Adobe Swatch Exchange (.ase) files for Photoshop, Illustrator and InDesign, GIMP .gpl palettes that Inkscape also reads, CSS and SCSS variables, a Tailwind config, JSON with hex, rgb and hsl, and SVG or PNG swatch sheets you can drop into Figma or a slide.
How does the contrast check in the color extractor work?
It pairs the top 8 colors with each other and with white and black, works out the WCAG 2 contrast ratio for each pair, and lists the pairs of 3:1 or more, highest first. AA needs 4.5:1 for body text and 3:1 for large text, and AAA needs 7:1.
How does the website color extractor rank the colors it finds?
By how many times each color appears across all scanned CSS. Before ranking, colors within a few steps of each other on every RGB channel are merged and their counts added. The Merge similar shades slider sets that distance, from off to 30 steps.
What do the role groups in the color extractor mean?
Each color is sorted by lightness and saturation. Very dark colors go to Black, very light ones to White, low-saturation colors to Neutral, and light or dark saturated colors to Light accent or Dark accent. Everything else is labeled Brand color.
Why do some website color swatches show an alpha percentage?
Those colors came from rgba, hsla or 8-digit hex values with transparency. The badge shows the alpha so you do not treat a 20 percent overlay tint as a solid fill. The value shown is the base color.
How do I turn the extracted website colors into a brand palette?
Pick one or two colors from the Brand color group, one dark neutral for text and one light neutral for backgrounds, and confirm the pair in the Contrast tab. Export them as CSS variables to start your stylesheet, or open the Color Palette Generator to build tints and matching accents.

More Brand tools

View all

Logo Extractor

Extract a website's logo

Brand
URL-first

Website Font Detector

Detect fonts used on a site

Brand
URL-first

Tech Stack Detector

Detect a site's tech stack

Brand
URL-first

Brand Asset Pack Downloader

Download a site's brand assets

Brand
URL-first