Kleur Palette Extractor
Extract kleur palettes van CSS, SCSS, en HTML code
Invoer Code
Paste CSS, SCSS, or HTML code above to extract all color values into a visual palette.
Kleur Palette Extractor
Extract kleur palettes van CSS, SCSS, en HTML code
Functies
- Extracts hex (#fff, #ffffff), RGB, RGBA, HSL, HSLA, en 148 named CSS kleuren
- De-duplicates kleuren en counts usage frequency across uw code
- Sort palette door frequency, hue, of lightness
- Export as CSS variables, SCSS variables, of JSON
- Copy individual kleuren of de full palette met one klik
- 100% client-side verwerking - geen gegevens leaves uw browser
Hoe te gebruiken
- Plak uw CSS, SCSS, of HTML code in de tekst area.
- Colors are extracted automatically - hex, rgb, hsl, and named colors are all detected.
- Sort uw palette door frequency, hue, of lightness.
- Klik elke swatch naar copy its hex waarde.
- Choose an export format (CSS variables, SCSS, or JSON) and copy the full palette.
Tips en best practices
- Try the 'Sample CSS' button to see the tool in action with a realistic stylesheet.
- Sort door hue naar see uw kleur spectrum bij een glance.
- Sort door frequency naar find welk kleuren dominate uw codebase.
- Gebruiken de JSON export formaat naar integrate kleuren in uw build tooling.
- Plak een entire stylesheet naar audit uw project's kleur consistency.
Veelgestelde vragen
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.