Color Picker - HapplyUI

A color picker with area, sliders, swatches, eye dropper, and field inputs.

Installation

bunx @happlyui/cli@latest add color-picker

Dependencies

npm packages

react-aria-components

Registry dependencies

These are automatically installed when you add this component.

happly-ui-utils

Usage

import * as ColorPicker from "@/components/ui/color-picker"
import { parseColor } from 'react-aria-components'

const [color, setColor] = React.useState(parseColor('hsl(228, 100%, 60%)'))

<ColorPicker.Root value={color} onChange={setColor}>
  <ColorPicker.Area colorSpace="hsl" xChannel="saturation" yChannel="lightness">
    <ColorPicker.Thumb />
  </ColorPicker.Area>
  <ColorPicker.Slider colorSpace="hsl" channel="hue">
    <ColorPicker.SliderTrack>
      <ColorPicker.Thumb />
    </ColorPicker.SliderTrack>
  </ColorPicker.Slider>
</ColorPicker.Root>

Examples

Default

Standalone color picker with area, sliders, channel inputs, and swatches.

Recommended Colors

<ColorPicker.Root value={color} onChange={setColor}>
  <ColorPicker.Area colorSpace="hsl" xChannel="saturation" yChannel="lightness">
    <ColorPicker.Thumb />
  </ColorPicker.Area>
  <ColorPicker.Slider colorSpace="hsl" channel="hue">
    <ColorPicker.SliderTrack>
      <ColorPicker.Thumb />
    </ColorPicker.SliderTrack>
  </ColorPicker.Slider>
</ColorPicker.Root>

Color picker inside a popover triggered by a button.

<ColorPicker.Root value={color} onChange={setColor}>
  <Popover.Root>
    <Popover.Trigger asChild>
      <Button.Root variant="neutral" mode="stroke">
        <Button.Icon as={ColorPicker.Swatch} />
        Pick Color
      </Button.Root>
    </Popover.Trigger>
    <Popover.Content>...</Popover.Content>
  </Popover.Root>
</ColorPicker.Root>

With Form Field

Color picker composed with FormField for consistent label and hint.

Brand Color

Choose your brand primary color.

<FormField.Root label="Brand Color" hint="Choose your brand primary color.">
  <ColorPicker.Root value={color} onChange={setColor}>
    <ColorPicker.Area colorSpace="hsl" xChannel="saturation" yChannel="lightness">
      <ColorPicker.Thumb />
    </ColorPicker.Area>
    <ColorPicker.Slider colorSpace="hsl" channel="hue">
      <ColorPicker.SliderTrack>
        <ColorPicker.Thumb />
      </ColorPicker.SliderTrack>
    </ColorPicker.Slider>
  </ColorPicker.Root>
</FormField.Root>

API Reference

ColorPicker.Root

The root color picker context provider (React Aria ColorPicker).

Prop	Type	Default	Description
`value`	`Color`	-	The current color value
`onChange`	`(color: Color) => void`	-	Callback when color changes

ColorPicker.Area

2D color area for selecting two color channels.

Prop	Type	Default	Description
`colorSpace`	`ColorSpace`	-	The color space (hsl, hsb, rgb)
`xChannel`	`string`	-	Channel for the x-axis
`yChannel`	`string`	-	Channel for the y-axis

ColorPicker.Slider

Single-channel color slider.

Prop	Type	Default	Description
`colorSpace`	`ColorSpace`	-	The color space
`channel`	`string`	-	The color channel to control

ColorPicker.SliderTrack

The slider track with checkered transparency background.

Prop	Type	Default	Description

ColorPicker.Thumb

Draggable thumb for area and sliders.

Prop	Type	Default	Description

ColorPicker.Field

Color field input for direct value entry.

Prop	Type	Default	Description
`colorSpace`	`ColorSpace`	-	The color space
`channel`	`string`	-	The color channel

ColorPicker.Swatch

Color swatch preview with checkered transparency background.

Prop	Type	Default	Description

ColorPicker.SwatchPicker

Container for preset color swatches.

Prop	Type	Default	Description

ColorPicker.SwatchPickerItem

Individual swatch item in the picker.

Prop	Type	Default	Description
`color`	`string`	-	The color value for this swatch

ColorPicker.EyeDropperButton

Button that opens the browser EyeDropper API. Returns null if unsupported.

Prop	Type	Default	Description