HQReact UI
DocsThemes
  • Getting Started
  • Introduction
  • Installation
  • Client Side Routing
  • MCP Server
  • LLMs
  • Framework Guides
  • Nextjs
  • Laravel
  • Vite
  • Tanstack Start
  • Components
  • Buttons
  • Button
  • File Trigger
  • Toggle
  • Charts
  • Chart
  • Collections
  • Accordion
  • Bubble
  • Collapsible
  • Context Menu
  • Dropdown Menu
  • Grid List
  • Item
  • List Box
  • Message
  • Table
  • Tag Group
  • Tree
  • Colors
  • Color
  • Controls
  • Command
  • Kbd
  • Slider
  • Switch
  • Toolbar
  • Date And Time
  • Calendar
  • Range Calendar
  • Date Field
  • Date Picker
  • Date Range Picker
  • Time Field
  • Drag And Drop
  • Drop Zone
  • Forms
  • Field
  • Input
  • Combobox
  • Input Group
  • Checkbox
  • Radio
  • Select
  • Text Field
  • Number Field
  • Search Field
  • Input OTP
  • Layouts
  • Container
  • Navbar
  • Sidebar
  • Media
  • Avatar
  • Carousel
  • Navigation
  • Link
  • Breadcrumbs
  • Tabs
  • Pagination
  • Overlays
  • Dialog
  • Alert Dialog
  • Sheet
  • Popover
  • Tooltip
  • Statuses
  • Alert
  • Badge
  • Empty
  • Meter
  • Progress
  • Skeleton
  • Toastalpha
  • Surfaces
  • Card
  • Separator

On this page

Color

ColorArea

Installation

CLI
Manual

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

Examples

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

On this page

  • Installation
  • Examples
  • Color Area
  • Color Field
  • Color Picker
  • Color Slider
  • Color Wheel
  • Color Swatch
  • Color Swatch Picker