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.

Installation

CLI

Manual

In the terminal, run the following command to begin:

npx hq-kit add color-picker

Basic

View

Code

Enable Format Selection

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

View

Code

Combination

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

View

Code

Label

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

View

Code

Dynamic Label

View

Code

Description

View

Code

Snag a color for the app theme

Controlled

View

Code

{"hue":216,"saturation":98,"lightness":52,"alpha":1}