Der Farbwähler arbeitet in OKLCH, dem wahrnehmungsbasierten Farbraum des modernen CSS. Quer über die Fläche reicht das Chroma von Grau bis zum Höchstwert, den der Bildschirm bei dieser Helligkeit zeigen kann. So ist jeder Punkt eine nutzbare Farbe, und der Griff bleibt an seiner Stelle, während sich der Farbton dreht.
Das Feld nimmt jede CSS-Farbe an, auch Farbnamen, und der Format-Button schreibt den Wert als Hex, rgb(), hsl(), oklch() oder color(display-p3). Eine Farbe außerhalb des Farbumfangs eines Formats wird wie in CSS in diesen abgebildet, Helligkeit und Farbton bleiben dabei erhalten.
Füge swatches hinzu, um aus Farbfeldern zu wählen, und contrastWith, um den Kontrast der Farbe zu einem Hintergrund so zu prüfen, wie WCAG 2 ihn misst. Wo der Browser eine Pipette hat, nimmt ein Button eine Farbe vom Bildschirm auf.
Eine Markenfarbe
Benannte Farbfelder und der Kontrast von weißem Text auf der Farbe: Wähle eine helle, und AA fällt durch.
#4f46e5
Großer Farbumfang
gamut="p3" füllt die Fläche mit Farben aus Display P3, und eine gestrichelte Linie zeigt, wo sRGB endet. Der Wert bleibt in oklch().
In einem Popover
Ein Button, der die Farbe zeigt, öffnet den Farbwähler in einem Popover.