Color Swatch
A color swatch component for displaying color values with support for transparency and various sizes.
Installation
pnpm dlx shadcn@latest add @diceui/color-swatch
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.
Transparency Support
The color swatch automatically detects transparent colors and displays them with a checkerboard background pattern.
API Reference
ColorSwatch
A color swatch component that displays a color value with optional transparency support.
Prop
Type
| Data Attribute | Value |
|---|---|
[data-disabled] | Present when the component is disabled. |
[data-slot] | Always set to 'color-swatch' for identification. |
Accessibility
The color swatch component includes proper accessibility features:
- ARIA Label: Automatically generates descriptive
aria-labeltext 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-labelreads "Color swatch: [color-value]" - When no color is selected, the
aria-labelreads "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()orhsla()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.