Phoundry UI

ColorPicker

HSV color picker with text input, preset swatches, and multiple output formats.

import { ColorPicker } from 'phoundry-ui';

Basic (Hex)

R:255 G:0 B:0 H:0°

Value: #3b82f6

Show code 
let color = $state('#3b82f6');

<ColorPicker value={color} onchange={(c) => color = c} />

Without Input & Presets

Value: #ef4444

Show code 
<ColorPicker
  value={color}
  onchange={(c) => color = c}
  showInput={false}
  showPresets={false}
/>

Input field format (hex | rgb | hsl)

format switches the editable text representation and accepted manual syntax. onchange still passes a hex string for consistent storage — convert locally if you need CSS rgb()/hsl().

RGB

R:255 G:0 B:0 H:0°

state: #22c55e

HSL

R:255 G:0 B:0 H:0°

state: #a855f7

Show code 
<ColorPicker value={c} onchange={(v) => (c = v)} format="rgb" />
<ColorPicker value={c} onchange={(v) => (c = v)} format="hsl" />

Compact & disabled

size="sm"

R:255 G:0 B:0 H:0°

disabled

R:255 G:0 B:0 H:0°
Show code 
<ColorPicker value={c} onchange={...} size="sm" />
<ColorPicker value={c} onchange={() => {}} disabled />

Custom presets

R:255 G:0 B:0 H:0°
Show code 
<ColorPicker value={c} onchange={...} presets={brandPresets} />

Props

PropTypeDefaultDescription
value requiredstring—Current color value.
onchange required(color: string) => void—Called when the color changes. The value is always normalized hex (e.g. `#22c55e`), including after typing in RGB/HSL form.
format 'hex' | 'rgb' | 'hsl''hex'How the text field displays and parses manual entry. Callbacks still receive hex.
showInput booleantrueShow the text input for manual entry.
showPresets booleantrueShow the preset color swatches.
presets string[]—Custom preset colors. Uses defaults if not provided.
disabled booleanfalseDisable interaction.
size 'sm' | 'md''md'Picker size.
class string—Additional CSS classes.

Usage tips

  • Use format="rgb" or format="hsl" when authors prefer typing CSS functions — callbacks remain hex for a single canonical storage format.
  • Pass custom presets to match your brand palette or design tokens.
  • Use size="sm" for inline usage in toolbars or compact UIs.
  • The picker uses HSV internally for intuitive color selection — hue on the slider, saturation/value on the area.