`<color-picker>`

Usage

Basic usage

<color-picker space="oklch" color="oklch(60% 30% 180)"></color-picker>

Color spaces not supported by the browser also work:

<color-picker space="okhsl" color="color(--okhsl 180 50% 50%)"></color-picker>

Slots

<color-picker space="oklch" color="oklch(50% 50% 180)">
	Element content goes into the swatch
</color-picker>

Events

As with other components, you can listen to the colorchange event:

<color-picker space="oklch" color="oklch(50% 50% 180)"
              oncolorchange="this.firstElementChild.textContent = this.color.oklch.join(' ')">
	<div class="coords" style="font-weight: bold; text-shadow: 0 0 .1em white, 0 0 .1em white, 0 0 .1em white"></div>
</color-picker>

Reference

Attributes & Properties

Attribute	Property	Property type	Default value	Description
`space`	`space`	`ColorSpace` \| `string`	`oklch`	The color space to use for interpolation.
`color`	`color`	`Color` \| `string`	`oklch(50% 50% 180)`	The current color value.

Events

Name	Description
`input`	Fired when the color changes due to user action, either with the sliders or the color swatch’s input field.
`change`	Fired when the color changes due to user action, either with the sliders or the color swatch’s input field.
`valuechange`	Fired when the value changes for any reason, and once during initialization.
`colorchange`	Fired when the color changes for any reason, and once during initialization.

Planned features

Alpha

Installation

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

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

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

or in JS:

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

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

import "color-elements/color-picker";

or:

import { ColorPicker } from "color-elements";