ColorPicker

The ColorPicker component provides an interactive interface to select and adjust colors visually. It combines HSL and HEX conversions, a draggable color canvas, and hue control.

Basic Example

Click the color box or input to open the interactive color selector.

#1C9488 — hsl(174, 80%, 55%)

Interactions

The ColorPicker supports click, drag, and range input for precise color adjustments.

  • Click the input or swatch to toggle the color selector.
  • Drag the selector within the canvas to modify saturation and lightness.
  • Adjust the hue using the horizontal color gradient slider (0–360°).

Customization

You can manage the selected color state externally and apply it anywhere.

Preview Button

Props

Supported properties and behaviors.

  • default_value?: string — Initial HEX color value. Default: "#1C9488".
  • onChange?: (color: Color) => void — Callback triggered whenever the color updates.

Context Example

Typical usage for a theme or UI customization setting.

Choose Primary Color

Selected: #1C9488