Blinc0.6.0
Components/Color Picker
Forms

Color Picker

Choose a colour with a saturation field, hue, opacity and saved swatches.

Blinc 0.6.0stable API
Open ↗
Color Picker interaction recorded with the Blinc headless renderer
Hybrid · dark · native recording · 2×

Usage and properties

Choose a colour with a saturation field, hue, opacity and saved swatches. Apply CSS after the component layer to restyle the documented parts.

Use the installation guide to add blinc_cn and its component stylesheet. Create the fixture bindings once, and return the demo from your UI builder. Values marked Bound accept Signal/Computed sources where the API supports them; structural options configure the component at construction.

PropertyTypeUpdate modelThis example
valueSignal<Color>Boundtheme-blue sample
swatchesVec<Color> or reactive sourceBoundBlue / teal / amber
alphaboolConstructiontrue
disabledbool or IntoReactive<bool>Boundvalues.disabled

Keyboard and interaction

Tab moves between the coordinate fields, the hex editor and the presets. Arrow keys adjust saturation, brightness, hue or opacity by 1 (Shift: 10); Home and End jump to the ends. Hex entry is a draft until Enter. Enter or Space opens the trigger or selects a preset. :focus-visible marks keyboard focus.

Customizing it

Add application CSS after the default component layer. These selectors are the restyling surface for this component:

  • .cn-color-picker-trigger
  • .cn-color-picker-swatch
  • .cn-color-picker
  • .cn-color-picker-value
  • .cn-color-picker-panel
  • .cn-color-picker-label
  • .cn-color-picker-swatches
  • .cn-color-picker-preset
  • .cn-color-picker-entry
  • .cn-color-picker-hex
  • .cn-color-picker-hex-wrap

Theme and component variables: --primary, --text-primary, --text-secondary, --surface, --border, --radius-default, --duration-fast, --ease-state.

Built-in themes

The Live theme control installs Blinc's own theme bundles, including their colours, focus rings, corner shapes and motion tokens.

pub fn theme_bundle_for(name: &str) -> blinc_theme::ThemeBundle {
    match name {
        "restrained" => blinc_theme::RestrainedTheme::bundle(),
        "expressive" => blinc_theme::ExpressiveTheme::bundle(),
        _ => blinc_theme::HybridTheme::bundle(),
    }
    .with_css(blinc_cn::cn_styles::CN_STYLES)
}

Download the default widget and component stylesheets. Sample assets and licenses are available in the asset guide.

Documentation

From the canonical component guide.

use blinc::cn::prelude::*;
use blinc::core::{Color, reactive::signal};

let color = signal(Color::from_hex(0x6366f1));
let disabled = signal(false);
let favorites = signal(vec![Color::RED, Color::GREEN, Color::BLUE]);

let picker = cn::color_picker(color)
    .alpha(true)
    .swatches(favorites)
    .disabled(disabled)
    .on_change(|color| tracing::info!(hex = %color.to_hex_string(true), "Colour selected"));

// The same editor embedded directly into a settings panel.
let inline = cn::color_picker(color).alpha(true).inline();

The default trigger shows a swatch and hex value. It opens a popover with a saturation/brightness field, hue strip and hex editor. .inline() shows the panel directly. .alpha(true) adds an opacity strip. With alpha hidden, editing RGB or selecting a swatch preserves the bound opacity.

Drag the selection ring or press anywhere on a field to select a value. Arrow keys adjust saturation/brightness by 1%, hue by 1 degree, or opacity by 1%; Shift increases the step to 10. Home/End select the endpoints of a strip, or the saturation endpoints in the two-dimensional field. The hue and saturation selection survives moving through grey or black. Tab moves between the coordinate fields, hex editor and presets. Arrow keys act only on the current field; navigating inside the hex editor leaves the selected colour unchanged. Enter/Space opens the focused swatch trigger or selects a focused preset.

Hex entry is a draft until Enter. It accepts #RGB, #RGBA, #RRGGBB and #RRGGBBAA, with an optional #. Invalid input keeps the selected colour and shows an error border. RGB-only input preserves opacity; an alpha-bearing form changes opacity when .alpha(true) is enabled. An external colour write replaces the draft with the new canonical hex value.

swatches takes a Vec<Color>, Signal or Computed. It supplies selectable presets; the application owns persistence. No palette is imposed by default. Disabled pickers reject pointer, keyboard and hex edits. Disabling an open picker closes its popover. Clicking outside dismisses the panel.

Colour styling

The selected colour and coordinate gradients visualize the value. Widget chrome, focus, disabled appearance and motion follow CSS rules and theme tokens.

ClassPart
.cn-color-picker-triggerSwatch trigger; data-state="open", :focus-visible, :disabled
.cn-color-picker-panelInline or detached popup panel; disabled
.cn-color-picker-swatch, .cn-color-picker-valuePreview swatch and trigger hex label
.cn-color-picker-svSaturation/brightness field
.cn-color-picker-white, .cn-color-picker-blackField gradient layers
.cn-color-picker-hue, .cn-color-picker-alphaHue and opacity strips
.cn-color-picker-hue-segmentHue spectrum sectors, data-sector="0" through "5"
.cn-color-picker-markerSelection rings
.cn-color-picker-labelStrip labels
.cn-color-picker-entry, .cn-color-picker-hex-wrapHex row and field wrapper
.cn-color-picker-hex, .cn-color-picker-hex--invalidHex editor and invalid draft
.cn-color-picker-swatches, .cn-color-picker-presetPalette and swatches; data-state="selected"

The coordinate fields expose disabled, tabindex="0" and data-focus-visible. Presets expose disabled and tabindex="0" too. The fields and hex entry retain their node identities during value updates.

.class(...) and .id(...) apply to the trigger, or to the panel in inline mode. A popup is mounted in the overlay layer, so style it using its own part classes rather than a descendant selector from the trigger.

.cn-color-picker-panel {
    --cn-color-picker-border: var(--border-secondary);
    border-radius: 16px;
    width: 280px;
}
.cn-color-picker-sv { height: 180px; }
.cn-color-picker-marker { border-color: white; }

Variables are --cn-color-picker-bg, --cn-color-picker-panel-bg, --cn-color-picker-border, --cn-color-picker-radius and --cn-color-picker-marker. The checker canvas reads the global --cn-color-picker-checker-light and --cn-color-picker-checker-dark colours. Use --duration-fast and --ease-state to change interaction transitions.

Run the native example with cargo run -p blinc_app_examples --features cn --example cn_pickers_demo. The Colour Picker section in cn_demo also shows linked inline and popover editors, a bound disabled switch and a reactive palette with a save button. Its Time Picker section shows linked 12/24-hour editors and sizes, and its Date Picker section shows default and custom-formatted calendar popovers. The inline calendar is documented in Form Components.

Platforms and version

The component API is available in Blinc 0.6.0. The Live example runs in a dedicated worker and requires a compatible GPU surface. Preview and Code remain available when Live cannot start. The canvas has a descriptive label; a full screen-reader DOM mirror is not provided. The gallery integration is based on revision e2e55c24e078.

Recordings and live demos use the default Hybrid theme with bundled Noto Sans. The recording uses a 560 × 480 logical viewport at twice that resolution. Live follows its container and actual display density. Source base revision · Exact build source · Artifact versions and checksums · Font license.