Color Swatch ✅
A useful color swatch, for branding kits
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.
Multiple sizes and formatting controls.
Demonstration
Properties
Settings Group
Color
Text
#000000
Any CSS color
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
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:
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
Last updated