---
title: "Auto Color Swatches — Free Framer component · Best of Framer"
description: "Free Framer component · by Till Janek · Cards. Auto naming, rgb & hex code, copy value"
canonical: "https://framer.elliotli.dev/component/auto-color-display"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/Auto Color Swatches

# Auto Color Swatches

Auto naming, rgb & hex code, copy value

[View on Framer](https://framer.com/marketplace/components/auto-color-display/?via=elliot-li)

![Auto Color Swatches preview image 1](https://framer.elliotli.dev/og/component/auto-color-display/b23fb46f0df380cb/1600x1200.jpg)

## Summary

Auto naming, rgb & hex code, copy value

## Description

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.

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-t8ij3xa3-EgdHix46PEC38V6kUURpk2E36UOfbj)

## 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.

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-ikeiav4q-8CeNhVlgxgTs4o3hzQ4dHnFezMNATC)

## 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](https://framer.com/remix/ksUWAkfzK2lOL8FI1BSo).

![1\. Build your swatch, 2. Select all instances, 3. Color property -> create color variable](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-t8ij3xa3-jSZltudO4imHCp6cuTdzWcz2SOYoKp)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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #5594

## Details

- **Author**: Till Janek
- **Published**: 2025-11-12
- **Updated**: 2026-02-26
- **Added**: 2025-10-21
- **Categories**: Cards

## More like this

-   [Particle Team Cards](/component/particle-team-cards) — Frame Native · Free — Portraits that move as particles
-   [Card Swap](/component/card-swap) — Antoine Lacombled · $9 — A 3D card stack you can fling
-   [Overlay Reveal Card](/component/overlay-reveal-card) — Pentaclay · Free — Project Card With Hover Overlay
-   [Deckshift](/component/deckshift) — BeyondPixel · $15 — Interactive Stacked Focus Cards