Paste CSS code to extract all colors. Click any swatch or value to copy. Press Ctrl+Enter to extract.
Frequently Asked Questions
How does the CSS color palette extractor work?
The CSS Color Palette Extractor parses your CSS code client-side using regular expressions to find all color values including hex codes (#fff, #ffffff, #rrggbbaa), rgb(), rgba(), hsl(), hsla(), and CSS named colors. It then normalizes them, removes duplicates, counts frequency, and groups them by CSS property type (backgrounds, text, borders, etc.). All processing happens in your browser — no code is sent to any server.
What color formats can the extractor detect?
The extractor detects all standard CSS color formats: 3-digit hex (#fff), 6-digit hex (#ffffff), 8-digit hex with alpha (#ffffffaa), rgb() and rgba() functional notation, hsl() and hsla() functional notation, and all 148 CSS named colors (like red, cornflowerblue, rebeccapurple, etc.). Each extracted color is shown with its hex, RGB, and HSL representations.
How are colors grouped by category?
Colors are automatically categorized based on the CSS property they appear in. Background colors (background, background-color) are grouped together, as are text colors (color), border colors (border, border-color, outline), shadow colors (box-shadow, text-shadow), and other properties. This helps you see how colors are distributed across different design roles in your stylesheet.
What does the similar colors detection feature do?
The similar colors detection analyzes all extracted colors and identifies pairs that are very close in hue, saturation, and lightness but not identical. These near-duplicate colors often indicate inconsistencies in a design system — for example, using #333333 in some places and #343434 in others. Consolidating similar colors reduces CSS file size and improves visual consistency.
Can I export the extracted palette?
Yes, you can export the extracted color palette in four formats: CSS custom properties (:root variables), Sass/SCSS variables, a JSON object, or a Tailwind CSS config theme. Each format uses auto-generated semantic names based on the color's hue and lightness. You can copy the export code with one click and paste it directly into your project.
📄 Embed this tool
Add this CSS color palette extractor to your own website:
<iframe src="https://devtoolbox.dedyn.io/tools/color-palette-extractor" width="100%" height="700" style="border:none;border-radius:8px" title="CSS Color Palette Extractor"></iframe>