Color picker
An OKLCH color from three sliders, with its swatch, its text and preset swatches.
Accentoklch(62.5% 0.15 250)
forSlots(ColorPickerSlots)(Recipes.ColorPicker({}))
Usage
The function that drew the preview, over the theme module Create a theme writes. The preview passes it the style picked above instead of its default.
export const ColorPickerStyle = forSlots(ColorPickerSlots)(Recipes.ColorPicker({}))
export const colorPicker = <Message>(
style: NamedStyle<typeof ColorPickerSlots>,
value: ColorPicker.Oklch,
onChange: (value: ColorPicker.Oklch) => Message,
h: HtmlBuilder<Message>,
): Html =>
ColorPicker.view(
{
id: 'preview-accent',
label: 'Accent',
value,
onChange,
presets: [
{ label: 'Blue', value: { l: 62.5, c: 0.15, h: 250 } },
{ label: 'Teal', value: { l: 70, c: 0.12, h: 190 } },
{ label: 'Amber', value: { l: 80, c: 0.16, h: 80 } },
{ label: 'Rose', value: { l: 65, c: 0.2, h: 10 } },
],
style,
},
h,
)