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>

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