Wie #FF6633 zu einer Farbe wird, was der Alpha-Kanal in #FF6633CC bedeutet und warum CSS heute lieber oklch() nutzt.

Wer schon mal eine Webseite gestylt hat, kennt die kryptische Schreibweise: color: #FF6633;. Was auf den ersten Blick aussieht wie ein Schlüsselcode, ist eine kompakte hexadezimale Notation für drei Zahlen, die zusammen eine Farbe ergeben. Die Logik dahinter ist erstaunlich greifbar, wenn man sie einmal aufgeschlüsselt hat.

Drei Kanäle, ein Byte pro Stück

Ein digitaler Bildschirm zeigt jede Farbe durch Mischen von drei Lichtfarben: Rot, Grün und Blau. Jeder Kanal hat eine Intensität von 0 (aus) bis 255 (volle Helligkeit). Das ergibt 256 Stufen pro Kanal, also genau ein Byte.

#FF6633 zerfällt damit so:

#  FF  66  33
   ↑   ↑   ↑
   R   G   B
   = 255, 102, 51

Volles Rot, etwas Grün, wenig Blau. Das Ergebnis ist ein warmer Orangeton. Wer die Hex-Werte ändert, ändert die Mischung.

Warum Hex statt Dezimal? Drei Gründe:

Kompaktheit. Drei Hex-Paare sind 6 Zeichen, dieselben Werte in Dezimal könnten bis zu 9 sein.
Lesbarkeit von Bitmustern. #FF8800 zeigt sofort, dass Rot voll ist (FF = 255) und die anderen Kanäle ausbalanciert.
Historie. Computergrafik hat traditionell mit Bytes und Hex gearbeitet, weil Bildschirmpuffer byteweise organisiert sind. Mehr dazu in unserem Artikel zu Hexadezimal.

Die Kurzform

CSS erlaubt auch eine 3-stellige Kurzform: #F63 ist äquivalent zu #FF6633. Jede Stelle wird verdoppelt. Das spart Zeichen, geht aber nur, wenn beide Hex-Ziffern jedes Kanals gleich sind. #F63 funktioniert, #FE63 nicht.

Alpha: der vierte Kanal

Moderne Browser unterstützen auch einen vierten Kanal: Alpha, die Deckkraft. Geschrieben als zusätzliches Hex-Paar:

#FF6633CC
       ↑↑
       Alpha = CC = 204 = 80% Deckkraft

CC von FF heißt rund 80 Prozent opak, 20 Prozent transparent. Mit #FF6633FF ist die Farbe vollständig deckend, mit #FF663300 komplett unsichtbar.

Auch hier gibt es die Kurzform: #F63C mit nur 4 Zeichen.

Vergleich zu rgb() und hsl()

CSS bietet drei alternative Schreibweisen für dieselbe Farbe:

.box { background: #FF6633; }
.box { background: rgb(255, 102, 51); }
.box { background: hsl(15, 100%, 60%); }

Alle drei sind dasselbe Orange. rgb() macht die Kanal-Werte explizit lesbar, hsl() (Hue, Saturation, Lightness) ist intuitiver für menschliches Farbverständnis: Farbton, Sättigung, Helligkeit.

Welche Schreibweise wann?

Hex für Konstanten, Design-Systeme, Pixel-genaue Vorgaben aus Figma oder Sketch.
rgb() / rgba() wenn die Werte berechnet werden (etwa aus einem Bild oder einer User-Eingabe).
hsl() / hsla() wenn Farbvarianten erzeugt werden sollen (heller, dunkler, gesättigter).

Die Grenzen von sRGB

Hex und klassisches RGB beschreiben Farben im sRGB-Farbraum, dem Standard für Bildschirme seit 1996. sRGB deckt nur einen Teil der für das menschliche Auge sichtbaren Farben ab. Moderne Displays können mehr darstellen (Wide-Color-Gamuts wie P3 oder Rec.2020), aber die alte Hex-Notation kann diese Farben nicht ausdrücken.

Außerdem ist sRGB nicht perzeptuell linear. Wer in HSL einen Helligkeitswert von 50 % einstellt, bekommt nicht halb so hell wie 100 %, sondern etwas anderes, weil das menschliche Auge Helligkeit nicht-linear wahrnimmt.

oklch(): die moderne Antwort

Aus diesem Grund hat CSS 2022 die Notation oklch() eingeführt. Sie basiert auf dem OKLab-Farbraum, der perzeptuell linear ist. Zwei Farben mit demselben Lightness-Wert wirken auf das Auge tatsächlich gleich hell.

.box { background: oklch(0.7 0.18 35); }

Die drei Werte: Lightness (0 bis 1), Chroma (Sättigung, 0 bis ungefähr 0.4), Hue (Farbton in Grad, 0 bis 360).

Auf binaer-umrechnen.de nutzen wir intern oklch() für alle Farben, weil sich damit Akzent-Paletten viel sauberer aufbauen lassen. Was Sie als theme-color="#0891b2" sehen, ist nur die Fallback-Schreibweise für ältere Browser.

ASCII-Hexa für Bilder

Bilddateiformate wie PNG oder JPEG speichern Farben byteweise, in der Reihenfolge der Pixel. Wer ein Hexdump eines unkomprimierten PNG anschaut, sieht die Pixel direkt: drei aufeinanderfolgende Bytes pro Pixel im 24-Bit-Format. Ein 100x100-Pixel-Bild belegt also 30.000 Bytes plus Header.

Komprimierung verändert diese rohe Form, sodass die Bytes im Speicher nicht mehr direkt lesbar sind. Aber konzeptuell bleibt jedes Pixel ein Triplet aus drei Bytes.

Designtipps für Webfarben

Kontrast prüfen. Web Content Accessibility Guidelines (WCAG) verlangen mindestens 4,5:1 Kontrast zwischen Text und Hintergrund. Tools wie WebAIM zeigen den Wert auf Knopfdruck.
Konsistente Paletten. Statt zufällige Hex-Codes besser einen Akzent-Hue wählen und davon Helligkeitsstufen ableiten. Mit oklch() einfach, mit Hex eher mühsam.
Dark Mode mitdenken. Hex-Codes sind statisch, aber Tools wie CSS-Variablen können je nach prefers-color-scheme unterschiedliche Werte liefern.

Werkzeuge

Wer eine RGB-zu-Hex-Umrechnung braucht, kann sie mit unserem Hex-zu-Binär-Konverter prüfen: einfach den Hex-Wert eingeben, die binäre Darstellung zeigt die Bits jedes Kanals einzeln. Aus dem Bitmuster lässt sich die Helligkeit jedes Kanals direkt ablesen.

RGB-Hex-Farbcodes: warum Webfarben hexadezimal sind