Farbformate verstehen: HEX, RGB, HSL und mehr
Was dieser Konverter macht
Eine Farbe lässt sich auf viele Arten notieren, und dieses Werkzeug übersetzt eine Farbe zugleich in sechs davon. Gib einen Wert als HEX, RGB oder HSL ein — oder wähle ihn mit dem visuellen Farbwähler — und du siehst sofort die entsprechende Schreibweise in HEX, RGB, HSL, HSV, CMYK und LAB. Über die HSL-Regler lassen sich Farbton, Sättigung und Helligkeit verschieben, während alle anderen Formate synchron mitlaufen.
Da alle sechs Formate aus derselben Farbe abgeleitet werden und nicht aus einer festen Tabelle, berechnet jede Bewegung am Farbwähler oder Regler den ganzen Satz in Echtzeit neu — was du kopierst, entspricht also immer genau dem Farbfeld auf dem Bildschirm.
Wann sich welches Format lohnt
Jede Aufgabe verlangt eine andere Schreibweise. HEX und RGB fügst du in CSS und die meisten Design-Programme ein; HSL ist bequemer, wenn du eine etwas dunklere oder weniger gesättigte Variante einer Farbe willst; CMYK wird wichtig, sobald ein Entwurf in den Druck geht; und LAB hilft, wenn Farben für das menschliche Auge gleichmäßig abgestuft wirken sollen. Alle sechs nebeneinander zu haben bedeutet, genau das zu greifen, was die aktuelle Aufgabe erwartet, ohne einen zweiten Konverter zu suchen. Diese Werte bleiben selten für sich: Ein rgba()-String ist genau das, was der CSS-Schatten-Generator für einen weichen Schlagschatten braucht, und ein einzelner HEX-Code ist das, womit das theme-color-Tag aus dem Meta-Tag-Generator die Adressleiste des Browsers einfärbt.
Beispiel: #FF5733 umrechnen
Nimm das Orange #FF5733. In RGB ist das rgb(255, 87, 51): Rot voll, etwas Grün, weniger Blau. In HSL wird daraus etwa hsl(11, 100%, 60%) — ein Farbton nahe am roten Ende des Farbkreises, voll gesättigt, bei 60% Helligkeit. Für den Druck entspricht das ungefähr cmyk(0%, 66%, 80%, 0%). Jede Schreibweise meint dasselbe Farbfeld; sie beschreibt es nur mit anderen Zahlen, und die Kopierschaltfläche neben jedem Wert bringt ihn direkt in deinen Code oder deine Design-Datei.
Formathinweise und Sonderfälle
HEX und RGB tragen dieselbe Information — #FF5733 und rgb(255, 87, 51) sind dieselbe Farbe in anderem Gewand — die Umwandlung zwischen beiden verliert also nichts. HSL und HSV ordnen diese Information dagegen entlang der menschlichen Wahrnehmung, was sie eher zum Anpassen als zum Speichern einer Farbe praktisch macht. CMYK ist ein Druckmodell mit einem engeren Farbraum als dein Bildschirm, seine Werte sind daher eine nahe Annäherung statt einer exakten Entsprechung, während LAB geräteunabhängig und wahrnehmungsgleichmäßig ist. Die Ergebnisse in HEX, RGB und HSL lassen sich unverändert in CSS einfügen.