<space-picker>
Usage
Basic usage
<space-picker value="oklab"></space-picker>
If no color space is provided (via the value
attribute/property),
the first one will be used:
<space-picker></space-picker>
You can specify what color spaces to use:
<space-picker spaces="oklch, p3, srgb" value="p3"></space-picker>
Unknown color spaces also work:
<space-picker spaces="bar, oklch, p3, srgb, foo" value="foo"></space-picker>
Custom labels
Do you need the picker to show something other than the default color space names, such as color space ids?
Simply define the getSpaceLabel()
method on the picker instance, and you are done.
The method takes a color space object as an argument and returns a string that will be used as the space label.
<space-picker id="custom_labels"></space-picker>
<script>
custom_labels.getSpaceLabel = space => space.id;
</script>
Grouping the color spaces
You can group the color spaces the way you like by specifying the groupBy
property. Its value is a function
accepting a color space as an argument and returning the name of a group the color space should be added to:
<space-picker id="space_picker" spaces="oklch, p3, srgb" value="p3"></space-picker>
<script>
space_picker.groupBy = (space) => {
let isPolar = space.coords.h?.type === "angle";
return isPolar ? "Polar" : "Rectangular";
};
</script>
Events
You can listen to the spacechange
event to get either the id of the current color space (the value
property)
or the color space object itself (the selectedSpace
property):
<space-picker onspacechange="this.nextElementSibling.textContent = this.value"></space-picker>
<output></output>
Dynamic
All properties are reactive and can be set programmatically:
<button onclick="this.nextElementSibling.value = 'oklch'">Switch to OKLCh</button>
<space-picker value="p3"></space-picker>
<space-picker>
plays nicely with other color elements:
<label style="display: block; margin-block-end: .5em">
Space:
<space-picker value="oklch" oninput="this.parentElement.nextElementSibling.space = this.selectedSpace"></space-picker>
</label>
<color-slider space="oklch"
stops="oklch(80% 50% 70), oklch(65% 50% 180)"
oncolorchange="this.nextElementSibling.textContent = this.color"></color-slider>
<color-inline></color-inline>
Reference
Attributes & Properties
Attribute | Property | Property type | Default value | Description |
---|---|---|---|---|
value |
value |
string |
The first color space in this.spaces . |
The current value of the picker. |
spaces |
spaces |
string | Array<ColorSpace> |
All known color spaces. | Comma-separated list of color spaces to use. |
— | groupBy |
Function |
— | Function to group the color spaces. Takes a color space object as an argument and returns the group name. |
– | getSpaceLabel |
Function |
space => space.name |
Function to get the label for a color space. Takes a color space object as an argument and returns its label. |
Getters
These properties are read-only.
Property | Type | Description |
---|---|---|
selectedSpace |
ColorSpace |
Color space object corresponding to the picker current value. |
groups |
Object |
Object containing the color spaces grouped by the groupBy() function. Keys are group names, values are objects with space ids as keys, and corresponding color space objects are values. |
Events
Name | Description |
---|---|
input |
Fired when the space changes due to user action. |
change |
Fired when the space changes due to user action. |
valuechange |
Fired when the value changes for any reason, and once during initialization. |
spacechange |
Fired when the space changes for any reason, and once during initialization. |
Parts
Name | Description |
---|---|
picker |
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 <space-picker>
.
The quick and dirty way is straight from the CDN (kindly provided by Netlify):
<script src="https://elements.colorjs.io/src/space-picker/space-picker.js" type="module"></script>
or in JS:
import "https://elements.colorjs.io/src/space-picker/space-picker.js";
If you are using npm to manage your dependencies, you can import it via:
import "color-elements/space-picker";
or:
import { SpacePicker } from "color-elements";