color/

Farbnamen werden nicht unterstützt, du erhältst die Meldung „Unbekanntes Format“. Möglich sind HEX (3, 4, 6 oder 8 Stellen, das # darf fehlen), rgb() / rgba(), hsl() / hsla() und oklch(). Die Argumente können durch Kommas getrennt sein oder durch Leerzeichen, dann mit einem Schrägstrich für die Deckkraft (z. B. rgb(255 0 0 / 50%)); beim Farbton von HSL sind die Einheiten deg, rad, grad und turn erlaubt. Die Ausgabe ist immer HEX, RGB, HSL und OKLCH, CMYK und HSV gibt es nicht.

Er steht in den letzten beiden Stellen, geschrieben als #RRGGBBAA, genau wie in CSS. Das unter Android verbreitete #AARRGGBB setzt den Alpha-Wert an den Anfang; verschiebe die ersten beiden Stellen ans Ende, bevor du den Wert einfügst. Zwei Hexadezimalstellen ergeben nur 256 Stufen, daher wird 80 (dezimal 128) zu 0.502 und nicht zu einem glatten 0.5; umgekehrt ergibt eine eingegebene Deckkraft von 0.5 am Ende des HEX-Werts 80.

Liegt eine Farbe außerhalb dessen, was sRGB darstellen kann, begrenzt das Tool die Kanäle Rot, Grün und Blau einzeln auf den gültigen Bereich und gibt die begrenzte Farbe aus. Werte wie rgb() über 255 oder eine HSL-Sättigung bzw. -Helligkeit über 100 % werden stillschweigend begrenzt; nur bei OKLCH erscheint der Hinweis „Außerhalb des sRGB-Farbraums“, weil sich damit Farben beschreiben lassen, die kräftiger sind als sRGB. Das OKLCH in der Ausgabe wird dann aus der begrenzten Farbe neu berechnet und weicht daher von deiner Eingabe ab. Auf Displays mit großem Farbraum kann ein direkt in CSS geschriebenes oklch() kräftiger aussehen als die Vorschau hier.

Das Tool vergleicht deine Farbe nur mit reinem Weiß und reinem Schwarz, also als Textfarbe auf weißem und auf schwarzem Hintergrund; einen anderen Hintergrund kannst du nicht festlegen. Die Berechnung folgt WCAG 2.x: Jeder sRGB-Kanal wird in einen linearen Wert umgerechnet und mit 0,2126, 0,7152 und 0,0722 gewichtet, das ergibt die relative Helligkeit L. Der Kontrast ist (hellere L + 0,05) ÷ (dunklere L + 0,05). Für zwei beliebige andere Farben kannst du dieselbe Formel selbst anwenden.

AA und AAA sind die beiden Konformitätsstufen der WCAG für den Textkontrast, AAA ist strenger. Für normalen Text verlangt AA 4,5 : 1 und AAA 7 : 1, für großen Text AA 3 : 1 und AAA 4,5 : 1. Das Tool markiert jeden Wert als „bestanden“ oder „nicht bestanden“. „Großer Text“ ist Text ab 18 pt (etwa 24 px) oder fetter Text ab 14 pt (etwa 18,7 px). Bei Websites ist AA meist das Ziel.

Die Farbe wird zuerst entsprechend ihrer Deckkraft auf den Hintergrund gelegt, und der Kontrast wird mit dem Ergebnis berechnet. Die Zeile „Auf Weiß“ legt sie über reines Weiß, die Zeile „Auf Schwarz“ über reines Schwarz; dieselbe halbtransparente Farbe geht also in beiden Zeilen als unterschiedliche Farbe in die Rechnung ein. Ist der echte Hintergrund auf deiner Seite nicht reines Weiß oder Schwarz, weicht das Ergebnis ab, prüfe es dann selbst nach.

Nein. Der Farbwähler ist ein Steuerelement des Browsers und kann nur deckende 6-stellige HEX-Farben auswählen. Nach einer Auswahl wird das Eingabefeld durch #rrggbb ersetzt und eine vorherige Deckkraft geht verloren; für eine halbtransparente Farbe gib direkt im Eingabefeld ein 8-stelliges HEX oder rgb(255 0 0 / 50%) ein. Steht im Eingabefeld eine halbtransparente Farbe, zeigt der Farbwähler nur ihren deckenden Teil.

Kopiere sie in eine :root-Regel, dann kannst du sie sofort nutzen. Die vier Zeilen sind das HEX, die drei R-G-B-Zahlen durch Leerzeichen getrennt, die drei H-S-L-Werte und das vollständige oklch(). --color-rgb und --color-hsl enthalten keine Deckkraft, damit du sie spontan anpassen kannst, etwa mit rgb(var(--color-rgb) / 50%); diese Schreibweise mit Leerzeichen und Schrägstrich braucht einen halbwegs aktuellen Browser. Ist die Farbe selbst halbtransparent, enthalten nur --color und --color-oklch die Deckkraft.