ColorPicker

ColorPicker

Two variants:

// Trigger button + popover
<ColorPicker label="Brand color" defaultValue={parseColor('#3b82f6')} />

// Always-visible (e.g. inside a settings panel)
<ColorPickerInline label="Brand color" />

Color and parseColor are re-exported from react-aria-components. helixui wraps the picker structure but does not own color types.

Install: @helixui/core

import { ColorPicker, ColorPickerInline } from '@helixui/core'

status: beta · since: 0.1.0

Tags: color, hsb, picker

Anatomy

┌──────────────────┐
│ saturation/value │
│   gradient area  │
│       (●)        │  ← drag handle
└──────────────────┘
┌─────── hue slider ──────┐ #3b82f6  [hex]

Layout

• display — block
• width — content
• height — content
• intrinsicSize — ~240×240 area + sliders
• stackable — false
• fullBleed — false

Visual

A 2-D saturation × value gradient with a draggable thumb, a horizontal hue slider beneath, and a hex input. ColorPickerInline embeds it; ColorPicker (default) puts it inside a Popover.

Props

Name	Type	Default	Description
label	ReactNode	—	Visible label.
value	Color	—	Controlled color (use parseColor() from react-aria-components).
defaultValue	Color	#3b82f6	Uncontrolled initial color.
onChange	(color: Color) => void	—	Color change handler.

Tokens used

color.bg.surface.default, color.border.default, color.border.focus, color.text.primary, radius.md, radius.sm, radius.full, space.2, space.3, font.family.sans, font.family.mono, font.size.sm, font.weight.medium, shadow.md

Accessibility

Notes

• Built on react-aria-components ColorPicker — keyboard arrows move the saturation/brightness thumb and hue thumb in 1% steps; Shift+arrow moves in 10% steps.
• The hex input accepts any valid CSS color and normalizes it.
• The popover variant uses DialogTrigger for focus management when open.

Composes with

Component	Relation	Note
Popover	parent	Default rendering is inside a Popover.

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

theme color picker

“pick a hex color”

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

Related

• Popover