O seletor de cor trabalha em OKLCH, o espaço de cor perceptual do CSS moderno. Na largura da área, o croma vai do cinza ao máximo que a tela consegue mostrar naquela luminosidade, então todo ponto é uma cor que você pode usar, e o marcador fica no lugar quando o matiz gira.
O campo aceita qualquer cor CSS, inclusive nomes, e o botão de formato escreve o valor em hex, rgb(), hsl(), oklch() ou color(display-p3). Uma cor fora da gama de um formato é trazida para dentro dela como o CSS faz, mantendo a luminosidade e o matiz.
Adicione swatches para escolher entre amostras, e contrastWith para verificar o contraste da cor sobre um fundo do jeito que a WCAG 2 o mede. Onde o navegador tem conta-gotas, um botão pega uma cor da tela.
Uma cor de marca
Amostras com nome e o contraste de um texto branco sobre a cor: escolha uma clara, e o AA falha.
#4f46e5
Gama ampla
gamut="p3" preenche a área com cores Display P3, e uma linha tracejada marca onde o sRGB termina. O valor continua em oklch().
Em um popover
Um botão que mostra a cor abre o seletor em um popover.