`<channel-picker>`

Usage

Basic usage

<channel-picker value="oklab.a"></channel-picker>

If no color channel is provided (via the value attribute/property), the default oklch.l will be used:

<channel-picker></channel-picker>

You can hide the color-space part with CSS to show only the coordinates of the specified space:

<channel-picker id="picker" value="hsl.h"></channel-picker>

<style>
	#picker::part(color-space) {
		display: none;
	}
</style>

You can listen to the valuechange event to get the current value (the value property). When a new color space is selected, the channel will be either preserved (if it is in the new space) or reset to the first available one:

<channel-picker onvaluechange="this.nextElementSibling.textContent = this.value"></channel-picker>
<output></output>

Dynamic

All properties are reactive and can be set programmatically:

<button onclick="this.nextElementSibling.value = 'p3.b'">Switch to P3 Blue</button>
<channel-picker></channel-picker>

<channel-picker> plays nicely with other color elements, like <channel-slider>:

<channel-picker id="channel_picker" value="oklch.c"></channel-picker>
<channel-slider id="channel_slider" color="oklch(50% 50% 180)"></channel-slider>

<style>
	#channel_picker::part(color-space) {
		display: none;
	}
</style>

<script>
	function updateSlider() {
		let [space, channel] = channel_picker.value.split(".");
		channel_slider.space = space;
		channel_slider.channel = channel;
	}
	
	channel_picker.onvaluechange = updateSlider;
</script>

Reference

Attributes & Properties

Attribute	Property	Property type	Default value	Description
`value`	`value`	`string`	`oklch.l`	The current value of the picker.

Getters

These properties are read-only.

Property	Type	Description
`selectedSpace`	`ColorSpace`	Color space object corresponding to the space picker current value.
`selectedChannel`	`object`	The current channel metadata.

Events

Name	Description
`input`	Fired when the color space or channel changes due to user action.
`change`	Fired when the color space or channel changes due to user action.
`valuechange`	Fired when the value changes for any reason, and once during initialization.

Parts

Name	Description
`color-space`	The internal `<space-picker>` element.
`color-space-base`	The internal `<select>` element of `<space-picker>`.
`color-channel-base`	The internal `<select>` element.

Installation

To install all color elements, check out the instructions on the homepage. The rest of this section is about using only <channel-picker>.

The quick and dirty way is straight from the CDN (kindly provided by Netlify):

<script src="https://elements.colorjs.io/src/channel-picker/channel-picker.js" type="module"></script>

or in JS:

import "https://elements.colorjs.io/src/channel-picker/channel-picker.js";

If you are using npm to manage your dependencies, you can import it via:

import "color-elements/channel-picker";

or:

import { ChannelPicker } from "color-elements";