Skip to main content
Kobalte
ComponentsChangelog

Color Swatch

Since v0.13.9@kobalte/core/color-swatchSource

Displays a preview of a selected color.

Import

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.
<ColorSwatch />

Example

import { ColorSwatch } from "@kobalte/core/color-swatch";


export function BasicExample() {
  return (
    <ColorSwatch
      class={style.ColorSwatchRoot}
      value={parseColor("hsl(200, 98%, 39%)")}
    />
  );
}
.ColorSwatchRoot {
  height: 56px;
  width: 56px;
  border-radius: 6px;
}

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

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


function App() {
  return <ColorSwatch class="ColorSwatchRoot" value={parseColor("#7f0000")} />;
}
.ColorSwatchRoot {
  height: 56px;
  width: 56px;
  border-radius: 6px;
}

Custom Color Name

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


function App() {
  return (
    <ColorSwatch
      class="ColorSwatchRoot"
      value={parseColor("hsl(200, 98%, 39%)")}
      colorName="Kobalte blue"
    />
  );
}
.ColorSwatchRoot {
  height: 56px;
  width: 56px;
  border-radius: 6px;
}

API Reference

ColorSwatch

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

PropDescription
valueColor
The color value to display in the swatch.
colorNamestring
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).
translationsColorSwatchIntlTranslations
Localization strings.

Rendered elements

ComponentDefault rendered element
ColorSwatchdiv

Last updated: 7/16/26, 7:09 AM