<color-swatch>

Examples

Static

<color-swatch>oklch(70% 0.25 138)</color-swatch>

<color-swatch swatch="large">oklch(70% 0.25 138)</color-swatch>

Editable

<color-swatch>
	<input value="oklch(70% 0.25 138)" />
</color-swatch>

<color-swatch swatch="large">
	<input value="oklch(70% 0.25 138)" />
</color-swatch>

With name

<color-swatch>
	<label slot="before" for=c1>Accent color:</label>
	<input value="oklch(70% 0.25 138)" id=c1 />
</color-swatch>

<color-swatch swatch="large">
	<label slot="before" id=c2>Accent color:</label>
	<input value="oklch(70% 0.25 138)" id=c2 />
</color-swatch>

Bound to CSS property

<color-swatch swatch="large" property="--color-red">
	<input />
</color-swatch>

Update via JS

Static

oklch(70% 0.25 138)

Editable

Installation

To install all color elements, check out the instructions on the homepage. The rest of this section is about using only <color-swatch>.

The quick and dirty way is straight from the CDN (kindly provided by Netlify):

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

or in JS:

import "https://elements.colorjs.io/color-swatch/color-swatch.js";

If you are using npm to manage your dependencies, you can import it via:

import "color-elements/color-swatch";

or:

import { ColorSwatch } from "color-elements";