Examples

Swatch using default light and dark text colors

<color-swatch color-value="#F34F1c" color-name="Red"></color-swatch>

Swatch with custom text colors

<color-swatch
  id="custom-text-colors"
  color-value="#ffba01"
  color-name="Yellow"
  light-text-color="#f471f8"
  dark-text-color="#1d049d"
></color-swatch>

Swatch with contrast info shown by default

<color-swatch
  id="contrast-visible"
  color-value="#7FBC00"
  color-name="Green"
  show-contrast-info="true"
></color-swatch>

Swatch with slot content

<color-swatch id="dynamic-swatch" color-value="#01a6f0">
Variable: $blue-10
</color-swatch>

Check out the docs for full component documentation.