Seitenverhältnis berechnen: Ratio und Format
Seitenverhältnis vereinfachen und Maße skalieren.
Farbcodes umrechnen: RGB, HEX und HSL online
RGB, HEX und HSL in beide Richtungen umrechnen.
HEX-Angabe#0066CC
- Farbton (H)
- 210,0 °
- Sättigung (S)
- 100,0 %
- Helligkeit (L)
- 40,0 %
Aus den RGB-Werten R 0, G 102 und B 204 wird die HEX-Angabe #0066CC, und in HSL beschreiben dieselbe Farbe der Farbton 210°, die Sättigung 100 % und die Helligkeit 40 %.
- Hinweis: RGB, HEX und HSL beschreiben dieselbe Farbe in verschiedenen Modellen. Die Umrechnung ist exakt, aber die Bildschirmdarstellung hängt vom Gerät ab.
So wird gerechnet
Von RGB nach HSL: drei Kanäle, drei Maßzahlen. Der Rechner liest die drei Kanäle als Werte von 0 bis 255, teilt jeden durch 255 und bestimmt aus den drei Anteilen das größte und das kleinste. Die Helligkeit steht genau in der Mitte zwischen beiden Extremen, die Sättigung misst, wie weit die Farbe vom Grau der gleichen Helligkeit entfernt liegt, und der Farbton wird aus dem Verhältnis der Kanäle zueinander auf dem Farbkreis verortet: Er läuft in sechs Sektoren von je 60 Grad, von Rot über Gelb und Grün, Cyan und Blau nach Magenta zurück zu Rot. Ein grauer Wert, bei dem alle drei Kanäle gleich sind, trägt keinen Farbton und keine Sättigung.
Von HSL nach RGB: der Umweg über die Farbkraft. Aus Helligkeit und Sättigung wird die Farbkraft (Chroma) bestimmt, aus dem Farbton, in welchem der sechs Sektoren sich die Farbe befindet, und wie weit sie in diesem Sektor fortgeschritten ist. Die drei Kanäle entstehen dann als Mischung aus Farbkraft und Grauanteil der gleichen Helligkeit; sie werden kaufmännisch auf ganze Kanalstufen gerundet, denn ein Farbteilwert zwischen zwei Stufen ist nicht darstellbar.
Die HEX-Schreibweise ist kanonisch. Der Rechner schreibt die HEX-Ausgabe immer als Gitterzeichen gefolgt von sechs hexadezimalen Stellen in Großbuchstaben, je zwei je Kanal, im Muster #RRGGBB; einstellige Werte werden mit einer führenden Null aufgefüllt. Diese Schreibweise ist diejenige, die Stylesheets und Grafikwerkzeuge ohne Anpassung übernehmen.
Rechenbeispiel
Die Kanäle R 0, G 102 und B 204: Der blaue Kanal ist mit 0,8 der größte Anteil, der rote mit 0 der kleinste. Die Helligkeit steht in der Mitte beider Werte bei 0,4, also 40 %. Die Sättigung ergibt 0,8 geteilt durch 0,8, also 100 %. Der Farbton liegt im Blau-Sektor: 60 mal (4 minus 0,5) ergibt 210°. Die HEX-Angabe ist #0066CC.
Hex-Werte von Hand zerlegen
Eine HEX-Angabe im Muster #RRGGBB trägt je zwei Stellen einen Kanal. Die ersten zwei Stellen nach dem Gitterzeichen sind Rot, die mittleren zwei sind Grün, die letzten zwei sind Blau, jeweils hexadezimal gelesen: Die Ziffern 0 bis 9 zählen wie gewohnt, dann steht A für 10, B für 11, C für 12, D für 13, E für 14 und F für 15. Aus #1ABC9C werden so 1A gleich 26 für Rot, BC gleich 188 für Grün und 9C gleich 156 für Blau; einstellige Werte stehen mit führender Null, 0C ist 12.
Diese drei Zahlen tragen Sie in die Kanalfelder des Rechners ein. Der Rechner nimmt die Zerlegung bewusst als Felder entgegen und nicht als Hex-Freitext: Jedes Feld hat einen klaren Wertebereich von 0 bis 255, Fehler werden feldbezogen gemeldet, und es gibt keine Schreibweise, die zuerst geparst werden muss.
Was dieser Rechner nicht abbildet
Der Rechner kennt keine Farbnamen und keine Farbfächer.
Er rechnet kein CMYK und kein OKLCH um.
Er berechnet keinen Kontrast und prüft keine WCAG-Vorgaben.
Er sagt nichts über die Darstellung auf einem bestimmten Bildschirm.
Häufige Fragen
Wie zerlegt man eine HEX-Angabe in RGB-Werte?
Eine HEX-Angabe im Muster #RRGGBB trägt je zwei Stellen einen Kanal: Die ersten zwei Stellen nach dem Gitterzeichen sind Rot, die mittleren zwei sind Grün und die letzten zwei sind Blau, jeweils hexadezimal gelesen. Aus #1ABC9C werden so 26 für Rot, 188 für Grün und 156 für Blau; diese drei Werte tragen Sie in die Kanalfelder des Rechners ein.
Was sagt HSL aus und wann passt es besser als RGB?
HSL beschreibt eine Farbe über Farbton, Sättigung und Helligkeit und folgt damit der Sprache, in der Menschen über Farben sprechen: derselbe Farbton mit weniger Sättigung wird grauer, dieselbe Farbe mit weniger Helligkeit wird dunkler. Wer eine Farbe abstimmen will, etwa einen dunkleren Ton derselben Farbfamilie, findet in HSL den direkteren Zugang als in drei unabhängigen RGB-Kanälen.
Warum kann die Rückrechnung von HSL nach RGB abweichen?
Die Kanalwerte werden kaufmännisch auf ganze Stufen gerundet, denn ein Farbteilwert zwischen zwei Stufen ist nicht darstellbar. Die gerundeten Kanäle beschreiben streng genommen eine Nebenfarbe der Ausgangsfarbe, deren exakte HSL-Werte geringfügig von den eingegebenen abweichen. Der Interpretationstext nennt die Rundung deshalb in jedem HSL-Ergebnis.
Sind HEX und RGB dieselbe Farbe?
Ja: Die HEX-Schreibweise ist nur eine andere Notation derselben drei RGB-Kanäle, je zwei hexadezimale Stellen stehen für einen Kanal von 0 bis 255. #0066CC und RGB 0, 102, 204 beschreiben exakt dieselbe Farbe, und der Rechner zeigt deshalb in beiden Richtungen dieselbe HEX-Angabe für dieselben Kanäle. Der Unterschied liegt allein in der Schreibweise, nicht in der Farbe.
Warum hat der Rechner keine Hex-Eingabe?
Eine Hex-Eingabe wäre Freitext, und die Eingaben dieses Rechners sind bewusst kompositionell aus Kanalfeldern gebaut: Jedes Feld hat einen klaren Wertebereich und eine klare Bedeutung, Fehler werden feldbezogen gemeldet. Eine Hex-Angabe zerlegen Sie von Hand in drei Kanäle, wie der Abschnitt zur Zerlegung auf dieser Seite zeigt; die Kanalfelder nehmen die Werte dann direkt entgegen.
Quellen
- MDN-Web-DokumentationCSS-Farbwerte (Definitionsquelle der Notationen RGB, HEX und HSL, developer.mozilla.org)
Farbcodes umrechnen: RGB, HEX und HSL · https://easytools4me.de/farbcodes-umrechner/
Berechnet mit easytools4me.de. Ohne Gewähr.