颜色选择器基于 OKLCH 工作，这是现代 CSS 中符合人眼感知的色彩空间。在取色区域中，色度从左到右由灰色增加到屏幕在该亮度下能显示的最大值，因此每个点都是可用的颜色；转动色相时，手柄也会停在原处。
输入框接受任何 CSS 颜色，包括颜色名称；格式按钮会把值写成 hex、rgb()、hsl()、oklch() 或 color(display-p3)。超出某种格式色域的颜色，会按 CSS 的方式映射到该色域内，并保持亮度和色相不变。
添加 swatches 可提供候选颜色，添加 contrastWith 则可按 WCAG 2 的算法检查颜色与背景的对比度。浏览器支持吸管时，还会有一个按钮用来从屏幕上取色。
品牌色
带名称的色块，以及白色文字在该颜色上的对比度：选一个浅色，AA 就不达标。
Contrast 6.28:1 AA passes AAA fails
#4f46e5
广色域
gamut="p3" 用 Display P3 颜色填满取色区域，并用虚线标出 sRGB 的边界。值仍以 oklch() 表示。
放在弹出框中
一个显示当前颜色的按钮，会在弹出框中打开选择器。