This component isnt about one prebuild card: Use each mode alone or combine them into your custom color swatch. One color input = Auto name, HEX & RGB display. Copy values easily.
Made with Workshop
Build your own component with AI
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.
