<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 label attribute

You can provide the color label via the label attribute.

<color-swatch label="Turquoise">oklch(65% 0.15 210)</color-swatch>

<color-swatch label="Turquoise" size="large">oklch(65% 0.15 210)</color-swatch>

<color-swatch label="Turquoise">
	<input value="oklch(65% 0.15 210)" />
</color-swatch>

<color-swatch label="Turquoise" size="large">
	<input value="oklch(65% 0.15 210)" />
</color-swatch>

If the attribute’s value matches the element’s content, no additional text with the label will be shown.

<color-swatch label="Turquoise" value="oklch(65% 0.15 210)" size="large">Turquoise</color-swatch>

If used as a property and is not defined via the label attribute, its value is that of the element text content.

The info attribute

You can use the info attribute to show information about the color. Currently, the only type of information supported is color coords (in any color space), but more will be added in the future.

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

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