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

Color Swatchwebflow-core-component-test.webflow.io

Properties

Settings Group

Property	Type	Default	Options	Description
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

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

Color: #3366cc
Style: Plain
Size: 64 x 64

Displays a simple blue square.

Informative Swatch with RGB

Color: coral
Style: Informative
Size: 128 x 128
Label Format: Hex Color
Label Color: Auto

Displays a coral-colored swatch showing FF7F50 and RGB values (255, 127, 80) with auto-contrast white text.

Named Color with Original Label

Color: rebeccapurple
Style: Informative
Size: 154 x 154
Label Format: As Specified
Label Color: White

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