<color-swatch>

What is it?

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.

Examples of use

• HTML

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

  Output

• HTML

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

  Output

• HTML

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

  Output

• HTML

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

  Output