A color swatch component that displays colors with optional informatiion. Generates the SVG automatically. Click any swatch to copy the color value to your clipboard.
The color to display. Accepts hex codes (#ff6600), named colors (red), RGB (rgb(255,100,50)), RGBA, HSL, and other CSS color formats.
Style
Variant
Plain
Plain, Informative
Plain displays color only. Informative shows hex code and RGB values (on larger sizes).
Size
Variant
64 x 64
32 x 32, 48 x 48, 64 x 64, 96 x 96, 128 x 128, 154 x 154
The dimensions of the swatch in pixels. Larger sizes display more information in Informative style.
Label Group
Property
Type
Default
Options
Description
Label Format
Variant
Hex Color
As Specified, Hex Color
As Specified displays the color value exactly as entered. Hex Color converts any color format to a normalized 6-digit hex code.
Label Color
Variant
Auto
White, Black, Auto
The color of the label text. Auto uses white text unless the background is light enough that black provides better contrast.
Size & Information Display
The amount of information shown in Informative style depends on the swatch size:
Size
Informative Style Shows
32 x 32
Color only (too small for text)
48 x 48
Color only (too small for text)
64 x 64
Hex code
96 x 96
Hex code + RGB values
128 x 128
Hex code + RGB values
154 x 154
Hex code + RGB values
Plain style always shows color only, regardless of size.
Click-to-Copy
Click any swatch to copy the color value to your clipboard. A "Copied!" tooltip appears briefly to confirm the action.
In Hex Color label format: Copies the normalized hex value (e.g., #ff6600)
In As Specified label format: Copies the original color value as entered
Auto-Sizing Text
When using As Specified label format with longer color values (like rgba(255, 128, 64, 0.5)), the text automatically scales down to fit within the swatch boundaries.
Examples
Basic Color Swatch
Displays a simple blue square.
Informative Swatch with RGB
Displays a coral-colored swatch showing FF7F50 and RGB values (255, 127, 80) with auto-contrast white text.
Named Color with Original Label
Displays the color with "REBECCAPURPLE" as the label text.
Tips
Use Hex Color label format for consistent hex output regardless of input format
Use As Specified for displaying CSS variable names or named colors
For accessibility, consider using Auto label color to ensure readable text
Larger sizes (96+) are recommended for Informative style to display all information clearly
