Color Palette Extractor
Extract color palettes from CSS, SCSS, and HTML code
Input Code
Paste CSS, SCSS, or HTML code above to extract all color values into a visual palette.
Color Palette Extractor
Extract color palettes from CSS, SCSS, and HTML code
Features
- Extracts hex (#fff, #ffffff), RGB, RGBA, HSL, HSLA, and 148 named CSS colors
- De-duplicates colors and counts usage frequency across your code
- Sort palette by frequency, hue, or lightness
- Export as CSS variables, SCSS variables, or JSON
- Copy individual colors or the full palette with one click
- 100% client-side processing - no data leaves your browser
How to use
- Paste your CSS, SCSS, or HTML code into the text area.
- Colors are extracted automatically - hex, rgb, hsl, and named colors are all detected.
- Sort your palette by frequency, hue, or lightness.
- Click any swatch to copy its hex value.
- Choose an export format (CSS variables, SCSS, or JSON) and copy the full palette.
Tips & Best Practices
- Try the 'Sample CSS' button to see the tool in action with a realistic stylesheet.
- Sort by hue to see your color spectrum at a glance.
- Sort by frequency to find which colors dominate your codebase.
- Use the JSON export format to integrate colors into your build tooling.
- Paste an entire stylesheet to audit your project's color consistency.
FAQ
What color formats does it detect?
The tool detects hex colors (3-digit #fff, 6-digit #ffffff, and 8-digit with alpha), rgb(), rgba(), hsl(), hsla() functions, and all 148 standard CSS named colors like 'red', 'dodgerblue', 'coral', etc.
How are duplicate colors handled?
Colors that resolve to the same hex value are merged into a single entry with a combined usage count. For example, 'red', '#ff0000', and 'rgb(255, 0, 0)' would all count as the same color.
Is my code private?
Yes, all processing happens entirely in your browser. No code or data is ever sent to any server.
Can I use this with SCSS or HTML?
Absolutely. The parser extracts color values from any text, so it works with CSS, SCSS, LESS, HTML inline styles, or even plain text containing color values.
What export formats are available?
You can export your palette as CSS custom properties (:root variables), SCSS variables ($variable syntax), or a structured JSON object with hex, RGB, HSL, and usage count for each color.