Color Picker

<zn-color-picker> | ZnColorPicker

Since 1.0

experimental

A colour panel: a saturation/brightness area, a hue slider and the colour’s HEX, RGB, HSL and OKLCH values.

<zn-color-picker value="#085EFD"></zn-color-picker>

The panel that a colour input opens from its swatch. In a form, use <zn-input type="color"> rather than the panel on its own.

Examples

Using the Panel

The colour area sets saturation (left to right) and brightness (bottom to top); click or drag, or use the arrow keys (Shift for bigger steps). The hue slider sits under it. HEX, RGB, HSL and OKLCH are always shown together: edit any one and the others follow, and an out-of-range number is marked red.

value accepts any CSS colour and reads back as #RRGGBB. format is the row last worked in, which a colour input uses as the format to write its value in. Listen for zn-input to follow changes.

Value: #7557F5 · format: hex

<zn-color-picker class="color-picker-demo" value="rgb(117, 87, 245)"></zn-color-picker>
<p>Value: <code class="color-picker-demo-value">#7557F5</code> · format: <code class="color-picker-demo-format">hex</code></p>

<script type="module">
  const picker = document.querySelector('.color-picker-demo');
  picker.addEventListener('zn-input', () => {
    document.querySelector('.color-picker-demo-value').textContent = picker.value;
    document.querySelector('.color-picker-demo-format').textContent = picker.format;
  });
</script>

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

To import this component from the CDN using a script tag:

<script type="module" src="https://cdn.jsdelivr.net/npm/@kubex/zinc@2.0.0/dist/components/color-picker/color-picker.js"></script>

To import this component from the CDN using a JavaScript import:

import 'https://cdn.jsdelivr.net/npm/@kubex/zinc@2.0.0/dist/components/color-picker/color-picker.js';

To import this component using a bundler:

import '@kubex/zinc/dist/components/color-picker/color-picker.js';

Properties

Name	Description	Type	Default
`value`	The colour, in any CSS colour syntax. Reads back as `#RRGGBB`.	`string`	`'#000000'`
`format`	The format being worked in. Focusing or editing a row switches to that row’s format.	`ColorFormat`	`'hex'`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name	React Event	Description	Event Detail
`zn-input`		Emitted when the colour or the format being worked in changes.	-

Learn more about events.

Methods

Name	Description	Arguments
`focus()`	Moves focus to the colour area.	`options: FocusOptions`

Learn more about methods.

Parts

Name	Description
`base`	The component’s base wrapper.

Learn more about customizing CSS parts.