KQ-497 · HUE/RING
Hue Ring
A hue wheel whose thumb chases the pointer on snap, always the short way round, over a lightness bar that carries the chosen hue. The swatch takes the new colour on a tween and the hex readout rolls each character into place on glide. Two real sliders: arrows step one degree, Shift+Arrow steps ten, Home and End jump to the ends.
KQ-497 · HUE/RING
Fernworks accent
Sample
Arrows step 1°, Shift+Arrow 10°.
Fernworks accent #7C3CEC · 262° · 58% light
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/hue-ring
Props
- value / defaultValue
- { h: number; l: number }
- default { h: 210, l: 55 }
- Hue in degrees and lightness 0–100, controlled or initial.
- onValueChange
- (value: { h: number; l: number }, hex: string) => void
- default —
- Both readings on every change: the angle pair and the hex it resolves to.
- size
- number
- default 180
- Ring diameter in px; the band and swatch scale with it.
- label
- string
- default "Accent colour"
- Group label; each slider is named from it.
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | { h: number; l: number } | { h: 210, l: 55 } | Hue in degrees and lightness 0–100, controlled or initial. |
| onValueChange | (value: { h: number; l: number }, hex: string) => void | — | Both readings on every change: the angle pair and the hex it resolves to. |
| size | number | 180 | Ring diameter in px; the band and swatch scale with it. |
| label | string | "Accent colour" | Group label; each slider is named from it. |