CSS Color Extractor

This tool extracts all standard CSS hex color formats: 3-digit shorthand (#rgb, e.g., #f00), 6-digit full (#rrggbb, e.g., #ff0000), and 8-digit with alpha (#rrggbbaa, e.g., #ff000080 for semi-transparent red). It automatically detects and validates each format, showing the expanded 6-digit version for shorthand colors alongside the original.

When Deduplicate is enabled (default), the tool groups identical hex colors and shows each unique color only once, along with a count of how many times it appears in your CSS. When disabled, every occurrence is listed individually in the order found. This is useful for auditing how many times a specific color is used across different selectors.

Yes! Use the Sort dropdown to arrange colors by appearance order (as they appear in the CSS), perceived brightness (light to dark or dark to light, calculated using WCAG relative luminance), or frequency (most used colors first). Sorting by brightness is especially helpful for designers checking color contrast and visual hierarchy.

Absolutely. The extractor automatically strips CSS comments (/* ... */) before scanning for colors, so commented-out colors won't appear in results. It also works perfectly with minified CSS — the regex-based extraction doesn't care about whitespace or formatting, making it ideal for analyzing production stylesheets, CDN-hosted CSS, or compiled output from preprocessors like Sass and Less.

You have multiple export options: Copy All copies every hex value (comma-separated) to your clipboard for pasting into design tools, documentation, or code. The JSON export button downloads a structured JSON file containing each color's hex value, expanded format, occurrence count, and brightness data — perfect for programmatic use or integration with design systems and token generators.

8-character hex colors (like #ff000080) include an alpha (transparency) channel as the last two digits. The format is #RRGGBBAA, where AA ranges from 00 (fully transparent) to FF (fully opaque). This CSS Color Level 4 feature is supported in all modern browsers and is commonly used for semi-transparent backgrounds, overlays, and shadows. Our tool flags these colors with a special alpha indicator.