Color Swatch

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

Alpha

<script setup lang="ts">
import { ColorSwatch } from 'akar';
import './styles.css';
</script>

<template>
  <div class="akar-demo akar-demo-ColorSwatch">
    <ColorSwatch
      color="#30a46c"
      class="swatch"
    />
  </div>
</template>

@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.

pnpm add akar

yarn add akar

npm install akar

bun add akar

Looking for a complete color picker? Check out the Color Picker example that combines Color Area, Color Slider, Color Field, and Color Swatch components.

Anatomy

Import all parts and piece them together.

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

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

API Reference

ColorSwatch

The main component that displays a color swatch.

Prop	Default	Type
`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. Read our Composition guide for more details.
`color`	`""`	`string \| Color` The color to display in the swatch as a hex string or Color object. 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.

Slot (default)	Payload
`color`	`string`
`alpha`	`number`

ColorSwatch.vue source

Color Slider

A slider control for adjusting individual color channels.

Color Swatch Picker

A component that allows users to select from a set of predefined colors, often used for themes or branding.