Couleur Palette Extractor

Extract couleur palettes depuis CSS, SCSS, et HTML code

Entrée Code

Paste CSS, SCSS, or HTML code above to extract all color values into a visual palette.

Couleur Palette Extractor

Extract couleur palettes depuis CSS, SCSS, et HTML code

Fonctionnalités

  • Extracts hex (#fff, #ffffff), RGB, RGBA, HSL, HSLA, et 148 named CSS couleurs
  • De-duplicates couleurs et counts usage frequency across votre code
  • Sort palette par frequency, hue, ou lightness
  • Export as CSS variables, SCSS variables, ou JSON
  • Copy individual couleurs ou le full palette avec one cliquez
  • 100% client-side traitement - non données leaves votre navigateur

Mode d'emploi

  1. Collez votre CSS, SCSS, ou HTML code en le texte area.
  2. Colors are extracted automatically - hex, rgb, hsl, and named colors are all detected.
  3. Sort votre palette par frequency, hue, ou lightness.
  4. Cliquez tout swatch à copy its hex valeur.
  5. Choose an export format (CSS variables, SCSS, or JSON) and copy the full palette.

Conseils et bonnes pratiques

  • Try the 'Sample CSS' button to see the tool in action with a realistic stylesheet.
  • Sort par hue à see votre couleur spectrum à un glance.
  • Sort par frequency à find quel couleurs dominate votre codebase.
  • Utiliser le JSON export format à integrate couleurs en votre build tooling.
  • Collez un entire stylesheet à audit votre project's couleur 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.