Saturation

import { ColorPicker, useColorState } from 'react-beautiful-color';

export function SaturationExample() {
const [{ colorInput, colorState }, setColor] = useColorState({ type: 'hex', value: '#ff6b9d' });

return (
<div className="p-6">
  <div className="max-w-md">
    <h4 className="mb-3 text-sm font-medium">Saturation Selector</h4>
    <ColorPicker
      color={colorInput}
      onChange={setColor}
      className="mb-4 max-h-40"
    >
      <ColorPicker.Saturation className="max-h-40" />
    </ColorPicker>
    <div className="space-y-1 text-sm">
      <div>
        <div>Current Saturation: {Math.round(colorState.hsv.s)}%</div>
        <div>Current Brightness: {Math.round(colorState.hsv.v)}%</div>
        <div>
          Color: <span className="font-mono">{colorState.hex}</span>
        </div>
      </div>
    </div>
  </div>
</div>
);
}