Color controls
Color sliders, fields, rings, arcs, and swatches from xgpui-luma-color.
Use the color crate
Add the color crate alongside the SDK:
# Once version 1.0.1 is published to crates.io:
xgpui-luma-color = "1.0.1"Rust imports use xgpui_luma_color. These controls reuse SDK interaction engines; they do not require a separate Look-specific builder.
Choose a control
| Control | Use it for |
|---|---|
| Color Slider | Hue, alpha, color-space channels, and gradients on a linear track. |
| Color Field | Two-dimensional planes, triangles, and hue/saturation wheels. |
| Color Ring | A full circular hue, saturation, or lightness track. |
| Color Arc | A partial circular track with a chosen start and sweep. |
| Color Swatch | A color preview, or a button-backed picker trigger. |
Keep source colors in your model
use xgpui_luma::color::ColorValue;
use xgpui_luma_color::ColorSwatch;
fn accent_preview() -> ColorSwatch {
let source = ColorValue::display_p3(1.0, 0.2, 0.0, 0.75);
ColorSwatch::new(source).checkerboard(true)
}ColorValue retains source space and alpha. Swatches resolve a preview for GPUI without replacing that source. Color specifications use degrees for hue; unit channels such as alpha use 0..=1. Preserve the source separately when using HSV interaction views. See the color-value contract.
Build a picker or mixer
Combine a field, hue/alpha sliders, swatch, and SDK popup controls. A channel mixer is a set of ColorSliderBuilder::channel controls driven by a ColorSpecification; supplied specifications include HueAlpha, RgbaSpec, Hsl, Hsv, Lab, and Oklch.
When one channel changes, update the shared color model and refresh dependent delegates so their tracks and thumb colors follow it. ColorCompositionSync provides a synchronization guard and helpers for updating slider values and delegates.
Studio’s color picker is an application composition, not an exported SDK ColorPicker. Its Multi Mixer and Color Slider Revealed galleries demonstrate channel mixing and styling.
Theme and focus
Color chrome reads the active ColorControlTheme. Shadcn applications can use sync_color_control_theme when synchronizing their Look; standalone integrations can set it with set_active_color_control_theme. Rebuild configured tracks when changing construction-time visual options.
Use the application’s normal SDK focus scope and default control/focus key bindings for slider controls. Color fields handle their own arrow input. The individual pages describe keyboard behavior.