Methodik für Farben

Das Farb-Cluster erledigt Umrechnungen zwischen vier Darstellungen derselben zugrunde liegenden Farbe: HEX (#FF6B35), RGB (255, 107, 53), HSL (16°, 100 %, 60 %) und HSV (16°, 79 %, 100 %). Alle vier beschreiben eine Farbe im selben Farbraum — sRGB —, sodass die Umrechnungen algebraische Umbenennungen sind, keine perzeptuellen Neuabbildungen.

sRGB als universeller Anker

sRGB (Standard RGB) ist der Standardfarbraum des Webs, definiert durch den Standard IEC 61966-2-1 aus dem Jahr 1999. Er legt die exakten roten, grünen und blauen Primärfarben fest, die sich zu jeder darstellbaren Farbe kombinieren, plus eine nichtlineare Gammakurve, die die Reaktion eines typischen CRT-Monitors annähert. Moderne LCDs und OLEDs emulieren diese Kurve.

Jede HEX-Farbe, jeder rgb(…)-Wert, jeder CSS-Standard-hsl(…) nimmt sRGB an, sofern nicht anders gekennzeichnet. Neuere Weitgamut-Formate (Display P3, Rec.2020) existieren, erfordern aber ein explizites Opt-in über color(display-p3 …) oder Ähnliches — außerhalb des Umfangs dieses Clusters.

Die Umrechnungsmathematik

HEX ↔ RGB

Direkte Basisumrechnung: jedes Paar von Hex-Ziffern ist ein Byte (0–255). #FF6B35 ↔ rgb(255, 107, 53) exakt, ohne Präzisionsverlust. Dreistelliges Hex (#F63) ist die Kurzschreibweise für #FF6633.

RGB → HSL

Wandeln Sie R, G, B in den Bereich [0, 1] um. Finden Sie den maximalen und minimalen Kanal. Helligkeit L = (max + min) / 2. Die Sättigung hängt davon ab, ob L < 0,5 ist oder nicht. Der Farbton wird daraus berechnet, welcher Kanal der Maximalwert ist, und aus den relativen Unterschieden zwischen den Kanälen.

Die vollständige Formel ist Standard und ist in unserer Bibliothek exakt implementiert. Der Farbton wird in Grad [0, 360) angegeben; Sättigung und Helligkeit in Prozent [0, 100].

RGB → HSV

Ähnliche Logik. Wert V = max. Sättigung S = (max − min) / max, wenn max ≠ 0. Der Farbton ist mit dem HSL-Farbton identisch.

HSL und HSV unterscheiden sich auf der Sättigungsachse. Eine Farbe bei 100 % HSV-Sättigung ist voll gesättigt; bei 100 % HSL-Sättigung ist sie nur bei L = 0,5 voll gesättigt. Designer bevorzugen HSL zum Anpassen von Tönungen und Schattierungen; Bildbearbeitungs- programme stellen oft HSV bereit (Photoshop nennt es „HSB“ für „brightness“).

Präzision bei Hin- und Rückumrechnung

HEX ↔ RGB ist bitgenau. In beiden Richtungen verlustfrei umkehrbar.

RGB ↔ HSL / RGB ↔ HSV beinhalten Gleitkommaarithmetik. Die Präzision der Hin- und Rückumrechnung ist durch die 8-Bit- RGB-Ausgabe begrenzt — im schlimmsten Fall rundet ein Kanal um ±1 von 255 (etwa 0,4 %). Auf dem Display ist dies unsichtbar; bei farbkritischer Arbeit vermeiden Sie die Hin- und Rückumrechnung, wenn möglich.

Algorithmus-Details: HSL und HSV vollständig

Die Umrechnungsbibliothek liefert diese Formeln wortwörtlich; sie werden hier wiedergegeben, damit die Algebra sichtbar wird. Normalisierte Eingaben R, G, B ∈ [0, 1] mit M = max(R, G, B), m = min(R, G, B), Chroma C = M − m:

L = (M + m) / 2
S_HSL = C / (1 − |2L − 1|) if C ≠ 0, else 0
V = M
S_HSV = C / M if M ≠ 0, else 0

Der Farbton ist in beiden Modellen dieselbe Achse:

H = 60° × ((G − B) / C mod 6) if M = R
H = 60° × ((B − R) / C + 2) if M = G
H = 60° × ((R − G) / C + 4) if M = B

Die sRGB-Linearisierung, die bei der Berechnung der Leuchtdichte für Kontrast oder beim perzeptuellen Interpolieren angewendet wird, ist die stückweise Übertragung aus IEC 61966-2-1: linear = c/12.92 if c ≤ 0.04045, else ((c + 0.055)/1.055)^2.4. Die Hin- und Rückumrechnung durch den linearen Raum ist für das 8-Bit-sRGB-Raster bitgenau, weil die stückweise Umkehrung wohldefiniert ist.

Quellen & Referenzen

Jede Formel auf dieser Seite stammt aus einer primären Spezifikation oder einer peer-reviewten Veröffentlichung: sRGB-Primärfarben und Gamma aus IEC 61966-2-1, CSS-Syntax für hex/rgb/hsl aus W3C CSS Color Module Level 4, RGB↔HSV-Umrechnung aus Smiths Arbeit von 1978, Kontrastformel aus WCAG 2.2. Der Quellenblock am Fuß dieser Seite listet die öffentlich verfügbaren Versionen auf, die beim Testen der Bibliothek als Referenzwahrheit dienten.

Annahmen & Grenzen

• Durchgängig sRGB. Eingaben ohne explizite Farbraum-Kennzeichnung werden als sRGB angenommen. P3- / Rec.2020- / Adobe-RGB-Eingaben werden nicht automatisch erkannt und würden fehlinterpretiert, wenn sie als rohes RGB übergeben werden.
• 8-Bit-Ganzzahl-RGB. Hex-Eingaben werden pro Kanal auf [0, 255] begrenzt. 10- oder 12-Bit-HDR-Pipelines brauchen ein breiteres Format als #RRGGBB.
• HSL/HSV sind praktische Reparametrisierungen, keine perzeptuellen Räume. Gleiche numerische Änderungen in H, S oder L bilden keine gleichen perzeptuellen Änderungen ab — verwenden Sie OKLCH oder CIELAB für perzeptuell gleichförmige Arbeit.
• Keine chromatische Adaptation. Die Umrechnung zwischen Räumen mit unterschiedlichen Weißpunkten (D65 ↔ D50) erfordert eine Bradford- oder CAT02-Transformation, die wir nicht anwenden.
• CMYK erfordert ICC-Profile. Algebraische CMYK ≈ RGB-Näherungen im Web sind für den Druck durchweg falsch; wir geben überhaupt keinen CMYK-Wert aus.
• Alpha wird durchgereicht, nicht vormultipliziert.Die Hin- und Rückumrechnung durch HSL/HSV erhält den Alphakanal, wendet das Alpha aber nicht auf die Farbkomponenten an.

Was wir nicht behandeln

• Weitere Gamut-Räume (P3, Rec.2020) — außerhalb des Umfangs.
• Perzeptuell gleichförmige Räume (Lab, LCH, Oklab) — gelegentlich gewünscht; die Algebra ist aufwendiger. Erscheint vielleicht später als separates Tool.
• CMYK — druckspezifischer Farbraum; Umrechnungen erfordern ICC-Profile, nicht nur Algebra. Siehe unseren Vergleich RGB vs. CMYK.
• Alpha — RGB→HSL/HSV reichen Alpha durch. HEX mit Alpha (#RRGGBBAA) wird unterstützt.