║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Color Swatch description: A color swatch component for displaying color values with support for transparency and various sizes. preview: true links: api: /docs/components/color-swatch#api-reference

<ComponentTabs name="color-swatch-demo" />

Installation

CLI

npx shadcn@latest add "https://diceui.com/r/color-swatch"

Manual

<Steps> <Step> Install the following dependencies:

 ```package-install
 @radix-ui/react-slot class-variance-authority
 ```

</Step> <Step> Copy and paste the following code into your project.

<ComponentSource name="color-swatch" />

</Step> </Steps>

Usage

Import the component and use it to display color values.

import { ColorSwatch } from "@/components/ui/color-swatch";

<ColorSwatch value="#3b82f6" />

Examples

Different Sizes

The color swatch component supports three different sizes: sm, default, and lg.

<ComponentTabs name="color-swatch-sizes-demo" />

Transparency Support

The color swatch automatically detects transparent colors and displays them with a checkerboard background pattern.

<ComponentTabs name="color-swatch-transparency-demo" />

API Reference

ColorSwatch

A color swatch component that displays a color value with optional transparency support.

<AutoTypeTable path="./types/docs/color-swatch.ts" name="ColorSwatchProps" />

<DataAttributesTable attributes={[ { title: "[data-disabled]", value: "Present when the component is disabled.", }, { title: "[data-slot]", value: "Always set to 'color-swatch' for identification.", }, ]} />

Accessibility

The color swatch component includes proper accessibility features:

• ARIA Label: Automatically generates descriptive aria-label text based on the color value
• Role: Uses role="img" to indicate it's an image representation of a color
• Disabled State: Properly handles disabled state with appropriate visual and interaction changes

Screen Reader Support

• When a color value is provided, the aria-label reads "Color swatch: [color-value]"
• When no color is selected, the aria-label reads "No color selected"

Color Format Support

The color swatch component supports various color formats:

• HEX: #3b82f6
• RGB: rgb(59, 130, 246)
• RGBA: rgba(59, 130, 246, 0.5)
• HSL: hsl(217, 91%, 60%)
• HSLA: hsla(217, 91%, 60%, 0.5)
• Named Colors: blue, red, etc.

Transparency Detection

The component automatically detects transparent colors by checking for:

• rgba() or hsla() function notation
• RGB/HSL with 4 values (including alpha)
• Any color format that includes transparency information

When transparency is detected, a checkerboard pattern is displayed behind the color to show the transparency effect. Use the withoutTransparency prop to disable this behavior.

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║