`<dj-color-picker>`

An inline color picker.

It has a saturation and brightness area, a hue slider, an optional opacity slider (alpha), a text field, and optional swatches.

npm install @dojo-ng/color-picker

import "@dojo-ng/color-picker";

Value and format

value is a color string in the format you choose: hex, rgb, or hsl.
The internal model is HSV plus alpha. After you change format, reading value returns the new representation.
Alpha appears in the output only when the color is translucent or alpha is on.
Named CSS colors, such as rebeccapurple, are not parsed.
dj-change ({ value }) fires on every change the user makes, including during a drag. There is no separate input event.

The picker is form-associated. It submits the formatted color string under name.

There is no built-in trigger button or popup. Put the picker in a dj-popup to make a dropdown.

Property	Attribute	Type	Default
`format`	`format`	`"hex""rgb""hsl"`	`"hex"`
`alpha`	`alpha` reflected	`boolean`	`false`
`swatches`	Property only	`Swatch[]`	`[]`
`label`	`label`	`string`	None
`name`	`name` reflected	`string`	None
`disabled`	`disabled` reflected	`boolean`	`false`
`get`	`get`	`string`	None

Event	Description
`dj-change`	`{ value }`

Style these with dj-color-picker::part(name).

areathumbhuealphainputswatchesswatchpickerlabel

Property	Default	Description
`--dj-color-picker-width`	`240px`	Overall width of the inline panel.

checkValidity(): booleanreportValidity(): boolean

The types that the properties above use, as they are declared in the source.

export type Swatch = string | { value: string; label?: string };