Phoundry UI

ColorPicker

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

import { ColorPicker } from 'phoundry-ui';

Basic (Hex)

#
R:59 G:130 B:245 H:217°
Presets

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
G
B
R:33 G:196 B:93 H:142°
Presets

state: #22c55e

HSL

H
°
S
%
L
%
R:168 G:84 B:247 H:271°
Presets

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:250 G:117 B:22 H:25°
Presets

disabled

#
R:101 G:117 B:140 H:215°
Presets
Show code 
<ColorPicker value={c} onchange={...} size="sm" />
<ColorPicker value={c} onchange={() => {}} disabled />

Custom presets

#
R:6 G:181 B:212 H:189°
Presets right click to remove
Recent Colors
Theme Colors These colors match the active application theme.
Show code 
<ColorPicker
  value={color}
  onchange={(next) => color = next}
  presetColors={presets}
  recentColors={recents}
  customColors={themeColors}
  onpresetadd={addPreset}
  onpresetdelete={deletePreset}
/>

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.
showChannelSummary booleantrueShow the compact RGB and hue summary below the value field.
presetColors ColorPickerPreset[]-Controlled named presets. Omit for the defaults; pass `[]` to suppress them.
recentColors string[]-Controlled recent CSS colors, rendered in the provided order.
customColors ColorPickerCustomGroup-One labeled consumer-defined color group with item-owned pick callbacks.
onpresetadd (value: string) => void-Shows the dashed + control and requests that the normalized current color be added.
onpresetdelete (preset: ColorPickerPreset) => void-Enables right-click and Delete/Backspace preset removal requests.
disabled booleanfalseDisable interaction.
size 'sm' | 'md''md'Picker size.
class string-Additional CSS classes.

Managed color sections

interface ColorPickerPreset {
	id: string;
	name: string;
	value: string;
}

interface ColorPickerCustomItem {
	id: string;
	name: string;
	value: string;
	onpick: () => void;
}

interface ColorPickerCustomGroup {
	label: string;
	description?: string;
	colors: ColorPickerCustomItem[];
}

presetColors, recentColors, and customColors are controlled. The picker requests preset mutations through onpresetadd and onpresetdelete; consumers own persistence and pass the updated arrays back.

Usage tips

  • Use format="rgb" or format="hsl" when authors prefer typing CSS functions - callbacks remain hex for a single canonical storage format.
  • Pass controlled presetColors to name and manage a consumer-owned palette. An empty array suppresses the built-in presets.
  • recentColors is presentation-only; persist, deduplicate, order, and cap recents in the consumer.
  • Use customColors for semantic or theme-backed CSS colors. Each custom item owns its callback, so it can preserve intent that a hex callback cannot represent.
  • Manual Hex, RGB, and HSL fields commit on blur or Enter. Escape or invalid/out-of-range input restores the current value.
  • 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.