ColorPicker

ic.ColorPicker is a color selection control that displays a colored swatch which opens a popup editor on click. The editor includes a saturation/brightness pad, a hue slider, and an optional alpha slider. You can provide preset color swatches for quick selection and choose between hex, RGB, and HSL output formats.

Format and alpha

Format controls how the selected color is serialized into the Value string. When ShowAlpha is enabled an alpha slider appears in the popup and the value includes an alpha component (e.g. #3b82f680 in hex, rgba(...) in RGB, hsla(...) in HSL). With alpha disabled the value always represents a fully opaque color.

Size and label

Size scales the swatch trigger relative to the surrounding font size. When ShowLabel is true the current color value is displayed as editable text next to the swatch, grouped together in a bordered field. The text input lets you type a color directly rather than using the popup.

Preset swatches

Presets accepts a list of CSS color strings that appear as clickable swatches at the bottom of the popup editor. This gives users quick access to a curated palette without having to dial in exact values each time.

Popup position

PopupPosition controls where the color editor opens relative to the swatch. The default "best" mode automatically picks whichever direction has the most available space in the viewport, which is usually the right choice. You can force a specific side if the layout requires it.

Events

ColorPicker fires ValueChanging on every incremental change as the user drags the sliders or pad, which is useful for live previews. The reactive Value property updates with a debounced final value. Opened and Closed fire when the popup editor is shown or dismissed.

Custom styling

Every component exposes a .css property that lets you inject instance-level CSS directly from MATLAB. Here the swatch is made circular and the grouped field gets a pill shape. The selectors target .ic-color-picker__swatch for the color circle and .ic-color-picker__field--grouped for the surrounding container.

cp = ic.ColorPicker("Size", "lg", "ShowLabel", true);

cp.css.style(".ic-color-picker__swatch", ...
    "border_radius", "50%", ...
    "width", "28px", ...
    "height", "28px");

cp.css.style(".ic-color-picker__field--grouped", ...
    "border_radius", "20px", ...
    "padding", "4px 12px 4px 4px");