Farbkonverter

Zwischen HEX, RGB, HSL umrechnen

Vorschau

HEX

#0ea5e9

RGB

rgb(14, 165, 233)

HSL

hsl(199, 89%, 48%)

Tailwind arbitrary

[#0EA5E9]

RGB bearbeiten

HSL bearbeiten

H (0-360)

S (%)

L (%)

So funktioniert es

Farbkonverter — Zwischen HEX, RGB, HSL umrechnen. Alle Verarbeitung erfolgt in deinem Browser — kein Upload, keine Anmeldung, keine E-Mail. Für immer kostenlos.

Zuletzt aktualisiert: 2026-05-06

Editor's note

Wir nutzen das in Design-Übergaben mehr als alles andere. Designerinnen denken in Farbton, Sättigung und Helligkeit – sie sagen Dinge wie "einen Tick wärmer" oder "die Sättigung eine Stufe runter". Entwickler denken in HEX, weil das im Stylesheet landet. Diese Diskrepanz frisst eine deprimierende Menge Slack-Zeit. Deshalb sitzen HEX, RGB und HSL bei uns auf demselben Panel mit einem Live-Swatch, weil der schnellste Weg, "ist das das richtige Teal" zu beenden, darin besteht, gemeinsam auf die Farbe zu zeigen.

Die Tailwind-Arbitrary-Value-Ausgabe ist der Teil, den wir nicht so oft erwartet hatten zu nutzen, wie wir ihn nutzen. Es fing als kleine Bequemlichkeit an – bg-[#1F2937] in einem Rutsch kopieren – und wurde leise zum Standardweg, wie wir einmalige Töne shippen, die keinen Config-Eintrag verdienen. Wir haben uns geweigert, ein kuratiertes Paletten-Feature einzubauen. Paletten-Kuration ist ein echtes Designproblem und dieses Tool ist nicht der Ort, an dem es gelöst wird; hier konvertieren wir nur, was du bereits gewählt hast.

Über Farbkonverter

Der Farbkonverter rechnet jeden Farbwert zwischen HEX-, RGB- und HSL-Darstellungen um und zeigt das Ergebnis als Vorschau nebeneinander an. Außerdem liefert er einen Tailwind-"arbitrary value"-String, den du direkt in einen className einfügen kannst. HEX-RGB-Konvertierung ist eine der häufigsten Aufgaben in der Frontend-Arbeit — dieses Tool nimmt dir den Taschenrechner-Schritt ab.

Designer übersetzen damit Markenfarben aus einer Figma-Datei in CSS, Entwickler debuggen einen unerwarteten Farbton und Accessibility-Reviewer prüfen, ob eine Farbe korrekt liest, indem sie die Helligkeit in HSL feinjustieren.

Alles geschieht in deinem Browser. Deine Palette, Markenfarben und Prototypen erreichen nie einen externen Server.

So verwenden Sie Farbkonverter

Klicke auf das Farbfeld, um den Farbwähler deines Betriebssystems zu öffnen, oder gib einen HEX-Wert direkt ein.
Verwende die RGB-Zahlenfelder, um die Rot-, Grün- und Blaukanäle (jeweils 0-255) feinzujustieren.
Wechsle zum HSL-Editor, um Farbton (0-360), Sättigung und Helligkeit anzupassen — nützlich, wenn du eine etwas dunklere oder wärmere Variante brauchst.
Beobachte die Vorschau für eine sofortige Darstellung der Farbe in voller Größe.
Nutze die Kopierbuttons neben HEX, RGB, HSL oder dem Tailwind arbitrary value, um den Wert direkt in die Zwischenablage zu schicken.

Häufige Anwendungsfälle

Eine Markenfarbe aus der HEX-Spezifikation eines Designers in das rgb()-Format umwandeln, das deine CSS-in-JS-Lösung erwartet.
Tailwind arbitrary class strings wie bg-[#1f2937] erzeugen, ohne den Browser zu verlassen.
Einen Button-Hover-Zustand abstimmen, indem die Helligkeit in HSL angepasst und der Farbton konstant gehalten wird.
Verifizieren, dass ein vom Stakeholder per E-Mail geschickter Hex-Code wirklich die Farbe ergibt, die er im Kopf hatte.
Eine Dark-Mode-Variante bauen, indem man den HSL-Wert einer hellen Farbe abliest und die Helligkeit reduziert.

Tipps und häufige Fehler

HSL ist viel intuitiver als RGB, wenn es um Helligkeit oder Sättigung geht — bearbeite HSL, wenn du ein "etwas dunkleres Blau" willst.
Hex-Codes können 3 oder 6 Stellen haben. Die 3-stellige Form (#abc) wird zu #aabbcc erweitert, sodass #f00 und #ff0000 identisch sind.
Beim Einfügen aus Figma auf nachgestellte Alpha-Bytes achten (z. B. #1f2937FF). Entferne den Alpha, falls dein Tooling opaken Hex erwartet.
Für Accessibility-Checks zwei HSL-Werte erzeugen und die Helligkeitsunterschiede vergleichen — mindestens 50 % L-Differenz ist eine sichere Faustregel für Fließtext.

Häufig gestellte Fragen

Welche Farbräume werden unterstützt?

HEX, RGB und HSL. Wir geben außerdem ein 'Tailwind arbitrary value'-Format aus, das du direkt in Klassennamen einfügen kannst.

Kann ich eine Palette speichern?

Noch nicht. Aktuell kopiere jeden Wert über den Kopier-Button. Paletten-Speichern ist auf der Roadmap.

Werden Alphakanäle behandelt?

Aktuell nein. Wir konzentrieren uns auf opake Farben; HEX-A- und RGBA-Unterstützung ist geplant.

Warum ergeben RGB(255, 0, 0) und HSL(0, 100%, 50%) dieselbe Farbe?

Sie beschreiben denselben Punkt im Farbraum, nur über andere Achsen. RGB definiert Mischverhältnisse der Lichtprimärfarben; HSL beschreibt Farbton, Sättigung und Helligkeit. Beide führen zu reinem Rot.

Kann ich einen Farbnamen wie "crimson" oder "rebeccapurple" einfügen?

Nicht direkt. Browser ordnen ~140 benannten CSS-Farben bestimmten Hex-Werten zu — suche den Namen in deinem Editor und füge das Hex-Äquivalent hier ein.

Wie sieht die Tailwind arbitrary value Ausgabe aus?

Etwa so: [#1F2937]. Wickele das in eine beliebige Tailwind-Klasse wie text-[#1F2937], bg-[#1F2937] oder border-[#1F2937], um genau die Farbe zu nutzen, ohne tailwind.config.js zu erweitern.