Color Elements

These are some highly experimental color-related web components. Use at your own risk, the API can change at any point.

All elements

• <color-picker>
• <color-scale>
• <color-chart>
• <color-slider>
• <channel-slider>
• <color-swatch>
• <color-inline>
• <gamut-badge>

Upcoming:

• <color-plane>
• <space-picker>
• <channel-picker>

Usage

CDN

To include all components at once:

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

To cherry-pick individual components, follow the instructions within the component’s page, but it generally looks like this:

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

Each component imports its own dependencies and styles.

NPM

As usual:

npm i color-elements

and then:

import "color-elements";

You can also import individual components:

import "color-elements/COMPONENT_NAME";