Auto Color Swatches

Auto naming, rgb & hex code, copy value

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. Functions Define your color once and let the component handle the rest. It includes 3 modes that can be freely styled and combined: Text Mode Automatically generates a color name (full styling control). Code Mode Displays the color value as HEX or RGB (fully customizable text styles). Color Mode Shows the actual color. Copy Value 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. Create 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 . 1. Build your swatch, 2. Select all instances, 3. Color property -> create color variable How to use 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.

Auto naming, rgb & hex code, copy value