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
R G B
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