# Color Swatch

Displays a preview of a selected color.

## Import

```
Copyts
import { ColorSwatch } from "@kobalte/core/color-swatch";
// or
import { Root } from "@kobalte/core/color-swatch";
```

```
Copyts
import { ColorSwatch } from "@kobalte/core/color-swatch";
// or
import { Root } from "@kobalte/core/color-swatch";
```

## Features

- Localized color descriptions for screen reader users.

## Anatomy

The color swatch consists of:

- **ColorSwatch:** The root container for the color swatch.

```
Copytsx
<ColorSwatch />
```

```
Copytsx
<ColorSwatch />
```

## Example

index.tsxstyle.css

```
Copytsx
import { ColorSwatch } from "@kobalte/core/color-swatch";
import { parseColor } from "@kobalte/utils";
import "./style.css";

function App() {
  return (
    <ColorSwatch class="ColorSwatchRoot" value={parseColor("hsl(200, 98%, 39%)")} />
  );
}
```

```
Copytsx
import { ColorSwatch } from "@kobalte/core/color-swatch";
import { parseColor } from "@kobalte/utils";
import "./style.css";

function App() {
  return (
    <ColorSwatch class="ColorSwatchRoot" value={parseColor("hsl(200, 98%, 39%)")} />
  );
}
```

## Usage

ColorSwatch accepts a value via the `value` prop. The value should be `Color` object. You can obtain a Color object by using the `parseColor` function to parse a color from a string.

### Value

index.tsxstyle.css

```
Copytsx
import { ColorSwatch } from "@kobalte/core/color-swatch";
import { parseColor } from "@kobalte/utils";
import "./style.css";

function App() {
  return (
    <ColorSwatch class="ColorSwatchRoot" value={parseColor("#7f0000")} />
  );
}
```

```
Copytsx
import { ColorSwatch } from "@kobalte/core/color-swatch";
import { parseColor } from "@kobalte/utils";
import "./style.css";

function App() {
  return (
    <ColorSwatch class="ColorSwatchRoot" value={parseColor("#7f0000")} />
  );
}
```

### Custom Color Name

index.tsxstyle.css

```
Copytsx
import { ColorSwatch } from "@kobalte/core/color-swatch";
import { parseColor } from "@kobalte/utils";
import "./style.css";

function App() {
  return (
    <ColorSwatch class="ColorSwatchRoot" value={parseColor("hsl(200, 98%, 39%)")} colorName="Kobalte blue" />
  );
}
```

```
Copytsx
import { ColorSwatch } from "@kobalte/core/color-swatch";
import { parseColor } from "@kobalte/utils";
import "./style.css";

function App() {
  return (
    <ColorSwatch class="ColorSwatchRoot" value={parseColor("hsl(200, 98%, 39%)")} colorName="Kobalte blue" />
  );
}
```

## API Reference

### ColorSwatch

`ColorSwatch` is equivalent to the `Root` import from `@kobalte/core/color-swatch`.

| Prop | Description |
| --- | --- |
| value | `Color`<br> The color value to display in the swatch. |
| colorName | `string`<br> A localized accessible name for the color. By default, a description is generated from the color value, but this can be overridden if you have a more specific color name (e.g. Pantone colors). |
| translations | `ColorSwatchIntlTranslations`<br> Localization strings. |

## Rendered elements

| Component | Default rendered element |
| --- | --- |
| `ColorSwatch` | `div` |

Previous[←Color Slider](https://kobalte.dev/docs/core/components/color-slider)Next[Color Wheel→](https://kobalte.dev/docs/core/components/color-wheel)