ColorPicker
Full-featured colour selection input with hue, saturation, and hex/RGB editing.
Examples
Interactive
Click the swatch to open the native colour picker.
With Hex Input
Colour picker with an editable hex input field.
With Swatches
Quick-select preset colour swatches.
Disabled
Colour picker in a read-only disabled state.
#cccccc
Installation
pnpm add @rokle/components @rokle/tokensInstalls with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.
Usage
import { ColorPicker } from "@rokle/components";import { ColorPicker } from "@rokle/components";
export function Example() {
return <ColorPicker />;
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | - | Current colour value as a hex or CSS colour string. |
| onValueChange | (value: string) => void | - | Called when the colour changes. |
| format | "hex" | "rgb" | "hsl" | "hex" | Output colour format. |