Eine Reihe von Farben einfügen oder importieren und sofort in CSS-Variablen, SCSS, Tailwind-Config, JSON oder SVG-Farbfelder exportieren — der Abschlussschritt für jede Palette.

HEX-Werte einfügen (einer pro Zeile oder durch Kommas/Leerzeichen getrennt). rgb() und hsl() werden ebenfalls akzeptiert.

Palette

Keine gültigen Farben gefunden — Eingabe prüfen.

Exportformat
Export-Code

							

Alles läuft im Browser — Palette einfügen und produktionsreife Code in jedem Format kopieren. Keine Registrierung, vollständig kostenlos.


Über Paletten-Exporter

Der Palette Exporter ist der letzte Schritt für jede Farbpalette: Füge eine Reihe von Farben ein und erhalte produktionsreifen Code im Format, das dein Projekt braucht. Er akzeptiert HEX-Werte, einen pro Zeile oder durch Kommas und Leerzeichen getrennt, und versteht auch die Notationen rgb() und hsl().

Sechs Ausgabeformate werden live erzeugt: CSS-Custom-Properties, SCSS-Variablen, ein Tailwind-Konfigurationsblock, JSON, SVG-Farbmuster und eine einfache HEX-Liste. Ein konfigurierbares Variablenpräfix hält die erzeugten Namen konsistent mit deiner Codebasis, und jedes Format kann in die Zwischenablage kopiert oder als Datei heruntergeladen werden.

Alles läuft in deinem Browser: Die eingefügten Farben werden niemals irgendwohin gesendet. Es passt natürlich zu den anderen Palette-Tools: Extrahiere oder erzeuge eine Palette anderswo, füge sie hier ein und gehe mit genau dem Snippet weg, das dein Stylesheet, Framework oder deine Design-Pipeline erwartet.

So verwenden Sie Paletten-Exporter

  1. Füge deine Farben in das Eingabefeld ein: HEX, rgb() oder hsl(), eine pro Zeile oder durch Kommas getrennt.
  2. Klicke auf „Farben aktualisieren“, um sie in eine Palette umzuwandeln, oder lade das Beispiel, um es auszuprobieren.
  3. Wähle ein Exportformat: CSS-Variablen, SCSS, Tailwind-Konfiguration, JSON, SVG-Farbmuster oder reines HEX.
  4. Passe das Variablenpräfix an, wenn du eine eigene Benennung möchtest.
  5. Kopiere den erzeugten Code oder lade ihn als Datei herunter.

Häufig gestellte Fragen

HEX-Werte (mit oder ohne #-Zeichen), rgb()- und hsl()-Notation werden alle erkannt. Du kannst Formate mischen und Farben durch Zeilenumbrüche, Kommas oder Leerzeichen trennen: Der Parser erkennt jede gültige Farbe und ignoriert den Rest.

Ja. Das Parsen und die Codeerzeugung geschehen vollständig in deinem Browser, sodass das Tool kostenlos ist, ohne Konto, ohne Credits und ohne Limit bei Paletten oder Exporten.

Füge deine Farben ein, wähle das Format „Tailwind config“ und kopiere den erzeugten Block in den Farbabschnitt deiner Tailwind-Konfiguration. Die Einstellung des Variablenpräfixes steuert die für jede Farbe verwendeten Schlüsselnamen.

Nein. Die Farben bleiben in deinem Browser-Tab: Beim Parsen oder Exportieren werden keine Serveranfragen gestellt, und nichts wird gespeichert, sobald du die Seite verlässt.

Es erzeugt eine kleine SVG-Datei, die jede Palettenfarbe als beschriftetes Farbmuster zeigt. Das ist nützlich, um eine visuelle Paletten-Referenz in Dokumentation, README-Dateien oder Design-Übergabeseiten einzubetten, ohne Screenshots zu erstellen.


Beliebte Suchen
Paletten-Export Farben nach CSS exportieren Palette zu SCSS Tailwind-Farbkonfiguration Palette als JSON exportieren Farbmuster SVG
Brauchen Sie Hilfe?
Ein Problem mit diesem Tool gefunden? Sagen Sie es unserem Team.
Problem melden

Füge dieses kostenlose Tool zu deiner eigenen Website hinzu — kopiere den Code unten und füge ihn ein.