Color Picker
<esp-color-picker>
Used to choose a seed color for the Espalier color scheme. Espalier uses the OKLCH color notation. This picker lets you choose hue and chroma; lightness is fixed at 0.7 (the design-system default) so variant derivation stays consistent.
Attributes
<esp-color-picker> has the following attributes:
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)
Events
<esp-color-picker> emits the following events:
value-changed
value-changed is of type CustomEvent<{ seedColor: string, hue: number, chroma: number }>.
Fired when the user changes the color. The event detail contains the seed color OKLCH string, plus raw hue and chroma values.
CSS Properties
<esp-color-picker> has the following CSS properties:
--esp-size-color-picker-border-width
The border width of the color picker.