The color picker works in OKLCH, the perceptual color space of modern CSS. Across the area, chroma runs from gray to the most the screen can show at that lightness, so every point is a color you can use, and the thumb stays put as the hue turns.
The field takes any CSS color, names included, and the format button writes the value as hex, rgb(), hsl(), oklch() or color(display-p3). A color outside a format’s gamut is brought into it the CSS way, keeping its lightness and hue.
Add swatches to pick from, and contrastWith to check the color against a background as WCAG 2 measures contrast. Where the browser has an eyedropper, a button picks a color from the screen.
A brand color
Named swatches, and the contrast of white text on the color: pick a light one, and AA fails.
#4f46e5
Wide gamut
gamut="p3" fills the area with Display P3 colors, and a dashed line marks where sRGB ends. The value stays in oklch().
In a popover
A button that shows the color opens the picker in a popover.