ColorPicker
A saturation and brightness surface with hue, opacity, swatches and a typed color value.
Installation
Import from the Reflow workspace package.
Default
Open demoimport { ColorPicker } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
return () => (
<>
<ColorPicker defaultFormat="hex" variant="inline" hideEyedropper={false} disabled={false} swatches={[]} triggerLabel="Fill" placement="right-start" />
</>
)
}Default
import { ColorPicker } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
return () => (
<>
<ColorPicker defaultValue="#6B97FF" />
</>
)
}Popover
import { ColorPicker } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
return () => (
<>
<ColorPicker variant="popover" triggerLabel="Fill" defaultValue="#6B97FF" />
</>
)
}With Swatches
import { ColorPicker } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
return () => (
<>
<ColorPicker defaultValue="#6B97FF" swatches={['#000000', '#FFFFFF', '#FF3B30', '#F0F0F0', '#E5E5E5', '#D0D0D0', 'rgba(0,0,0,0.5)']} />
</>
)
}OKLCH Format
import { ColorPicker } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
return () => (
<>
<ColorPicker defaultFormat="oklch" defaultValue="#6B97FF" />
</>
)
}Controlled
import { ColorPicker } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
let color = '#6B97FF'
const setColor = (value: string) => { color = value; handle.update() }
return () => (
<>
<ColorPicker value={color} onValueChange={setColor} />
<output>{color}</output>
</>
)
}Removable Trigger
{fill ? (
<ColorPicker variant="popover" triggerLabel="Fill" triggerShowRemove
onTriggerRemove={() => setFill('')} value={fill} onValueChange={setFill} />
) : <Button mix={on('click', () => setFill('#6B97FF'))}>+ Add fill</Button>}Eyedropper Support
The eyedropper uses the native window.EyeDropper API (Chromium-based browsers). It is automatically hidden in browsers that do not support it.
import { ColorPicker } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
return () => (
<>
<ColorPicker defaultValue="#6B97FF" />
</>
)
}API Reference
Public props for the Reflow implementation. Native controls also accept their standard HTML attributes and Remix event mixes.
ColorPicker
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "inline" | "popover" | — | Visual or layout treatment. |
label | string | Color | Accessible name or visible label for the control. |
name | string | — | Name used when the control participates in a form. |
value | string | — | Current value when controlled by the parent. |
defaultValue | string | — | Initial value for an uncontrolled component. |
onValueChange | ((value: string) => void) | — | Called when the selected value changes. |
format | "hex" | "rgb" | "hsl" | "oklch" | — | Controlled color format. |
defaultFormat | "hex" | "rgb" | "hsl" | "oklch" | — | Initial color format. |
onFormatChange | ((format: ColorFormat) => void) | — | Called when the color format changes. |
swatches | ColorSwatchItem[] | — | Preset colors shown below the editor. |
hideEyedropper | boolean | — | Hides the eyedropper action. |
disabled | boolean | — | Prevents interaction and conveys the disabled state. |
size | "default" | "compact" | — | Control density or icon-button dimensions. |