Color Picker

Accessible color area, hue and alpha controls, swatch, field, and controlled color formats.

Preview

This is a live example. Interact with the available controls and use the keyboard to inspect the component's states and behavior.

Color#6366F1FF

Hue238.73°

Alpha100%

Color

Loading interactive preview…

pnpm dlx aq-ui@alpha add color-picker

Client module

Import the parts you need, then jump to an export for its contract.

"use client"

import { ColorPicker } from "@/components/ui/color-picker"

<ColorPicker />

Accessible color area, hue and alpha controls, swatch, field, and controlled color formats.

const ColorPicker = React.forwardRef<HTMLDivElement, ColorPickerProps>(…)

Type contract for ColorPickerProps.

interface ColorPickerProps extends Omit< React.ComponentPropsWithoutRef<"div">, "defaultValue" | "onChange" >

Name	Type	Default
`value?`	`string`	`—`
`defaultValue?`	`string`	`"#3b82f6"`
`onValueChange?`	`(value: string, color: Color) => void`	`—`
`format?`	`SupportedColorFormat`	`"hex"`
`showAlpha?`	`boolean`	`false`
`disabled?`	`boolean`	`—`
`label?`	`React.ReactNode`	`"Color"`
`className?`	`string`	`—`
`name?`	`string`	`—`

Type contract for SupportedColorFormat.

type SupportedColorFormat = Extract<ColorFormat, "hex" | "hexa" | "rgb" | "rgba" | "hsl" | "hsla" | "hsb" | "hsba">

utils

react-aria-components@^1.12.3