Eine Hex-Farbe und eine rgb()-Farbe sind dieselben drei Zahlen, zweimal geschrieben. #4F46E5 ist schlicht 79, 70, 229 zur Basis 16 — zwei Hex-Ziffern pro Kanal, jede fasst 0 bis 255. Zwischen beiden umzurechnen ist Arithmetik. Interessant wird, was diese Zahlen tatsächlich bedeuten, denn das ist nicht, was die meisten annehmen.
Die Kurzform verdoppelt jede Ziffer, sie füllt nicht auf
Dreistelliges Hex expandiert durch Wiederholen jedes Zeichens: #f00 wird zu #ff0000, nicht zu #f00000. Die Regel existiert, damit die Kurzform den vollen Bereich abdeckt — #fff muss reines Weiß sein, und das kann es nur, wenn f zu ff wird.
Die Folge: Die Kurzform kann die meisten Farben nicht ausdrücken. Nur 4.096 der 16,7 Millionen sind erreichbar, weil jeder Kanal auf die sechzehn Werte 00, 11, 22 … ff beschränkt ist. #4F46E5 hat keine dreistellige Form. Die Kurzform ist eine Bequemlichkeit für runde Zahlen, kein Kompressionsverfahren.
Die Zahl ist nicht die Helligkeit — das ist die große Sache
Hier die Tatsache, die fast alle überrascht und in echten Designsystemen echte Fehler verursacht. #808080 liegt numerisch exakt in der Mitte zwischen #000000 und #FFFFFF. In der Helligkeit liegt es nicht in der Mitte. Es strahlt etwa 21,6 % des Lichts ab, das Weiß abgibt.
Der Grund: sRGB — der Farbraum, in dem jeder Hex-Code im Web lebt — ist gamma-kodiert statt linear. Die Kodierung widmet dunklen Tönen absichtlich mehr der verfügbaren Werte, weil das menschliche Sehen dort unten weit empfindlicher für Unterschiede ist. Die Zahlen sind also wahrnehmungsbezogen verteilt, nicht physikalisch. Das Grau, das wirklich das halbe Licht von Weiß abgibt, liegt bei etwa #BCBCBC — was aufgeschrieben überhaupt nicht nach einem "mittleren" Grau aussieht.
Das zählt, sobald du mit Farben rechnest. #000000 und #FFFFFF zu mitteln, indem man die Kanäle addiert und halbiert, ergibt #808080 — eine Farbe mit 21,6 % der Leuchtdichte von Weiß, präsentiert, als wäre sie der Mittelpunkt. Dasselbe im linearen Raum ergibt #BCBCBC. Deshalb laufen naive Verläufe zwischen gesättigten Farben durch ein trübes dunkles Band, deshalb verdunkelt Weichzeichnen und Skalieren im Gamma-Raum Bilder, und deshalb liefert Blending-Code, der offensichtlich richtig aussieht, Ergebnisse, die subtil falsch wirken.
Acht Ziffern, und was dieses Tool nicht tut
Das CSS Color Module Level 4 hat Hex einen Alphakanal gegeben: #RRGGBBAA, wobei das letzte Paar die Deckkraft ist — #FF0000 80 ist Rot bei 50 %. Es gibt auch eine vierstellige Kurzform, #RGBA, die genauso expandiert. Alle aktuellen Browser unterstützen beides.
Dieses Tool beherrscht sechs Ziffern und drei, und hört dort auf — die Eingabe ist auf sieben Zeichen inklusive Raute begrenzt. Arbeitest du mit Transparenz, ist rgba() oder das moderne, durch Leerzeichen getrennte rgb(255 0 0 / 50%) ohnehin die klarere Notation, denn eine als Hex-Paar geschriebene Deckkraft ist für jeden unlesbar — auch für dich in einem halben Jahr.
Beide Notationen beschreiben sRGB, und das ist inzwischen eine Grenze
Ein Hex-Code trägt keine Information darüber, welchen Farbraum er meint; das Web hat sich schlicht auf sRGB geeinigt, einen 1996 rund um die Fähigkeiten von Röhrenmonitoren definierten Standard. Das funktionierte, solange alle Bildschirme ungefähr gleich waren. Es funktioniert weniger gut, seit die meisten Telefone und Laptops einen merklich größeren Farbbereich anzeigen können.
Deshalb hat CSS Farbfunktionen wie oklch() und color(display-p3 …) bekommen. Sie können gesättigte Farben ausdrücken, die kein Hex-Code erreicht — ein Rot, das leuchtender ist als #FF0000. Wirkt dein Markenrot auf einem modernen Display flach, ist das die Decke, an die du gestoßen bist, und kein Justieren von Hex-Ziffern kommt darüber hinaus. Für die tägliche Interface-Arbeit bleibt sRGB allerdings der sichere gemeinsame Nenner, und Hex bleibt die kürzeste Art, ihn zu schreiben.
Häufige Fragen
Wird irgendetwas an einen Server geschickt?
Nein. Dieses Tool ist als "client" gekennzeichnet: Die Umrechnung sind ein paar Zeilen Arithmetik in deinem Browser-Tab. Es wird nichts übertragen und nichts gespeichert.
Warum sieht die Mitte zwischen zwei meiner Farben falsch aus?
Mit ziemlicher Sicherheit das oben beschriebene Gamma-Problem. Hex-Werte zu mitteln behandelt sRGB-Zahlen, als wären sie Lichtmengen — sind sie nicht, sie sind wahrnehmungskodiert. Um zwei Farben korrekt zu mischen, rechne jeden Kanal in lineares Licht um, mittle dort und rechne zurück. Oder nimm einen Farbraum, der dafür gemacht ist: In Oklch zu interpolieren gibt weiche Ergebnisse ohne trübes Band, und CSS unterstützt das inzwischen direkt in Verläufen.
Ist Hex besser als rgb()?
Sie sind in ihrer Ausdruckskraft identisch, es ist also eine Frage der Lesbarkeit. Hex ist kürzer und dominiert Designwerkzeuge, weshalb die meisten Codebasen es verwenden. rgb() lässt sich leichter durchdenken, wenn ein Wert aus einer Variablen oder Berechnung kommt, und die moderne Syntax rgb(255 0 0 / 50%) behandelt Alpha lesbarer, als ein achtstelliges Hex es je wird. Konsistenz innerhalb einer Codebasis zählt mehr als die Wahl selbst.
Spielt die Groß-/Kleinschreibung der Buchstaben eine Rolle?
Nein. #FF0000 und #ff0000 sind für jeden Parser dieselbe Farbe. Kleinschreibung ist die verbreitetere Konvention in CSS und das, was die meisten Formatierer erzeugen; Großschreibung ist in Designwerkzeugen häufiger. Wähle eine und lass sie von einem Formatierer durchsetzen, denn gemischte Schreibweise in einer Codebasis macht Farben schwerer greppbar, als es sein müsste.
Wie bekomme ich eine hellere oder dunklere Version einer Farbe?
Nicht durch Multiplizieren der Hex-Kanäle — das ist der intuitive Zug und liefert die oben beschriebenen trüben Ergebnisse. Rechne in HSL oder besser Oklch um, passe die Helligkeit an und rechne zurück. Oklch lohnt hier die Lernkurve, weil seine Helligkeitsachse wahrnehmungsgleichmäßig ist: Zehn Punkte Helligkeit dazuzugeben wirkt wie derselbe Schritt, egal von welchem Farbton du startest — genau das, was eine Farbrampe in einem Designsystem braucht, und genau das, was HSL dir nicht gibt.