Le sélecteur de couleur travaille en OKLCH, l’espace colorimétrique perceptuel du CSS moderne. Sur la largeur de la zone, le chroma va du gris au maximum que l’écran peut afficher à cette luminosité : chaque point est donc une couleur utilisable, et la poignée reste en place quand la teinte tourne.
Le champ accepte toute couleur CSS, noms compris, et le bouton de format écrit la valeur en hexadécimal, rgb(), hsl(), oklch() ou color(display-p3). Une couleur hors du gamut d’un format y est ramenée à la manière de CSS, en gardant sa luminosité et sa teinte.
Ajoutez swatches pour choisir parmi des échantillons, et contrastWith pour vérifier le contraste de la couleur sur un fond, tel que WCAG 2 le mesure. Si le navigateur dispose d’une pipette, un bouton prélève une couleur à l’écran.
Une couleur de marque
Des échantillons nommés et le contraste d’un texte blanc sur la couleur : choisissez-en une claire, et AA échoue.
#4f46e5
Gamut étendu
gamut="p3" remplit la zone de couleurs Display P3, et une ligne pointillée marque la limite de sRGB. La valeur reste en oklch().
Dans un popover
Un bouton qui affiche la couleur ouvre le sélecteur dans un popover.