Färg Palette Extractor
Extract färg palettes från CSS, SCSS, och HTML kod
Indata Kod
Paste CSS, SCSS, or HTML code above to extract all color values into a visual palette.
Färg Palette Extractor
Extract färg palettes från CSS, SCSS, och HTML kod
Funktioner
- Extracts hex (#fff, #ffffff), RGB, RGBA, HSL, HSLA, och 148 named CSS färger
- De-duplicates färger och counts usage frequency across din kod
- Sort palette av frequency, hue, eller lightness
- Export as CSS variables, SCSS variables, eller JSON
- Copy individual färger eller the full palette med one klicka
- 100% client-side bearbetning - nej data leaves din webbläsare
Så använder du
- Klistra in din CSS, SCSS, eller HTML kod i the text area.
- Colors are extracted automatically - hex, rgb, hsl, and named colors are all detected.
- Sort din palette av frequency, hue, eller lightness.
- Klicka vilken som helst swatch till copy its hex värde.
- Choose an export format (CSS variables, SCSS, or JSON) and copy the full palette.
Tips och bästa praxis
- Try the 'Sample CSS' button to see the tool in action with a realistic stylesheet.
- Sort av hue till see din färg spectrum vid en glance.
- Sort av frequency till find vilken färger dominate din codebase.
- Använda the JSON export format till integrate färger i din build tooling.
- Klistra in en entire stylesheet till audit din project's färg consistency.
Vanliga frågor
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.