HyColorPicker

A color picker: trigger swatch + popover-hosted HSV selection UI with optional alpha, optional preset swatches, and multi-format readout.

State model

The canonical value is the value prop — a hex string (#RRGGBB, or #RRGGBBAA when alpha is enabled). Internally the component tracks HSV + alpha so that dragging saturation or value to zero does not lose the current hue (a pure RGB round-trip would).

Interaction

• 2D area: pointer-drag in HSV saturation (x) × value (y). Arrow keys move by 1 / 0.01 steps; Shift increases to 10 / 0.1.
• Hue slider: rainbow track, 0–360°. Arrow keys step by 1° (Shift by 10°).
• Alpha slider (opt-in): transparent → opaque track over a checker background.
• Hex input: accepts short (#abc), long (#aabbcc), or alpha hex. Commits on Enter / blur. Invalid entries revert.
• Swatches: grid of preset colors below the readout. Click applies.

input fires on every interaction (drag, keystroke); change fires on commit (pointer release, Enter, blur, swatch click, popover close with a changed value). Parents that only need the committed value can ignore input.

Examples

Basic

<hy-color-picker value="#3b82f6"></hy-color-picker>

With alpha + swatches

<hy-color-picker
  value="#3b82f6"
  alpha
  swatches="#d0021b;#f5a623;#f8e71c;#7ed321;#4a90e2;#bd10e0;#000;#fff"
></hy-color-picker>

Events

• input - Fires continuously while the user drags a slider or area.
• change - Fires once the value is committed.

Slots

• trigger - Override the default trigger button. The slotted element must be focusable; clicking it toggles the popover.