Farbkonverter

Farben zwischen HEX, RGB, HSL und OKLCH umrechnen, jede Farbe in einem CSS-Stück finden und Abstufungen und Harmonien bilden — direkt im Browser.

Über Farbkonverter

Was es ist

Dieses Tool nimmt eine einzelne Farbe oder einen ganzen Block CSS, SVG oder JSON und findet jede Farbe darin. Für die aktive Farbe zeigt es alle gängigen Formate, eine Abstufung von 50 bis 950, Komplementär- und Analogharmonien und den Kontrast auf Weiß und Schwarz. Das Ergebnis lässt sich als CSS-Variablen, Tailwind-Konfiguration oder Figma-JSON exportieren.

Hauptfunktionen

  • Jede Farbe aus eingefügtem CSS, SVG oder JSON — HEX, rgb(), hsl(), oklch() und mehr.
  • Die aktive Farbe in allen gängigen Formaten, mit Pipette.
  • Eine Abstufung von 50 bis 950.
  • Komplementär- und Analogharmonien.
  • Kontrast auf Weiß und Schwarz mit AA- und AAA-Markierung; Export als CSS-Variablen, Tailwind oder Figma-JSON.

So funktioniert es

  1. Füge eine Farbe oder einen Block CSS, SVG oder JSON ein oder klick auf „Beispiel“.
  2. Wähle die Farbe, mit der du arbeiten willst.
  3. Kopiere sie im gewünschten Format oder sieh dir Abstufungen und Harmonien an.
  4. Exportiere die Farben als Code, wenn du ein Theme baust.

Wann es hilft

  • HEX-Farben aus einem Design für dein CSS in OKLCH oder HSL umwandeln.
  • Aus einer einzigen Markenfarbe eine ganze Abstufung erhalten.
  • Alle Farben eines alten Stylesheets sammeln.

Datenschutz und Grenzen

Deine Daten

Deine Farben und dein Code werden im Browser verarbeitet und nicht an einen Server gesendet — die Website erhält nur ein anonymes Ereignis „Tool geöffnet“, ohne Inhalt. Ein Ergebnis, das du an ein anderes Tool schickst, bleibt 24 Stunden auf diesem Gerät unter „Letzte Aktivität“.

Grenzen

  • CSS-Variablen wie var(--brand) werden nicht aufgelöst: Gefunden werden nur Farbwerte, die im Text stehen.
  • Manche Formate runden leicht, daher kann sich beim Hin- und Zurückrechnen die letzte Ziffer ändern.

Häufige Fragen

Welche Farbformate werden unterstützt?

HEX (3, 6 oder 8 Stellen), rgb(), hsl(), oklch(), oklab() und CSS-Farbnamen wie rebeccapurple. Jedes im Text gefundene Format wird mit seinem Wert in allen anderen angezeigt.

Wie entsteht die Abstufung?

Aus der aktiven Farbe werden hellere und dunklere Stufen von 50 bis 950 gebildet, benannt wie Tailwind-Paletten — so kannst du sie direkt in ein Theme übernehmen.

Kann ich viele Farben auf einmal umrechnen?

Ja — füge eine ganze CSS-Datei oder ein JSON mit Design-Tokens ein, dann werden alle Farben darin gefunden und aufgelistet.