<color-swatch>

The color-swatch component uses my own library Colori. It takes a color expression and a format as HTML arguments. It displays a preview of the color, its expression in the requested format, and a button to copy that expression.

<color-swatch format="hex" color="skyblue"></color-swatch>

<color-swatch format="rgb" color="skyblue"></color-swatch>

<color-swatch format="oklch" color="#87ceeb"></color-swatch>

<color-swatch format="rgb" color="oklab(56% -0.11 -0.18)"></color-swatch>

<color-swatch>

What is it?

Examples of use

HTML

Output

HTML

Output

HTML

Output

HTML

Output