> For the complete documentation index, see [llms.txt](https://sygnal.gitbook.io/sygnal-webflow-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sygnal.gitbook.io/sygnal-webflow-components/cc/sygnal-components/color-swatch.md).

# 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. 

<figure><img src="https://2784689242-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fijt1q5GHhhw4y4FjjPNG%2Fuploads%2FBEjKS4N11BtKKUx3YKrF%2Fimage.png?alt=media&amp;token=118a89f7-4d0f-45f6-a31f-eca805013750" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2784689242-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fijt1q5GHhhw4y4FjjPNG%2Fuploads%2F7gKIPNXalqQrimMzLwBU%2Fimage.png?alt=media&amp;token=f85f8f54-1a9a-46f8-b25a-88a17309d35e" alt=""><figcaption></figcaption></figure>

## Demonstration

{% embed url="<https://webflow-core-component-test.webflow.io/color-swatch>" %}

## Properties&#x20;

#### 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