<color-swatch>

Examples

Basic usage

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

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

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

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

You can use a --details-style: compact CSS property to only show the details on user interaction:

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

Warning: This is not keyboard accessible by default. To make the element focusable and also show the popup when it is focused, you need to add tabindex="0" to your element:

<color-swatch size="large" style="--details-style: compact" tabindex="0">oklch(70% 0.25 138)</color-swatch>

By default, the popup will be shown when the element is hovered, focused, :active, or the target of the URL hash. To circumvent user interaction and force the popup to be open use the open attribute. You can also use open="false" to force it to be closed regardless of interaction:

<div style="--details-style: compact">
	<color-swatch size="large">oklch(70% 0.25 138)</color-swatch>
	<color-swatch size="large" open>oklch(70% 0.25 138)</color-swatch>
	<color-swatch size="large" open="false">oklch(70% 0.25 138)</color-swatch>
</div>

The value attribute

You can provide the color via the value 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.

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

<color-swatch value="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.value = "oklch(65% 0.15 210)";
swatch.setAttribute("size", "large");
swatch.textContent = "Turquoise";
future_swatch_container.append(swatch);
</script>

The info attribute

You can use the info attribute to show information about the color. Currently, the types of information supported are color coords (in any color space), the difference (deltaE) and contrast between the current color and another one (specified via the vs attribute).

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

By default, the label for each value will be determined automatically from the type of information (e.g. the full coord name if a coord), but you can customize this by adding a label before the description of the data:

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

The info attribute plays quite nicely with the --details-style: compact style:

<color-swatch size="large" info="oklch.l, oklch.c, oklch.h" style="--details-style: compact">oklch(70% 0.25 138)</color-swatch>

The vs attribute

You can calculate the difference (deltaE) and contrast between the current color and another one. To do so, provide the new color via the vs attribute and specify one of the supported algorithms for calculating the difference (contrast or both) between two colors inside the info attribute.

<color-swatch info="deltaE.2000, WCAG21: contrast.WCAG21" vs="white" size="large">
	oklch(70% 0.25 138)
</color-swatch>

If color coords are also specified, the deltas on a coord-by-coord basis will be shown:

<color-swatch info="oklch.l, oklch.c, oklch.h, deltaE.2000, WCAG21: contrast.WCAG21" vs="white" 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

Getters

These properties are read-only.

CSS variables

Parts

Events

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

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

import "color-elements/color-swatch";

import { ColorSwatch } from "color-elements";