Color Picker

An HSV-based color picker with hue and alpha sliders, hex/RGB inputs, custom swatches, and three trigger styles.

Basic Usage

Default Color Picker

Click the trigger to open the picker. Supports hex, RGB, and alpha editing.

Controlled (#3b82f6)

Uncontrolled

No alpha channel

Editable (type a hex code)

Disabled

import { ColorPicker } from 'fluxo-ui';

const [color, setColor] = useState('#3b82f6');

<ColorPicker value={color} onChange={setColor} />

<ColorPicker defaultValue="#22c55e" />

<ColorPicker defaultValue="#f43f5e" showAlpha={false} />

Trigger Variants

Three trigger styles: button (icon + text), input (monospace code), and swatch (color-only).

button (default)

input

swatch

<ColorPicker variant="button" defaultValue="#3b82f6" />
<ColorPicker variant="input" defaultValue="#22c55e" />
<ColorPicker variant="swatch" defaultValue="#f59e0b" />

Sizes

Three trigger sizes.

<ColorPicker size="sm" defaultValue="#3b82f6" />
<ColorPicker size="md" defaultValue="#3b82f6" />
<ColorPicker size="lg" defaultValue="#3b82f6" />

Formats

Output Formats

Display the current value in hex, rgb, or rgba format.

hex

rgb

rgba (controlled: #3b82f6 @ 0.75)

<ColorPicker defaultValue="#3b82f6" format="hex" />
<ColorPicker defaultValue="#22c55e" format="rgb" />
<ColorPicker defaultValue="#f59e0b" format="rgba" />

Swatches & Panels

Custom Swatches & Panel Toggles

Pass your own palette via the swatches prop, or hide input fields and swatches for a minimal picker.

Brand palette

No swatches

Minimal (canvas only)

<ColorPicker
  defaultValue="#3b82f6"
  swatches={['#0f172a', '#1e293b', '#3b82f6', '#60a5fa', '#fb923c']}
/>

<ColorPicker defaultValue="#3b82f6" showSwatches={false} />

<ColorPicker defaultValue="#3b82f6" showInputs={false} showSwatches={false} />

Import

import { ColorPicker } from 'fluxo-ui';
import type { ColorPickerProps } from 'fluxo-ui';

Props

PropertyTypeDefaultDescription

value

string

—

Controlled hex color value.

value

string

Controlled hex color value.

defaultValue

string

"'#3b82f6'"

Initial hex color for uncontrolled usage.

defaultValue

string"'#3b82f6'"

Initial hex color for uncontrolled usage.

alpha

number

—

Controlled alpha value between 0 and 1.

alpha

number

Controlled alpha value between 0 and 1.

defaultAlpha

number

"1"

Initial alpha value.

defaultAlpha

number"1"

Initial alpha value.

format

'hex' | 'rgb' | 'rgba'

"'hex'"

Format used for the displayed trigger text.

format

'hex' | 'rgb' | 'rgba'"'hex'"

Format used for the displayed trigger text.

size

'sm' | 'md' | 'lg'

"'md'"

Trigger size.

size

'sm' | 'md' | 'lg'"'md'"

Trigger size.

variant

'button' | 'input' | 'swatch'

"'button'"

Trigger visual style.

variant

'button' | 'input' | 'swatch'"'button'"

Trigger visual style.

disabled

boolean

"false"

Disable interaction.

disabled

boolean"false"

Disable interaction.

readOnly

boolean

"false"

Display-only mode.

readOnly

boolean"false"

Display-only mode.

editable

boolean

"false"

When used with variant='input', renders a real text input so users can type a hex code manually. Valid hex updates the color live.

editable

boolean"false"

When used with variant='input', renders a real text input so users can type a hex code manually. Valid hex updates the color live.

showAlpha

boolean

"true"

Show the alpha slider and input.

showAlpha

boolean"true"

Show the alpha slider and input.

showInputs

boolean

"true"

Show hex/RGB/alpha input fields.

showInputs

boolean"true"

Show hex/RGB/alpha input fields.

showSwatches

boolean

"true"

Show the preset swatches grid.

showSwatches

boolean"true"

Show the preset swatches grid.

swatches

string[]

—

Custom palette of hex swatches.

swatches

string[]

Custom palette of hex swatches.

placeholder

string

"'Pick a color'"

ARIA label when none is provided.

placeholder

string"'Pick a color'"

ARIA label when none is provided.

onChange

(value: string, alpha: number) => void

—

Called when the color or alpha changes.

onChange

(value: string, alpha: number) => void

Called when the color or alpha changes.

onOpenChange

(open: boolean) => void

—

Called when the popover opens or closes.

onOpenChange

(open: boolean) => void

Called when the popover opens or closes.

Features

HSV Canvas

Click-and-drag saturation/value canvas with separate hue and alpha sliders.

Multiple Formats

Display and emit values in hex, rgb, or rgba depending on the format prop.

Custom Swatches

Provide your brand palette or hide swatches entirely for a minimal experience.

Portal Popover

The picker panel renders in a portal with auto-positioning and click-outside dismissal.