Color Swatch - Chakra Ui

Usage

tsx

import { ColorSwatch } from "@chakra-ui/react"

tsx

<ColorSwatch />

Use the size prop to change the size of the color swatch.

Here's an example of how to create a color swatch with an alpha channel.

Here's an example of how to compose the ColorSwatch with a Badge.

Use the ColorSwatchMix to create a color swatch that contains multiple colors, but retains the size of a single color swatch.

Here's an example of composing multiple swatches to create a palette.