Color Picker
import "@taprootio/espalier/color-picker";
<esp-color-picker>
Used to choose a seed color for the Espalier color scheme.
Espalier uses the OKLCH color notation.
By default this picker lets you choose hue and chroma while
lightness stays at 0.7 (the design-system default) so variant
derivation stays consistent. Set mode="hcl" when an editor
needs to tune hue, chroma, and lightness directly.
Attributes
<esp-color-picker> has the following attributes:
mode
mode has a default value of "hc".
Which controls to show. hc preserves the original hue/chroma UI;
hcl also renders a lightness slider.
chroma
chroma has a default value of 25.
The selected chroma (0-25)
hue
hue has a default value of 180.
The selected hue (0-360)
lightness
lightness has a default value of DEFAULT_LIGHTNESS.
The selected OKLCH lightness as a percentage (0-100).
The emitted seedColor converts this value to OKLCH's 0-1
lightness scale.
Events
<esp-color-picker> emits the following events:
esp-value-changed
esp-value-changed is of type CustomEvent<{ seedColor: string, hue: number, chroma: number, lightness: number }>.
Fired when the user changes the color. The event detail contains the seed color OKLCH string, plus raw hue, chroma, and lightness values.
CSS Properties
<esp-color-picker> has the following CSS properties:
--esp-size-color-picker-border-width
The border width of the color picker.