Auto Color Swatches: Free Utilities Component by Till Janek

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.

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.