Farbkonverter

Der Farbkonverter ist ein kostenloses Tool, das eine Farbe in den Formaten HEX, HEX Alpha, RGB, RGBA, HSV, HSL oder HSLA in mehrere gleichwertige Farbformate umwandelt.

Welche Farbformate kann ich konvertieren?

Du kannst Werte als HEX, HEX Alpha, RGB, RGBA, HSV, HSL oder HSLA eingeben und die entsprechenden Werte in allen unterstützten Formaten ablesen. Das ist praktisch, wenn eine Designspezifikation, ein Stylesheet oder eine externe API dieselbe Farbe anders darstellt.

• HEX stellt die Kanäle Rot, Grün und Blau durch hexadezimale Zahlenpaare dar, üblicherweise in der Form #RRGGBB.
• HEX Alpha ergänzt einen Deckkraftkanal. In moderner CSS-Schreibweise wird dafür häufig #RRGGBBAA verwendet.
• RGB verwendet Werte für die Kanäle Rot, Grün und Blau, die normalerweise zwischen 0 und 255 liegen.
• RGBA ergänzt RGB um Alpha-Transparenz.
• HSV beschreibt Farbton, Sättigung und Helligkeitswert. Dieses Format ist bei Farbwählern verbreitet, gehört aber nicht zu den standardisierten CSS-Farbfunktionen.
• HSL beschreibt Farbton, Sättigung und Helligkeit. CSS unterstützt HSL direkt.
• HSLA ist HSL mit einem zusätzlichen Alpha-Wert.

RGB und HSL sind unterschiedliche mathematische Beschreibungen einer Farbe, nicht unterschiedliche Farben. Durch die Konvertierung änderst du die Darstellung, während die beabsichtigte Farbe so genau erhalten bleibt, wie es das Zielformat zulässt.

Wie verwende ich den Farbkonverter?

Gib im Feld Color einen vollständigen Farbwert in einem der unterstützten Formate ein. Anschließend kannst du die erzeugten Werte in den Ausgabefeldern ablesen oder kopieren.

1. Kopiere den Ausgangswert vollständig, einschließlich eines vorangestellten Hash-Zeichens sowie gegebenenfalls vorhandener Kommas, Klammern, Prozentzeichen oder Alpha-Komponenten.
2. Füge ihn in das Feld Color ein.
3. Lies die entsprechenden Werte unter HEX, HEX Alpha, RGB, RGBA, HSV, HSL und HSLA ab.
4. Wähle eines der unterstützten Farbformate, das dein Zielsystem akzeptiert. Für CSS-Regeln werden häufig HEX, RGB, RGBA, HSL und HSLA verwendet. HSV kommt eher in Bearbeitungsoberflächen und bei Farbberechnungen zum Einsatz.

Die Konvertierung erfolgt auf dem Server. Deine Eingabe wird über HTTPS an den Server übertragen und nicht gespeichert. Einzelne Farben sind zwar selten vertraulich, trotzdem solltest du vor der Übermittlung an einen Onlinedienst prüfen, ob eine noch unveröffentlichte Palette oder eine Sammlung von Design-Tokens vertraulich ist.

Leerzeichen und Satzzeichen gehören zur Syntax von RGB, HSL und verwandten Formaten. Prozentzeichen kennzeichnen Prozentwerte. Eine einzelne Zahl, ein leerer Wert oder beliebiger Text beschreibt keine Farbe. Auch Text mit Akzenten oder nichtlateinischen Zeichen hat in diesen numerischen Formaten keine definierte Bedeutung.

Wie lese ich die konvertierten Werte?

Jedes Ergebnis ist eine andere Schreibweise für dieselbe Farbe. Achte dabei besonders auf die Wertebereiche der Kanäle, Prozentangaben und Alpha-Transparenz. Welches Feld du kopieren solltest, hängt davon ab, welche Farbschreibweise das Zielsystem unterstützt.

Bei einem sechsstelligen HEX-Wert steht das erste Paar für Rot, das zweite für Grün und das dritte für Blau. So enthält #336699 die hexadezimalen Kanalwerte 33, 66 und 99. Diese entsprechen den dezimalen RGB-Werten 51, 102 und 153.

Der Farbton wird normalerweise als Winkel auf einem Farbkreis angegeben. Sättigung sowie Helligkeit oder Helligkeitswert werden üblicherweise in Prozent ausgedrückt. Die HSL-Helligkeit und der HSV-Helligkeitswert werden unterschiedlich berechnet. Ihre Prozentangaben sollten daher nicht so verglichen werden, als würden sie dieselbe Eigenschaft messen.

Alpha beschreibt die Deckkraft. Für eine vollständig deckende Farbe ist kein Format mit Alpha-Kanal nötig, für eine halbtransparente Farbe dagegen schon. Wenn du eine RGBA- oder HSLA-Farbe als einfaches RGB, HSL oder sechsstelliges HEX übernimmst, kann das Zielformat den Alpha-Kanal nicht speichern.

Dieser Konverter ist nicht als Syntaxprüfer mit ausführlichen Diagnosemeldungen dokumentiert. Verlasse dich deshalb nicht darauf, dass er bei einer fehlerhaften Eingabe das genaue problematische Zeichen erkennt. Häufige Syntaxfehler sind ein fehlendes Hash-Zeichen bei HEX, nicht geschlossene Klammern, ausgelassene Prozentzeichen, ein Alpha-Wert außerhalb des erwarteten Bereichs oder eine Vermischung der Kanalkonventionen von HSL und RGB.

Beispiele für Farbkonvertierungen

Ein einfaches Beispiel zeigt, wie HEX, RGB, HSL und HSV zusammenhängen. Reines Rot lässt sich in den folgenden gleichwertigen Formen angeben.

• HEX-Eingabe #ff0000
• RGB-Entsprechung rgb(255, 0, 0)
• HSL-Entsprechung hsl(0, 100%, 50%)
• HSV-Entsprechung hsv(0, 100%, 100%)

Bei einer weniger gesättigten Farbe entspricht #336699 dem Wert rgb(51, 102, 153). Die HSL-Darstellung lautet hsl(210, 50%, 40%), während die HSV-Darstellung einen Farbton von 210 Grad, eine Sättigung von etwa 66.7% und einen Helligkeitswert von 60% hat. Eine Benutzeroberfläche kann Dezimalwerte runden oder die Leerzeichen anders setzen, ohne die praktische Bedeutung zu verändern.

Transparenz liefert ein weiteres anschauliches Beispiel. rgba(255, 0, 0, 0.5) und hsla(0, 100%, 50%, 0.5) beschreiben beide Rot mit halber Deckkraft. Nach der gängigen achtstelligen CSS-HEX-Konvention lautet der entsprechende Wert #ff000080, wobei 80 das quantisierte Alpha-Byte ist.

Wann lohnt es sich, eine Farbe zu konvertieren?

Eine Farbkonvertierung ist sinnvoll, wenn die Zielanwendung eine andere Schreibweise verlangt oder eine alternative Darstellung die Fehlersuche erleichtert. Typische Anwendungsfälle sind die Übertragung eines Figma-Werts in eine benutzerdefinierte CSS-Eigenschaft, die Prüfung eines in Chrome DevTools gefundenen RGBA-Werts, die Vorbereitung von Farbfeldern für einen API-Payload oder die Kontrolle externer Theme-Daten vor der Bereitstellung.

Eine Konvertierung ist normalerweise nicht nötig, wenn das Ziel die vorhandene Farbschreibweise bereits unterstützt. Es bringt kaum Vorteile, sechsstelliges HEX nur für maschinenlesbares CSS in RGB umzuwandeln. Außerdem können bei wiederholten Hin- und Rückkonvertierungen Rundungsabweichungen in HSL- oder HSV-Werten entstehen. Ergänze auch keinen Alpha-Kanal, wenn alle Farben vollständig deckend sind.

Wenn du eine Farbe visuell auswählen möchtest, statt einen bekannten Wert umzuwandeln, ist der Farbwähler das passendere Tool. Eine Konvertierung ersetzt außerdem weder Kontrastprüfungen noch Simulationen von Farbfehlsichtigkeit oder die Verwaltung von Farbprofilen. Gleichwertige numerische Werte belegen nicht, dass Text im Vordergrund die WCAG-Anforderungen an den Kontrast erfüllt.

Häufig gestellte Fragen

Kann der Konverter benannte CSS-Farben verarbeiten?

Nein. Als unterstützte Eingabeformate sind HEX, HEX Alpha, RGB, RGBA, HSV, HSL und HSLA dokumentiert. Namen wie red, rebeccapurple oder transparent werden daher nicht als unterstützte Eingaben aufgeführt. Wandle eine benannte Farbe zunächst in einen numerischen CSS-Wert um, bevor du sie eingibst.

Kann ich dreistellige HEX-Werte eingeben?

HEX wird als Eingabeformat unterstützt, die zulässigen HEX-Längen sind jedoch nicht dokumentiert. Für eine zuverlässige Verarbeitung solltest du Kurzformen wie #369 zu #336699 erweitern. Dasselbe gilt für vierstellige Kurzformen mit Alpha-Kanal.

Kann ich statt eines Farbwerts eine ganze CSS-Deklaration einfügen?

Gib nur den Farbwert ein, nicht die vollständige Deklaration. Verwende zum Beispiel #336699 statt color: #336699;, da der Eigenschaftsname und das Semikolon nicht zur Farbe selbst gehören. Entferne umschließende Anführungszeichen, wenn du einen Wert aus JSON oder einer Konfigurationsdatei kopierst.

Bleiben Informationen zu großem Farbraum oder Farbprofil erhalten?

Nein, Formate mit großem Farbraum oder eingebettete Farbprofile werden nicht als unterstützt aufgeführt. Display P3, Lab, LCH und ICC-Profildaten enthalten Informationen, die sich in den verfügbaren HEX-, RGB-, HSL- und HSV-Feldern nicht ausdrücken lassen. Nutze eine Anwendung mit Farbmanagement, wenn du eine profilbasierte Konvertierung benötigst.

Warum enthalten konvertierte Werte manchmal Dezimalstellen?

Bei HSL- und HSV-Berechnungen können Prozentwerte mit Nachkommastellen entstehen, selbst wenn die RGB-Kanäle der Ausgangsfarbe ganzzahlig sind. Werden diese Werte gerundet, kann sich eine spätere Rückkonvertierung nach RGB geringfügig verändern. Behalte beim Speichern von Design-Tokens die verfügbare Genauigkeit bei und runde nur, wenn das Zielformat oder der verwendete Programmierstandard es verlangt.