Il selettore di colore lavora in OKLCH, lo spazio colore percettivo del CSS moderno. Sull’asse orizzontale dell’area, il croma va dal grigio al massimo che lo schermo può mostrare a quella luminosità: ogni punto è quindi un colore utilizzabile, e il cursore resta fermo mentre la tonalità ruota.
Il campo accetta qualsiasi colore CSS, nomi compresi, e il pulsante del formato scrive il valore in esadecimale, rgb(), hsl(), oklch() o color(display-p3). Un colore fuori dal gamut di un formato viene riportato al suo interno come fa CSS, mantenendo luminosità e tonalità.
Aggiungi swatches per scegliere tra dei campioni, e contrastWith per verificare il contrasto del colore con uno sfondo, misurato secondo WCAG 2. Dove il browser ha un contagocce, un pulsante preleva un colore dallo schermo.
Un colore del brand
Campioni con nome e il contrasto di un testo bianco sul colore: scegline uno chiaro e AA non passa.
#4f46e5
Gamut esteso
gamut="p3" riempie l’area di colori Display P3, e una linea tratteggiata segna dove finisce sRGB. Il valore resta in oklch().
In un popover
Un pulsante che mostra il colore apre il selettore in un popover.