Выбор цвета работает в OKLCH — перцептивном цветовом пространстве современного CSS. Слева направо по области насыщенность растёт от серого до максимума, который экран может показать при данной светлоте, поэтому любая точка — это цвет, который можно использовать, а при смене цветового тона маркер остаётся на месте.
Поле принимает любой цвет CSS, включая именованные, а кнопка формата записывает значение как hex, rgb(), hsl(), oklch() или color(display-p3). Цвет вне охвата формата приводится к нему так, как это делает CSS: светлота и тон сохраняются.
Добавьте swatches — образцы для выбора — и contrastWith, чтобы проверять контраст цвета с фоном так, как его измеряет WCAG 2. Если в браузере есть пипетка, кнопка берёт цвет прямо с экрана.
Фирменный цвет
Именованные образцы и контраст белого текста на выбранном цвете: выберите светлый, и уровень AA не будет пройден.
#4f46e5
Широкий охват
gamut="p3" заполняет область цветами Display P3, а пунктирная линия показывает, где заканчивается sRGB. Значение остаётся в oklch().
В popover
Кнопка, на которой виден цвет, открывает выбор цвета в popover.