Color Helper Component

A component for displaying and interacting with token-backed color swatches.

Brand Colors

Core brand colors exposed directly from the shared design token layer.

Resolved Theme Tokens

These swatches follow the current document theme. Use the shared switch to inspect the live light and dark mappings.

Light and Dark Token Families

Select which theme scope to preview. The swatches keep the same semantic token names and resolve them inside the selected light or dark context.

Interactive Example

Customize the component using token values or any other CSS color string.

Event log: copied values will appear here.