Farben

Farbe auf Bildschirmen

Die meisten Displays mischen Farben aus rotem, grünem und blauem Licht. Im üblichen 8-Bit-pro-Kanal-Modell reicht jeder Kanal von 0 bis 255 und ergibt 256³ ≈ 16,7 Millionen mögliche Farben. Zwei populäre Schreibweisen derselben Tripel beherrschen die Webarbeit: RGB-Funktionsnotation und hexadezimale Codes.

Wandeln Sie einen Hex-Wert mit dem Hex-zu-RGB-Werkzeug in dezimale Kanäle um.

RGB-Tripel

In CSS bedeutet rgb(34, 139, 34) Rot=34, Grün=139, Blau=34—ein waldähnliches Grün. Modernes CSS erlaubt auch rgb(34 139 34 / 0.8) mit Alpha (Deckkraft). Alpha gehört ohne Erweiterung nicht zur klassischen sechsstelligen Hex-Farbe; siehe achtstellige Hex unten.

RGB-Werte sind im Alltag-CSS gerätebezogen: sie beschreiben Signale an die Display-Pipeline, keinen garantierten Druckmatch. Für markenkritischen Druck nutzen Designer ICC-Profile und andere farbverwaltete Workflows.

Hex-Kodierung

Eine Hex-Farbe schreibt jeden Kanal als zwei Hexadezimalziffern. Hex-Ziffern laufen 0–9 dann A–F (ohne Groß-/Kleinschreibung), für 0–15. Zwei Ziffern stellen 0–255 dar, weil 16×16 = 256.

Beispiel: #228B22

• 22 hex → 2×16 + 2 = 34 dezimal (Rot)
• 8B hex → 8×16 + 11 = 139 dezimal (Grün)
• 22 hex → 34 dezimal (Blau)

Also entspricht #228B22 rgb(34, 139, 34).

Das führende # ist in HTML/CSS üblich. Manche Systeme lassen es weg; andere verlangen es.

Kurze Hex-Form

CSS erlaubt dreistelliges Hex #rgb als Kurzform, bei der jede Ziffer verdoppelt wird: #2A8 expandiert zu #22AA88. Praktisch für grobe Farben und Design-Tokens, aber nicht jedes 8-Bit-Tripel—nur Kanäle als Vielfache von 17 (0x00, 0x11, …, 0xFF).

Alpha in Hex

Achtstelliges Hex #RRGGBBAA hängt einen Alpha-Kanal an. #228B2280 ist grob 50 % Deckkraft je nach Skaleninterpretation (0x80 / 255 ≈ 0,502). Moderne Browser unterstützen das solide; für ältere Umgebungen rgba() / modernes rgb() mit Alpha bevorzugen.

Vierstelliges Kurz-Hex #rgba expandiert analog durch Zifferverdopplung.

Hex → RGB von Hand umrechnen

1. # entfernen.
2. Bei Länge 3 oder 4 Ziffern expandieren.
3. In Paare teilen.
4. Jedes Paar als Basis 16 parsen.
5. Optional Alpha-Paar durch Division durch 255 in Float 0–1 wandeln.

RGB → Hex umrechnen

1. Kanäle auf Ganzzahlen 0–255 klemmen.
2. Jeden in zwei Hex-Ziffern wandeln (bei Bedarf mit führender Null auffüllen).
3. Nach # konkatenieren.

Rundung entsteht bei Formaten mit größerem Gamut oder Dezimal-Kanälen—entscheiden Sie Rundung oder Trunkierung und bleiben Sie konsistent.

HSL und andere Modelle

Designer denken oft in HSL (Farbton, Sättigung, Helligkeit), weil Tintanpassungen natürlich wirken. Computer rastern für typische Displays weiterhin nach RGB. HSL↔RGB ist für den CSS-Gamut bei sorgfältiger Umsetzung verlustfrei, aber Zwischenrundung kann nach vielen Roundtrips driftieren.

Andere Modelle (CIELAB, OKLCH, Display P3) erscheinen in modernem CSS für Wahrnehmungsuniformität oder breitere Gamuts. Hex und sRGB bleiben Lingua franca von Design-Tokens und älteren Specs.

Barrierefreiheit: Kontrast zählt mehr als Codes

Ob #333333 oder rgb(51,51,51)—die Lesbarkeit hängt vom Kontrast zum Hintergrund ab. WCAG-Kontrastverhältnisse vergleichen relative Luminanzen. Schöne Hex-Codes ohne Kontrastprüfung machen Text schwer lesbar. Koppeln Sie Farbwerkzeuge mit einem Kontrast-Checker für Fließtext und UI-Chrome.

Designsysteme und Tokens

Teams speichern Markenfarben als benannte Tokens (--color-brand-600: #228B22), damit Komponenten keine zufälligen Hex-Strings hardcoden. Dokumentieren Sie Hex und RGB, wenn Plattformen unterschiedliche APIs brauchen (natives Mobile will oft Float-Kanäle 0–1).

Eine Single Source of Truth behalten; andere Formate generieren. Parallel handgepflegte Listen driften.

Häufige Fehler

• #RGB-Expansionsregeln verwechseln.
• Vergessen, dass 100% in modernem CSS-RGB nicht dieselbe Syntax wie Ganzzahlen 0–255 ist.
• Annehmen, Bildschirm-Hex treffe Pantone-Druck ohne Farbmanagement.
• Reines #000000 auf #111111 für „subtilen“ Text—Kontrast kann bei kleiner Schrift scheitern.
• Hex mit Regex parsen, die ungerade Längen ohne Validierung erlaubt.

Programmatische Tipps

• Hex in der Codebasis einheitlich groß oder klein für Diff-Stabilität.
• Strikt validieren: ^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$ (anpassen, wenn Kurzformen verboten).
• Bei Animationsinterpolation in linearen Raum wandeln oder moderne CSS-Farbinterpolation nutzen—nicht naiv Hex-Strings als Text lerpen.

Workflow mit Konvertern

Wenn ein Design-Tool Hex exportiert und eine Grafik-API Bytes will:

1. Hex in einen Konverter einfügen.
2. Kanäle bestätigen.
3. Ganzzahlen oder normalisierte Floats an die API geben.
4. Einige Markenfarben visuell gegenprüfen.

Das Werkzeug from-hex-to-rgb ist für diese schnelle Bestätigungsschleife gebaut.

Zusammenfassung

Hex-Farben sind Basis-16-Schreibweisen von RGB-Kanalbytes. Sechsstelliges Hex mappt direkt auf drei Komponenten 0–255; kurze und achtstellige Formen erweitern das für Kürze und Alpha. Lernen Sie die paarweise Umrechnung einmal, halten Sie Tokens konsistent und prüfen Sie Kontrast—denn das gewählte Format zählt weniger als die Lesbarkeit der Oberfläche.