Color Picker

Any color: a native <input type="color"> in a box that shows the color. canon.js opens a picker under it: a saturation and brightness area, hue, opacity, an eyedropper where the browser has one, the value as HEX, RGB, HSL or HSB, and swatches. Without JavaScript, the box opens the browser's own picker. Specification: docs/components/color-picker.md

For a choice among a few colors, use Swatches.

Size

data-size on the field or a container: the box is a text input's height. Click one to open the picker.

Small

Theme decides

Large

Swatches

A <datalist> linked with the input's list: its options become swatches in the picker, named by their labels. The browser's own picker shows them too.

Brand color

Opacity

alpha on the input adds an opacity slider and field. The value is then an 8-digit hex (#3b82f680 is half see-through); where the browser can't keep opacity in a color input, canon.js makes the input a read-only text field holding that code, which the form submits as usual. Without JavaScript the browser's picker has no opacity.

Overlay

Inline

data-inline on the box: the picker sits in the page, always shown, in place of the box. The input still holds the value the form submits; change fires when a drag ends, after a key, a slider, a field or a swatch. Without JavaScript the box shows as usual.

Accent

States

Text Input's states: disabled on the input, an error with aria-invalid="true" and a danger message.

Disabled

Text color

Too light to read on white.

Edge cases

Right-to-left

The area's white side and the sliders' start follow the direction.

لون العلامة