Playground

<ColorPicker.Root
  value={color}
  onValueChange={setColor}
  backgroundColor="color(display-p3 0.1647058823529413 0.16470588235294112 0.1647058823529412)"
>
  <div className="flex items-stretch gap-2">
    <ColorPicker.GamutBadge showLabel={false} className="w-auto flex-1 justify-center" />
    <ColorPicker.ContrastReadout metrics={["wcag","apca"]} showLabel={false} showValue={false} className="w-auto flex-1 justify-center" />
  </div>
  <ColorPicker.Area mode="oklch-cl" />
  <div className="flex flex-col gap-1.5">
    <ColorPicker.Hue />
    <ColorPicker.Alpha />
  </div>
  <div className="flex items-center gap-2">
    <ColorPicker.FormatSwitcher className="flex-1" />
    <ColorPicker.EyeDropper className="h-8 w-full flex-1" />
  </div>
  <ColorPicker.ChannelInput showFormat={false} />
  <ColorPicker.Swatches presets={[…]} onAdd={(_c, hex) => savePreset(hex)} />
</ColorPicker.Root>