Color Picker#

Select colors using the <ColorPicker> component.

let (hsv, set_hsv) = create_signal(HSV::new()); view! { <ColorPicker hsv=hsv set_hsv=set_hsv/> }

Hue

Saturation

Value

Hex: #FF0000

Parts#

The <ColorPicker> build on top of a few other components build to help work with colors. You may use them directly and build your own color picker.

Let's define a HSV color with a derived RGB representation. We will use them for the next component on this page.

let (hsv, set_hsv) = create_signal(HSV::new()); let rgb = Signal::derive(move || hsv.get().into_rgb8());

ColorPreview#

The <ColorPreview> component simply displays a reactive color patch based on the given RGB color signal.

view! { <ColorPreview rgb=rgb style="width: 5em%; height: 5em;"/> }

ColorPalette#

The <ColorPalette> component works on an HSV color signal, displays the color-gradient field for any given hue value and allows selecting new values for saturation (S, x-axis) and value (V, y-axis) of the HSV color by dragging a handle on the displayed surface.

view! { <ColorPalette hsv=hsv_test set_saturation=move |s| set_hsv.update(|hsv| hsv.saturation = s) set_value=move |v| set_hsv.update(|hsv| hsv.value = v) style="width: 10em; height: 5em;" /> }

HueSlider#

The <HueSlider> component renders a specialized <Slider>, allowing you to pick a hue, a floating-point value between 0° and 360°. The slider background displays the hue range as a color band, the knob displays the currently selected hue value at maximum saturation and value.

view! { <HueSlider hue=Signal::derive(move || hsv.get().hue) set_hue=move |hue| set_hsv.update(|hsv| hsv.hue = hue) /> }

If you look at the source of Leptonic's <ColorPicker>, you will see that there is not much more to it as what you saw here!

Styling#

You may overwrite any of the following CSS variables to meet your styling needs.

--color-palette-knob-size --color-palette-knob-border-width --color-palette-knob-border-color --color-palette-knob-border-style --color-palette-knob-background-color --color-palette-knob-halo-size --color-palette-knob-halo-size-while-dragged --color-palette-knob-halo-opacity --color-palette-knob-halo-background-color --color-palette-knob-transition-speed --color-palette-knob-box-shadow