> 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 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
{% embed url="" %}
## 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
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://sygnal.gitbook.io/sygnal-webflow-components/cc/sygnal-components/color-swatch.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.