Color Swatch

Overview

ColorSwatch is a primitive building block used to visually represent a single color value. It is designed to be highly composable and works seamlessly with `ColorSwatchLabel` to display a tooltip on hover.

While it is primarily used inside `ColorPalette`, you can use it independently to build custom color grids, asymmetric compositions, or any other visual color representation.

Installation

npx shadcn@latest add @tokenui/color-swatch

Usage

Composition

Compose `ColorSwatch` inside a CSS Grid for advanced layouts.

Since ColorContrast hooks directly into the swatch's context, you can easily display calculated accessibility scores.

For more advanced examples, manual override options (like APCA), and API details, check out the Color Contrast documentation.

Corners and Center Placement

You can place text, badges, or numbers freely across the swatch using the `ColorSwatchPart` primitive. It allows setting content in the corners and the center.

API Reference

ColorSwatch

A single color swatch element. By default, it flexes to fill its container and expands slightly on hover.

ColorSwatchPart

Used within ColorSwatch to position text or visual elements around the swatch freely.

ColorSwatchLabel

Label displayed hovering inside a ColorSwatch element on pointer hover.