ColorPicker

import { ColorPicker } from 'cx/widgets';

The ColorPicker widget provides an interactive interface for selecting colors. It displays a saturation/lightness picker, hue slider, alpha slider, and input fields for HSL, RGB, and hex values. On supported browsers, it also includes an eye-dropper tool for picking colors from anywhere on the screen.

 <div class="flex flex-wrap gap-4 items-start">
  <ColorPicker value={m.color} />
  <div
    class="w-24 h-24 rounded border border-gray-300"
    style={{ background: m.color }}
  />
</div> 
 interface Model {
  color: string;
}

const m = createModel<Model>(); 
 import { createModel } from "cx/data";
import { ColorPicker } from "cx/widgets"; 

H S L A

R G B A

Configuration

Properties

Property	Type	Default	Description
`value`	`string`	`null`	Color value in rgba, hsla, or hex format
`format`	`string`	`"rgba"`	Output format: `"rgba"`, `"hsla"`, or `"hex"`
`reportOn`	`string`	`"blur change"`	Events that trigger value updates (space-separated)
`style`	`string/object`		CSS styles applied to the picker
`class`	`string`		CSS class applied to the picker

Callbacks

Property	Type	Description
`onColorClick`	`function`	`(e, instance) => void` - Called when color preview is clicked

Features

The ColorPicker includes:

Saturation/Lightness picker - Click and drag to select saturation and lightness
Hue slider - Horizontal slider for selecting hue (0-360)
Alpha slider - Horizontal slider for selecting opacity (0-1)
HSL inputs - Direct input for Hue, Saturation, Lightness values
RGB inputs - Direct input for Red, Green, Blue values
Color preview - Shows the currently selected color
Value display - Read-only fields showing HSLA, RGBA, and Hex values
Eye-dropper - Pick colors from anywhere on screen (Chrome/Edge only)

All inputs support mouse wheel for quick adjustments.