Free Website Color Palette Extractor

The Website Color Palette Extractor is a free online tool that extract the complete color palette from any website css. discover brand colors, text colors, and backgrounds. It runs entirely in your browser with no installation or sign-up needed.

Paste the CSS source code from a website and the tool will extract all color values used.

Yes, it detects CSS variables (--color-*) and their values.

Yes, completely free.

Absolutely. The Website Color Palette Extractor processes everything client-side in your browser. No data is uploaded to or stored on any server. Your content remains private on your device at all times.

Yes, the Website Color Palette Extractor is fully responsive and works on smartphones and tablets. You can use it on any device with a modern web browser -- no app download required.

No account or registration is needed. Simply open the Website Color Palette Extractor in your browser and start using it immediately. There are no sign-up walls or usage restrictions.

The Website Color Palette Extractor works in all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. For the best experience, use the latest version of your preferred browser.

Open the site in your browser, view its source or stylesheet (right-click and choose View Page Source, or open a linked .css file), copy the CSS, and paste it into the extractor. The tool reads the raw color values rather than sampling pixels from a screenshot, so the hex codes you get are the precise ones the designer defined, not approximations distorted by anti-aliasing or compression. It scans the properties where color lives -- background, color, border colors, fill, stroke, box-shadow, and outline -- plus CSS custom properties, then lists every unique color as a swatch you can click to copy. Because it works on pasted source, you can also analyze an internal or unpublished stylesheet that no screenshot tool could reach. Paste the CSS above to pull the full, exact palette in one click.

A screenshot color picker samples a rendered pixel, so the value you read can drift from the original because of anti-aliasing at edges, JPEG or PNG compression, monitor color profiles, and any opacity blending that happened during rendering. Extracting from CSS reads the literal value the author wrote -- for example #2563eb -- so it is exact and repeatable. CSS extraction also surfaces colors a screenshot can never show: tones defined only in hover states, dark-mode rules, disabled buttons, or components you never clicked into, since they all live in the source. The trade-off is that you need access to the stylesheet, whereas a picker works on any image. This tool takes the CSS route, deduplicating and converting every value to hex. Paste a stylesheet above to see every defined color, including the hidden ones.

Yes. The tool recognizes color values in every common CSS syntax and normalizes them all to hex so the results are consistent and easy to compare. It converts rgb() and rgba() functions, hsl() and hsla() functions, 3-digit shorthand like #f0a, full 6-digit hex, and named CSS colors such as crimson, teal, and gold back to a matched name. For 8-digit hex and rgba/hsla values that include an alpha channel, the alpha is dropped and only the underlying color is kept, since the goal is the palette rather than per-element transparency. Because everything ends up as one hex format, two values written differently -- say rgb(220, 20, 60) and #dc143c -- collapse into a single swatch with a combined usage count. Paste your CSS above and every supported format is unified into one clean hex palette.

A raw dump of forty hex codes is hard to reason about, so the extractor sorts each color by its lightness and saturation into four buckets. Very light shades become Light / Background colors, very dark tones become Dark / Text colors, low-saturation values become Neutral / Gray colors, and the remaining saturated tones become Accent / Brand colors. This mirrors how a real design system is structured and lets you instantly see a brand's signature colors versus its supporting grays. The grouping also exposes color sprawl: if the accent group holds three nearly identical blues, that usually means a single brand color was entered slightly differently in several places and should be consolidated. Each swatch keeps its hex code and usage count, and the most-used colors rise to the top. Paste a stylesheet above to see the palette organized this way automatically.

After extracting, open the Export Palette section and choose the CSS Variables format. The tool generates a ready-to-paste :root block where each color becomes a numbered custom property, like --color-1: #2563eb, so you can drop the whole set straight into a stylesheet and reference the tokens throughout your project. If you need the data elsewhere, switch to JSON Array to get each color with its hex, matched name, and usage count for scripts or design tooling, or Hex List for a plain comma-separated string that pastes cleanly into Figma, a swatch panel, or documentation. A copy button puts the chosen format on your clipboard in one click. This is handy for recovering tokens from a theme whose design file is long gone or documenting a brand before a redesign. Paste your CSS above, then export the format your workflow needs.