Saturation/Value Color Plane
Choose a color’s saturation and value on a labelled two-axis plane.
Brand color saturation and value
Hue 210°, saturation 68%, value 82%Hue 210 degrees, saturation 68 percent, value 82 percent
Customise
Code
<InputSaturationValuePlane hue={210} saturation={68} value={82} />Input Saturation/Value Plane is a caller-controlled HSV input for visual color adjustment. Drag or use the keyboard to preview a point, then commit it; numeric percentage fields provide a precise alternative.
The hue and the current coordinates remain owned by the consumer. Pointer movement previews without changing the supplied value; release commits once. Escape or pointer cancellation restores the supplied coordinates. Numeric fields retain fractional text while typing, preview valid intermediate values, and commit once on Enter or blur. New props from the consumer replace the displayed coordinates.
This component selects color values only. It does not sample pixels from an image or manage color naming, persistence, or application-specific color rules.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/input-saturation-value-planeUsage
import { InputSaturationValuePlane } from "@/components/input-saturation-value-plane";
<InputSaturationValuePlane
label="Brand color saturation and value"
hue={210}
saturation={68}
value={82}
onPreviewChange={(selection) => setPreview(selection)}
onCommit={(selection) => setColor(selection)}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| hue | number | required | Controlled HSV hue in degrees, clamped to the 0–359 range. |
| saturation | number | required | Controlled saturation percentage from 0 to 100. |
| value | number | required | Controlled value/brightness percentage from 0 to 100. |
| label | string | required | Accessible name for the two-axis selection plane. |
| onPreviewChange | (selection: InputSaturationValueSelection) => void | undefined | Optional callback receiving each drag/keyboard preview and the preview immediately before a numeric commit. |
| onCommit | (selection: InputSaturationValueSelection) => void | undefined | Optional callback receiving one committed selection on pointer release, Enter/Space, or numeric edit. |
| onCancel | () => void | undefined | Optional callback called when Escape or pointer cancellation restores the supplied coordinates. |
| className | string | undefined | Additional classes merged onto the component wrapper. |
Customisation
The caller owns the surrounding form, hue selection, and color persistence. The component provides a responsive plane and numeric alternatives using semantic theme colors.
.palette-field { max-inline-size: 38rem; }Frequently asked questions
- Does this sample colors from an image?
- No. It is a two-axis color input for saturation and value at a supplied hue.
- When should I update my controlled color?
- Use onPreviewChange for a temporary preview and onCommit for a saved selection. Escape and pointer cancellation call onCancel.