How to use
01
Enter the URL and press Extract brand colors
The tool fetches the HTML, then every linked stylesheet, then parses the rules for color values. A status note shows while it scans, and the whole pass usually takes 5 to 20 seconds.
02
Review the three tabs
From CSS lists every unique color ranked by usage count. From OG image shows an 8-color quantized palette pulled from the social image. Grouped sorts swatches into roles like brand color, accents, and neutrals.
03
Copy the values you need
Each swatch has a copy button for its hex code, and Copy all grabs the entire ranked list as comma-separated values. Translucent colors carry an alpha badge so you know they're not solid.
Why Brand Color Extractor
- Reads every linked stylesheet and inline <style> block, not just one image.
- Extracts every color in the site's CSS (hex / rgb / rgba / hsl / named), normalized to hex.
- Groups by role: brand color, accents, neutrals, black/white.
- Ranks by usage count, so the most-used brand color floats to the top.
- Also includes an image-based palette from the OG image as a supplement.
Common questions
How does the Brand Color Extractor rank the colors it finds?
By CSS usage count, so the value declared most often across all scanned stylesheets floats to the top. Before ranking, near-identical hexes within a small per-channel tolerance are merged into one entry and their counts combined, which stops build-time rounding from splitting a single brand blue into six swatches.
What do the role groups mean for the brand colors?
The Grouped tab classifies each swatch by lightness and saturation: saturated mid-range values become Brand color, very dark or very light saturated ones become Dark accent or Light accent, low-saturation values become Neutral, and extremes land in the black and white buckets. It's a quick way to separate the identity colors from the utility grays.
Can it get website color palette swatches when the brand colors live in images, not CSS?
Partly. The From OG image tab runs an 8-color quantization over the page's social image, favicon, or first image, which catches brands whose identity mostly shows up in photography. Treat it as a supplement, though: the CSS tab is the ground truth for what the site actually ships in code.
Why do some brand color swatches show an alpha percentage?
Those came from rgba or hsla declarations with transparency below 100 percent. The badge shows the alpha so you don't copy a 20 percent overlay tint and treat it as a solid fill. The hex shown is the base color with the alpha noted separately.
Does it catch brand colors defined as CSS variables?
Yes, because it scans the raw stylesheet text, a declaration like --color-primary: #0F62FE is picked up where the literal value appears. Places that reference the token through var() don't hold a literal color, so counts reflect declared values rather than every downstream use.
What happens if some stylesheets are blocked during brand color extraction?
The summary bar reports how many stylesheets were scanned and how many were blocked, so you know exactly what the palette is based on. Some CDNs refuse server-side fetches. The colors you see come from everything that loaded, which is usually the bulk of the site's CSS.
How many brand colors will the results display?
The From CSS tab renders the top 60 swatches and tells you the total count if there are more. The summary above the tabs also reports unique colors found, stylesheets scanned, inline style blocks read, and total kilobytes of CSS parsed.