HQ UI

Color

Color components provide a way to select and adjust colors.

TreeCommand

Installation

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

Blocks

Color Area

color-area-demo
color-area-channel-demo
X Channel
Y Channel
color-area-space-demo
Color Space
color-area-controlled-demo
Color Space
X Channel
Y Channel
{
  "color": {
    "hue": 0,
    "saturation": 100,
    "lightness": 50,
    "alpha": 1
  }
}
color-area-with-slider-demo
50°

Color Field

color-field-demo
color-field-controlled-demo
{
  "color": {
    "hue": 0,
    "saturation": 100,
    "lightness": 50,
    "alpha": 1
  }
}
color-field-rgb-channel-demo
color-field-hsl-channel-demo
color-field-hsb-channel-demo

Color Picker

color-picker-demo
color-picker-with-input-demo
color-picker-dynamic-label-demo

Color Slider

color-slider-rgb-channel-demo
255
0
0
100%
color-slider-hsl-channel-demo
0°
100%
50%
100%
color-slider-hsb-channel-demo
0°
100%
100%
100%

Color Wheel

color-wheel-demo

Color Swatch

color-swatch-hex-demo
color-swatch-rgb-demo
color-swatch-hsl-demo
color-swatch-hsb-demo

Color Swatch Picker

color-swatch-picker-rgb-demo
color-swatch-picker-hex-demo
color-swatch-picker-hsl-demo
color-swatch-picker-hsb-demo
Tree
Command