El selector de color trabaja en OKLCH, el espacio de color perceptual del CSS moderno. A lo ancho del área, el croma va del gris al máximo que la pantalla puede mostrar con esa luminosidad, así que cada punto es un color que puedes usar, y el tirador no se mueve cuando gira el tono.
El campo acepta cualquier color de CSS, nombres incluidos, y el botón de formato escribe el valor en hexadecimal, rgb(), hsl(), oklch() o color(display-p3). Un color fuera de la gama de un formato se lleva a ella como lo hace CSS, conservando su luminosidad y su tono.
Añade swatches para elegir entre muestras, y contrastWith para comprobar el contraste del color sobre un fondo tal como lo mide WCAG 2. Si el navegador tiene cuentagotas, un botón toma un color de la pantalla.
Un color de marca
Muestras con nombre y el contraste de un texto blanco sobre el color: elige uno claro y AA falla.
#4f46e5
Gama amplia
gamut="p3" llena el área con colores Display P3, y una línea discontinua marca dónde termina sRGB. El valor sigue en oklch().
En un popover
Un botón que muestra el color abre el selector en un popover.