Color Picker

Without children, ColorPicker is a swatch that opens the default panel in a popover.

Parts

• `ColorPickerTrigger` + `ColorPickerContent`: a popover.
• `ColorPickerPanel`: a column of controls, or a standalone inline picker.
• `ColorPickerArea`: OKLCH chroma × lightness at the hue (the part sRGB can't show is left blank), or HSB saturation × brightness.
• `ColorPickerWheel`: a hue ring whose children fill the square inside it.
• `ColorPickerSlider`: any channel of OKLCH, HSL, HSB or RGB, or alpha; horizontal or vertical, painted with the colors it reaches.
• `ColorPickerFields`: a format menu with hex or per-channel fields; ColorPickerChannelInput for a single channel.
• `ColorPickerInput`: a text field taking any CSS color (Escape reverts), with a swatch that opens the popover against it.
• `ColorPickerSwatches`: presets, Tailwind's palette by default; ColorPickerSwatch for one.
• Extras: ColorPickerValue, ColorPickerCopy, ColorPickerEyeDropper, ColorPickerPreview and ColorPickerFixContrast.
• `useColorPicker`: reads and sets the color from custom parts.

Value

• Events: onChange fires while dragging and onChangeEnd once an interaction ends.
• `format`: what they emit — oklch by default, hex, rgb or hsl; alpha adds opacity controls.
• Forms: name submits the value with a form (a hidden input), and a form reset restores the starting color.

Contrast

Given a background (contrastWith), every part shows contrast: the area hatches what fails AA and draws the AA and AAA thresholds across it, tracks hatch and mark them, presets failing AA are hatched, the preview shows the WCAG ratio, and "Fix to AA/AAA" jumps to the nearest passing lightness keeping the hue.

labels translates every text it shows or announces.