Color picker

Write a .color-picker with role="group" and a name around an <input type="color">. Without JavaScript it is the native swatch.

AutoInit starts ColorPicker, which adds a saturation and brightness area, a hue slider and a hex field. The native input stays the form value and the preview. The browser's own picker still opens from it. The browser's color input only holds #rrggbb, so there is no alpha.

<div class="color-picker" role="group" aria-label="Accent color">
  <input type="color" name="accent" value="#6750a4" aria-label="Accent color">
</div>

Keyboard

The area is one slider. Its value is read out as, for example, "Saturation 60%, brightness 80%". It does not mirror in right-to-left pages, because it is the color itself.

Safari leaves the native color swatch out of the Tab order, as it does for every <input type="color">. In Safari the area, the hue slider and the hex field still set any color from the keyboard. Only the system color dialog is out of reach.

The hue slider is the framework's range input, with its usual keys. In the hex field, Enter applies the value instead of submitting the form, and an invalid value goes back to the current color.

Events

Every change writes the native input and fires its input event. A committed change, such as a released drag, a key press, a released hue or an applied hex value, also fires change. Listeners written for the native input keep working.

el.querySelector('input[type="color"]').addEventListener('input', (e) => {
  preview.style.background = e.target.value; // live, during a drag
});

Tokens

Override these on the .color-picker.

Options

Methods

All methods are called on the plugin instance. You can get the instance like this:

const instance = Expressive.ColorPicker.getInstance(elem);

instance.destroy(); // removes the area, hue slider and hex field; the native input stays

Properties