# Color Swatch

Previews a single color or a mix of colors.

Group: Basics

## Import

```tsx
import { ColorSwatch } from "@indoku/ui"
```

## Examples

### Basic usage

```tsx
function ColorSwatchDemo() {
  return (
    <HStack gap="4">
      <ColorSwatch value="#bada55" size="lg" />
      <ColorSwatch value="rgba(255,0,0,0.5)" size="lg" />
      <ColorSwatchMix size="lg" items={["red", "pink", "green"]} />
    </HStack>
  )
}
```