Command Palette

Search for a command to run...
HQ UI

Color

Color components provide a way to select and adjust colors.

Installation

npx shadcn@latest add https://hq-ui.vercel.app/r/colors

Blocks

Color Area

X Channel
Y Channel
Color Space
Color Space
X Channel
Y Channel
{
  "color": {
    "hue": 0,
    "saturation": 100,
    "lightness": 50,
    "alpha": 1
  }
}
50°

Color Field

{
  "color": {
    "hue": 0,
    "saturation": 100,
    "lightness": 50,
    "alpha": 1
  }
}

Color Picker

Color Slider

255
0
0
100%
100%
50%
100%
100%
100%
100%

Color Wheel

Color Swatch

Color Swatch Picker