Color Swatch

Color swatch, with click to copy support. Designed for branding pages to make it easy to assemble and represent the branding swatches.

Does not support CMS well as there is no way to property-bind the CMS color field type.

Documentation
collaboration illustration

Plain swatches

Six ( 6 ) sizes supported. Click to copy the hex color.
‍

Informative swatches

Displays information when the swatch is large enough to.
‍

CMS Experiments

Currently does not support the CMS as there is no color prop type in code components, and text props cannot be bound to a CMS color field.

Fresh Mint Swatch

Delicate Peach Swatch

Soft Lavender Swatch

Warm Coral Swatch

Neutral Gray Swatch

Rich Brown Swatch

Sleek Silver Swatch

Shiny Gold Swatch

Classic Navy Swatch

Calm Teal Swatch

Vibrant Lime Swatch

Bold Magenta Swatch

Bright Cyan Swatch

Soft Pink Swatch

Elegant Violet Swatch

Deep Indigo Swatch

Cool Blue Swatch

Lush Green Swatch

Sunny Yellow Swatch

Bright Orange Swatch

Vibrant Red Swatch