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	-

Color Swatch Example

How to Use It

1. Drag the Color Swatch node into your graph.

2. Connect a color value to the "Value" input.

3. The node will display the color as a swatch in the editor.

4. Use it to visually check the appearance of the color in your design system.

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.