Color Picker

A Color Picker keeps color values in sync across React Aria color components. It makes building color pickers with custom layouts a breeze through composition.

Basic

The basic color picker allows users to select a color.

Installation

If you hit any issues, make sure you check out the installation guide here.

Composed Components

When you plug this component from the CLI, it autoloads all the composed components. No need to toss 'em in one at a time.

The Color Picker's decked out with several components to make it bangin'.

Color Field

A color field allows users to adjust a hex color or fine-tune individual color channels, offering precise control over color customization.

Field

Field's a core piece every other component uses. It flexes reusable styles, showing up in inputs, labels, descriptions, and more.

Color Area

A color area lets users tweak two channels of an RGB, HSL, or HSB color against a 2D gradient backdrop.

Color Slider

Slide through gradients, picking the intensity or shade you need, as smoothly as sliding into your favorite jeans.

Popover

Hover or click to see more content, like popping open a tent, useful for additional info without leaving the context..

Color Swatch

A visual lineup of colors, letting you pick with a click, just like choosing your next outfit from your wardrobe.

Manual Installation

Sometimes, using the CLI is the way to go, so make sure you install the necessary dependencies for the components you want to use.

Anatomy

Import the components and use them as shown below, adapting the structure to fit each component.

Enable Format Selection

Enable users to select the format of the color value (e.g., RGB, HSL).

Combination

Combine both swatch and selection format options in the color picker.

Label

Add a label to the color picker for better accessibility and user guidance.

Dynamic Label

Dynamically update the label based on the selected color.

import { ColorPicker, defaultColor } from "ui"
 
const [color, setColor] = React.useState(defaultColor)
return <ColorPicker label={color.toString('hex')} value={color} onChange={setColor} />

Description

Include a description to provide additional information or instructions.

Snag a color for the app theme

Controlled

Control the selected color with the value prop to sync it with your application's state.

hex#0D6DFDhexa#0D6DFDFFrgbrgb(13, 109, 253)rgbargba(13, 109, 253, 1)hslhsl(216, 98%, 52%)hslahsla(216, 98%, 52%, 1)hsbhsb(216, 94.99%, 99.04%)hsbahsba(216, 94.99%, 99.04%, 1)

Disabled

Disable the color picker by setting the isDisabled prop, making it non-interactive.

DropdownColor Field