Skip to content
← Inventory

ColorWheel

Concentric saturation/lightness pad + hue arc picker.

Usage

import { ColorWheel, ColorWheelProps, ColorWheelValue, WHEEL_CENTER_X, WHEEL_CENTER_Y } from "@desk/ui/components/color-wheel";

Best practices

  • ColorWheel is fully controlled — own the ColorWheelValue ({h,s,l}) and set it from onChange; it stores nothing internally, so dropping the update freezes the picker.

  • Values are HSL (h 0–360, s/l 0–100), not hex — convert at your storage boundary; a hex string won't position the handles.

  • onChange fires on every pointer drag and arrow-key step — throttle persistence/network writes downstream rather than reacting to each intermediate value.

Props

PropTypeDefaultDescription
onChange(required)(value: ColorWheelValue) => void

Fired on every pointer drag of the pad or hue arc with the updated HSL value.

value(required)ColorWheelValue

Current HSL selection; the picker is fully controlled and keeps no internal state.

Also exports

  • interfaceColorWheelProps
  • interfaceColorWheelValue
  • constWHEEL_CENTER_X
  • constWHEEL_CENTER_Y