<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. |
CSS variables
The styling of <color-picker>
is fully customizable via CSS variables provided by the <color-slider>
and <color-swatch>
.
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";