<color-picker>

Usage

Example:

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

Color spaces not supported by the browser also work:

<color-picker space="okhsl" color="color(--okhsl 180 50% 50%)"></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.

To-Do

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/color-picker/color-picker.js" type="module"></script>

or in JS:

import "https://elements.colorjs.io/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";