`<color-swatch>`

Examples

Static

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

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

Editable

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

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

With content before/after

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

<color-swatch size="large">
	<label slot="before" id=c2>Accent color:</label>
	<input value="oklch(70% 0.25 138)" id=c2 />
	<small slot="after">Tip: Pick a bright medium color.</small>
</color-swatch>

Bound to CSS property

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

Update via JS

Static

<color-swatch id="dynamic_static">oklch(70% 0.25 138)</color-swatch>
<button onclick='dynamic_static.color = "oklch(60% 0.15 0)"'>Change color</button>

Editable

<color-swatch id="dynamic_editable">
	<input value="oklch(70% 0.25 138)" />
</color-swatch>
<button onclick='dynamic_editable.color = "oklch(60% 0.15 0)"'>Change color</button>

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/src/color-swatch/color-swatch.js" type="module"></script>

or in JS:

import "https://elements.colorjs.io/src/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";