<color-swatch>

<color-swatch>

Examples

Basic usage

Default Large
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>

The color attribute

You can provide the color via the color attribute, which can be more convenient when you have slotted content.

In that case, the content of the element is merely presentational (unless it’s an <input>). If you don’t specify any content, no text will be shown.

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

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

You can also use this as a property when creating color swatches dynamically:

<div id="future_swatch_container"></div>
<script>
let swatch = document.createElement("color-swatch");
swatch.color = "oklch(65% 0.15 210)";
swatch.setAttribute("size", "large");
swatch.textContent = "Turquoise";
future_swatch_container.append(swatch);
</script>

The coords attribute

You can show any of the color coords in any color space.

<color-swatch coords="oklch.l, oklch.c, oklch.h" size="large">
	oklch(70% 0.25 138)
</color-swatch>

By default, the coord name will be used as a coord label. Add a label before the corresponding coord, followed by the colon to change this.

<color-swatch coords="L: oklch.l, C: oklch.c, H: oklch.h" size="large">
	oklch(70% 0.25 138)
</color-swatch>

With slot content

Before and after:

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

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

<color-swatch size="large">
	<label slot="before" for=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>

Adding text within the default swatch:

<color-swatch size="large">
	<div slot="swatch-content">Some text</div>
	<input value="oklch(70% 0.25 138)" id=c1 />
</color-swatch>

Note that the text color will automatically switch from black to white to remain readable (using this technique).

Replacing the whole swatch with a custom element:

<color-swatch size="large">
	<div slot="swatch">Some text</div>
	<input value="oklch(70% 0.25 138)" id=c1 />
</color-swatch>

Events

<color-swatch size="large" oncolorchange="this.nextElementSibling.textContent = this.color">
	<input value="oklch(70% 0.25 138)" />
</color-swatch>
<color-inline></color-inline>

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>

Reference

Attributes & Properties

Attribute Property Property type Default value Description
color color Color | string - The current color value.
coords coords string - Comma-separated list of coords of the current color to be shown.
value value string - The current value of the swatch.
size - large - The size of the swatch. Currently, it is used only to make a large swatch.
property property string - CSS property to bind to.
scope scope string :root CSS selector to use as the scope for the specified CSS property.
gamuts gamuts string srgb, p3, rec2020: P3+, prophoto: PP Comma-separated list of gamuts to be used by the gamut indicator.

CSS variables

Variable Type Description
--transparency-grid <image> Gradient used as a background for transparent parts of the swatch.
--transparency-cell-size <length> The size of the cells of the transparency gradient.
--transparcency-background <color> The background color of the transparency gradient.
--transparency-darkness <percentage> The opacity of the black color used for dark parts of the transparency gradient.

Getters

These properties are read-only.

Property Type Description
gamut string The id of the current gamut (e.g. srgb).

Events

Name Description
valuechange Fired when the value changes for any reason, and once during initialization.
colorchange Fired when the color changes for any reason, and once during initialization.
gamutchange Fired when the gamut changes for any reason, and once during initialization.

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";