Ever wanted to display the colors of your brand or design system? With AutoColor Display, you can instantly visualize, label, and share your color values – all in one smart component that displays text.
Define your color once and let the component handle the rest. It includes 3 modes that can be freely styled and combined:
Automatically generates a color name (full styling control).
Displays the color value as HEX or RGB (fully customizable text styles).
Shows the actual color.
Enable "copy on click" to copy the current value based on the selected display mode. Includes a fully customizable confirmation toast synced between instances, so you can match it perfectly to your own color swatches.
The component you receive is displayed as text. The swatch in the preview is only for showcasing functionality. You can use it in various modes to build your own color swatches.
Need inspiration? → Remix the demo project.
Combine all modes into your own swatch components and connect them with the same color variant. When you change the color, everything updates automatically — Name, HEX, RGB — ready to copy and use.
Till Janek
