Color Picker

ColorPicker(_.label := "Select a color")()

ColorPicker(_.label := "Select a color")()

This component works with standard <form> elements.

Examples

Initial Value

Use the value attribute to set an initial value for the color picker.

ColorPicker(
  _.value := "#4a90e2",
  _.label := "Select a color"
)()

ColorPicker(  _.value := "#4a90e2",  _.label := "Select a color")()

Opacity

Use the opacity attribute to enable the opacity slider. When this is enabled, the value will be displayed as HEXA, RGBA, HSLA, or HSVA based on format.

ColorPicker(
  _.value   := "#f5a623ff",
  _.opacity := true,
  _.label   := "Select a color"
)()

ColorPicker(  _.value   := "#f5a623ff",  _.opacity := true,  _.label   := "Select a color")()

Set the color picker's format with the format attribute. Valid options include hex, rgb, hsl, and hsv. Note that the color picker's input will accept any parsable format (including CSS color names) regardless of this option. To prevent users from toggling the format themselves, add the without-format-toggle attribute.

ColorPicker(
  _.format.hex,
  _.value := "#4a90e2",
  _.label := "Pick a hex color"
)()
ColorPicker(
  _.format.rgb,
  _.value := "rgb(80, 227, 194)",
  _.label := "Pick an RGB color"
)()
ColorPicker(
  _.format.hsl,
  _.value := "hsl(290, 87%, 47%)",
  _.label := "Pick an HSL color"
)()
ColorPicker(
  _.format.hsv,
  _.value := "hsv(55, 89%, 97%)",
  _.label := "Pick an HSV color"
)()

ColorPicker(  _.format.hex,  _.value := "#4a90e2",  _.label := "Pick a hex color")()ColorPicker(  _.format.rgb,  _.value := "rgb(80, 227, 194)",  _.label := "Pick an RGB color")()ColorPicker(  _.format.hsl,  _.value := "hsl(290, 87%, 47%)",  _.label := "Pick an HSL color")()ColorPicker(  _.format.hsv,  _.value := "hsv(55, 89%, 97%)",  _.label := "Pick an HSV color")()

Swatches

Use the swatches attribute to add convenient presets to the color picker. Any format the color picker can parse is acceptable (including CSS color names), but each value must be separated by a semicolon (;).

ColorPicker(
  _.label := "Select a color",
  _.swatches := "#d0021b; #f5a623; #f8e71c; #8b572a; #7ed321; #417505; #bd10e0; #9013fe; #4a90e2; #50e3c2; #b8e986; #000; #444; #888; #ccc; #fff;"
)()

ColorPicker(  _.label := "Select a color",  _.swatches := "#d0021b; #f5a623; #f8e71c; #8b572a; #7ed321; #417505; #bd10e0; #9013fe; #4a90e2; #50e3c2; #b8e986; #000; #444; #888; #ccc; #fff;")()

Sizes

Use the size attribute to change the color picker's trigger size.

ColorPicker(
  _.size.small,
  _.label := "Select a color"
)()
ColorPicker(
  _.size.medium,
  _.label := "Select a color"
)()
ColorPicker(
  _.size.large,
  _.label := "Select a color"
)()

ColorPicker(  _.size.small,  _.label := "Select a color")()ColorPicker(  _.size.medium,  _.label := "Select a color")()ColorPicker(  _.size.large,  _.label := "Select a color")()

Disabled

The color picker can be rendered as disabled.

ColorPicker(
  _.disabled := true,
  _.label    := "Select a color"
)()

ColorPicker(  _.disabled := true,  _.label    := "Select a color")()

Hint

Add descriptive hint to a color picker with the hint attribute. For hints that contain HTML, use the hint slot instead.

ColorPicker(
  _.label := "Select a color",
  _.hint  := "Choose a color with appropriate contrast!"
)()

ColorPicker(  _.label := "Select a color",  _.hint  := "Choose a color with appropriate contrast!")()