CSS Color Extractor

How to use

1. 1Paste CSS, HTML, JSX, JSON, or any text into the input area. Click Load sample to try the extractor with an example theme file.
2. 2Read the live stats card for total color references, unique colors, alpha colors, and the breakdown of hex, modern, and named formats.
3. 3Scroll the extracted palette to see each unique color with a swatch, the canonical hex, RGB, HSL, and OKLCH values, the closest CSS named color, and how many times it appears.
4. 4Use Sort by Count, Hex, Hue, or Lightness, and flip Descending or Ascending to reorder the table for the audit you are doing.
5. 5Turn off Include CSS named colors when your input contains color words used as prose, so red and white in copy do not appear as palette entries.
6. 6Click Copy hex, Copy RGB, or Copy OKLCH on any row, or grab the whole palette with Copy CSV or Copy CSS variables for design-token migration.

About this tool

CSS Color Extractor scans any text you paste, a stylesheet, an HTML page, a JSX file, a JSON theme file, even a code review comment, and pulls out every color it finds. It recognises hex codes in three, four, six, and eight digit forms, the legacy and modern syntax of rgb(), rgba(), hsl(), hsla(), plus the full CSS Color 4 functions hwb(), lab(), lch(), oklab(), oklch(), and color(). The complete CSS named-color list is matched too, so red, papayawhip, rebeccapurple, transparent, and the rest are caught. Every match is converted to a canonical sRGB triplet and an alpha value, then duplicates are merged: lowercase and uppercase spellings, three and six digit hex variants, and the named-color equivalent of the same triplet collapse into a single row with an accurate occurrence count. CSS block comments and JavaScript line comments are stripped before scanning so commented-out colors do not show up in the palette. Each row shows a live swatch (with a checkerboard background when there is transparency), the canonical hex, the rgb() and hsl() forms, the OKLCH equivalent (useful for modern design systems), and the closest CSS named color when one matches exactly. Sort by usage count to find the colors that drive the design, by hue to see the rainbow, by lightness to spot inconsistent grays, or by hex for a stable alphabetical view. Export the whole palette as CSV for spreadsheets, or as a ready-to-paste :root { --custom-property } block of CSS variables. Useful for auditing third-party CSS before integration, consolidating ad-hoc colors into a design token set, mapping legacy hex values to a Tailwind palette, generating swatch sheets for a brand review, checking how many alpha colors a stylesheet leans on, and any other task that begins with what colors does this code actually use. Everything runs in your browser; the text you paste, including any internal class names or production CSS, never leaves your device.

Free to use. Works in your browser. No signup, no login.