Über dieses Tool
Vier Schreibweisen für dieselbe sRGB-Farbe
HEX, RGB, HSL und HWB sind vier Arten, eine Farbe in sRGB zu notieren, dem Standardfarbraum des Webs. HEX und RGB geben den Rot-, Grün- und Blaukanal direkt an, jeweils von 0 bis 255. HSL gibt einen Farbtonwinkel, eine Sättigung und eine Helligkeit an; HWB gibt denselben Farbtonwinkel an, dazu einen Weiß- und einen Schwarzanteil, die beigemischt werden. Beim Umrechnen ändert sich die Schreibweise, nicht die Farbe.
Ein achtstelliger Hex-Code wie #5a3ff080 oder ein vierter Wert nach einem Schrägstrich wie rgb(90 63 240 / 0.5) fügt einen Alphakanal hinzu. Die Form mit Leerzeichen ist die Syntax von CSS Color Level 4 und funktioniert in jedem aktuellen Browser; die Form mit Kommas, rgba(90, 63, 240, 0.5), ist für ältere Tools gedacht.
Was OKLCH und OKLab bieten
OKLab ist ein Farbraum, den Björn Ottosson 2020 so entworfen hat, dass gleich große Zahlenschritte für das Auge auch gleich groß wirken. OKLCH ist derselbe Farbraum in Polarform: Helligkeit von 0 bis 1, Chroma (wie bunt die Farbe ist) und ein Farbtonwinkel. Zwei OKLCH-Farben mit gleicher Helligkeit wirken ungefähr gleich hell. Bei HSL ist das nicht so: Ein Gelb und ein Blau mit 50 % Helligkeit unterscheiden sich dort deutlich.
OKLCH kann auch Farben beschreiben, die ein sRGB-Bildschirm nicht darstellen kann. Wenn Sie eine solche Farbe eingeben, behält dieses Tool Helligkeit und Farbton bei und senkt das Chroma, bis die Farbe hineinpasst, und weist Sie darauf hin.
Wie das Kontrastverhältnis berechnet wird
WCAG 2 definiert den Kontrast als (L1 + 0.05) / (L2 + 0.05), wobei L1 und L2 die relative Leuchtdichte der helleren und der dunkleren Farbe sind. Das Ergebnis reicht von 1:1 bei zwei identischen Farben bis 21:1 bei Schwarz auf Weiß.
Stufe AA verlangt mindestens 4,5:1 für normalen Text und 3:1 für großen Text; Stufe AAA verlangt 7:1 und 4,5:1. Großer Text bedeutet mindestens 24 CSS-Pixel oder etwa 18,7 Pixel in Fettschrift. Das hier angezeigte Verhältnis wird abgerundet, denn ein Paar mit 4,499:1 erfüllt 4,5:1 nicht.
Wie dieses Tool die Werte berechnet
Die Umrechnungen laufen in JavaScript in Ihrem Browser, mit der sRGB-Transferfunktion und den OKLab-Matrizen, die mit dem Farbraum veröffentlicht wurden. Jeder Wert wird auf wenige Nachkommastellen gerundet, und zwar so, dass er mit diesen Formeln wieder dieselbe 8-Bit-Farbe ergibt. Ein Browser kann OKLCH und OKLab mit leicht abweichenden Konstanten berechnen, daher kann ein eingefügter OKLCH- oder OKLab-Wert in einem Kanal um ein oder zwei von 255 Stufen abweichen, am häufigsten bei einem gesättigten Grün. Der nächste Farbname ist der mit dem geringsten Abstand in OKLab.