<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>
If no color space or color is provided, the default ones will be used: oklch
for the space and oklch(50% 50% 180)
for the color.
<color-picker></color-picker>
Slots
<color-picker space="oklch" color="oklch(50% 50% 180)">
Element content goes into the swatch
</color-picker>
You can use your component instead of the default color swatch:
<color-picker space="oklch" color="oklch(50% 50% 180)"
oncolorchange="this.firstElementChild.textContent = this.color">
<color-inline slot="swatch" style="place-self: center; min-inline-size: fit-content"></color-inline>
</color-picker>
or your own form element instead of the default space picker:
<color-picker space="oklab" color="oklab(60% -0.12 0)">
<select slot="color-space" size="4">
<optgroup label="Rectangular Spaces">
<option value="lab">Lab</option>
<option value="oklab" selected>Oklab</option>
<option value="prophoto">ProPhoto</option>
</optgroup>
</select>
</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"></div>
</color-picker>
Dynamic
All attributes are reactive:
<color-picker space="oklch" color="oklch(60% 30% 180)" id="dynamic_picker">
<fieldset slot="color-space">
<legend>Polar Spaces</legend>
<label>
<input type="radio" name="space" value="oklch" checked /> OKLCh
</label>
<label>
<input type="radio" name="space" value="hwb" /> HWB
</label>
<label>
<input type="radio" name="space" value="hsl" /> HSL
</label>
</fieldset>
</color-picker>
<script>
let radios = dynamic_picker.querySelectorAll("input[name=space]");
radios.forEach(radio => radio.addEventListener("change", evt => dynamic_picker.spaceId = evt.target.value));
</script>
<style>
label + label {
margin-inline-start: .3em;
}
</style>
Reference
Slots
Name | Description |
---|---|
(default) | The color picker’s main content. Goes into the swatch. |
color-space |
An element to display (and if writable, also set) the current color space. If not provided, a <space-picker> is used. |
swatch |
An element used to provide a visual preview of the current color. |
Attributes & Properties
Attribute | Property | Property type | Default value | Description |
---|---|---|---|---|
space |
spaceId |
string |
oklch |
The color space to use for interpolation. |
– | space |
ColorSpace |
OKLCh |
Color space object corresponding to the space attribute. |
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, such as adjusting the sliders, entering a color in the swatch’s text field, or choosing a different color space. |
change |
Fired when the color changes due to user action, such as adjusting the sliders, entering a color in the swatch’s text field, or choosing a different color space. |
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>
.
Parts
Name | Description |
---|---|
color-space |
The default <space-picker> element, used if the color-space slot has no slotted elements. |
color-space-base |
The internal <select> element of the default <space-picker> element. |
swatch |
The default <color-swatch> element, used if the swatch slot has no slotted elements. |
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";