---
title: "Color Swatch"
description: "A predefined color block that allows users to quickly select commonly used or brand-specific colors."
canonical_url: "https://vinicunca.dev/akar/components/color-swatch"
---
# Color Swatch

> A predefined color block that allows users to quickly select commonly used or brand-specific colors.

`````vue [index.vue]
<script setup lang="ts">
import { green } from '@radix-ui/colors'
import { ColorSwatch } from 'akar'
import './styles.css'
</script>

<template>
  <div class="akar-demo akar-demo-ColorSwatch">
    <ColorSwatch
        :color="green.green9"
        class="swatch"
      />
  </div>
</template>
```

```css [styles.css]
@scope (.akar-demo-ColorSwatch) {
.swatch {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}

.dark .swatch {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}
}
```

## Features

- Supports custom colors
- Provides an accessible label for screen readers
- Provides a color contrast for better visibility

## Installation

Install the component from your command line.

```bash [pnpm]
pnpm add akar
```

```bash [yarn]
yarn add akar
```

```bash [npm]
npm install akar
```

```bash [bun]
bun add akar
```

> [!TIP]
> 
> Looking for a complete color picker? Check out the [Color Picker example](https://vinicunca.dev/examples/color-picker) that combines Color Area, Color Slider, Color Field, and Color Swatch components.

## Anatomy

Import all parts and piece them together.

```vue
<script setup>
import {
  ColorSwatch,
} from 'akar';
</script>

<template>
  <ColorSwatch color="#ff0000" />
</template>
```

## API Reference

### ColorSwatch

The main component that displays a color swatch.

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `as` | `"div"` | `AsTag \| Component` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `asChild` |  | `boolean` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](/akar/guides/composition) guide for more details. |
| `color` | `""` | `string \| Color` | The color to display in the swatch as a hex string or Color object.<br>Example: `#16a372`, `#ff5733`, or `{ space: 'hsl', h: 120, s: 100, l: 50, alpha: 1 }`. |
| `label` |  | `string` | Optional accessible label for the color. If omitted, the color name will be derived from the color value. |

**Slots**

| Slot | Payload | Description |
| --- | --- | --- |
| `color` | `string` |  |
| `alpha` | `number` |  |

[ColorSwatch.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/ColorSwatch/ColorSwatch.vue)

---

- [GitHub](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/ColorSwatch)
- [npm](https://www.npmjs.com/package/akar)


## Sitemap

See the full [sitemap](https://vinicunca.dev/sitemap.md) for all pages.