Color Swatch
What It Does
The Color Swatch node displays a single color in a swatch format. It provides a visual preview of a color for design reference.
Inputs
| Name | Description | Type | Required |
|---|---|---|---|
| Value | The color to display as a swatch | Color | Yes |
Outputs
| Name | Description | Type |
|---|---|---|
| No outputs | This node is for preview purposes only | - |
How to Use It
- Drag the Color Swatch node into your graph.
- Connect a color value to the "Value" input.
- The node will display the color as a swatch in the editor.
- Use it to visually check the appearance of the color in your design system.
.png)
Tips
- Add multiple Color Swatch nodes to visualize different colors simultaneously.
- Use this node at key points in your graph to monitor color transformations.
See Also
- Color Compare: For comparing two colors side-by-side.
- Color Scale: For visualizing a sequence of colors.
Use Cases
- Color Verification: Visually confirm the exact appearance of generated colors.
- Design System Reference: Display brand colors or theme colors for reference.
- Color Transformation: Monitor color changes after operations like lightening, darkening, or mixing.