divswatch-gridbeginner

Color Swatch Grid

A grid of color swatches with hex values and copy-on-click functionality styling.

Preview

Blue 500

#3b82f6

Indigo 500

#6366f1

Purple 500

#a855f7

Pink 500

#ec4899

Rose 500

#f43f5e

<div class="grid grid-cols-5 gap-3 max-w-md">
  <div class="group cursor-pointer">
    <div class="aspect-square rounded-xl bg-blue-500 shadow-sm hover:shadow-md hover:scale-105 transition-all"></div>
    <p class="text-xs text-gray-700 font-medium mt-1.5 text-center">Blue 500</p>
    <p class="text-xs text-gray-400 text-center">#3b82f6</p>
  </div>
  <div class="group cursor-pointer">
    <div class="aspect-square rounded-xl bg-indigo-500 shadow-sm hover:shadow-md hover:scale-105 transition-all"></div>
    <p class="text-xs text-gray-700 font-medium mt-1.5 text-center">Indigo 500</p>
    <p class="text-xs text-gray-400 text-center">#6366f1</p>
  </div>
  <div class="group cursor-pointer">
    <div class="aspect-square rounded-xl bg-purple-500 shadow-sm hover:shadow-md hover:scale-105 transition-all"></div>
    <p class="text-xs text-gray-700 font-medium mt-1.5 text-center">Purple 500</p>
    <p class="text-xs text-gray-400 text-center">#a855f7</p>
  </div>
  <div class="group cursor-pointer">
    <div class="aspect-square rounded-xl bg-pink-500 shadow-sm hover:shadow-md hover:scale-105 transition-all"></div>
    <p class="text-xs text-gray-700 font-medium mt-1.5 text-center">Pink 500</p>
    <p class="text-xs text-gray-400 text-center">#ec4899</p>
  </div>
  <div class="group cursor-pointer">
    <div class="aspect-square rounded-xl bg-rose-500 shadow-sm hover:shadow-md hover:scale-105 transition-all"></div>
    <p class="text-xs text-gray-700 font-medium mt-1.5 text-center">Rose 500</p>
    <p class="text-xs text-gray-400 text-center">#f43f5e</p>
  </div>
</div>

Color Breakdown

Swatch 1

bg-blue-500

#3b82f6

Swatch 2

bg-indigo-500

#6366f1

Swatch 3

bg-purple-500

#a855f7

Swatch 4

bg-pink-500

#ec4899

Swatch 5

bg-rose-500

#f43f5e

Name Text

text-gray-700

#374151

Hex Text

text-gray-400

#9ca3af

Dark Mode Variant

Add these Tailwind classes for a dark mode adaptation of this recipe.

dark:text-gray-300 dark:text-gray-500

Use Cases

Color picker toolsDesign system documentationBrand color displays

Browser Support

All modern browsers.

Related Recipes

Feature Card

card - beginner

Feature Grid Section

section - beginner

Success Alert

div - beginner

Error Alert

div - beginner

Warning Alert

div - beginner

Info Toast

div - intermediate

Build Your Own Color Recipe

Use our Tailwind CSS tools to experiment with colors, gradients, and component styles.

Explore Tools

Frequently Asked Questions

How do I add copy-to-clipboard?▼

Add an onClick handler that calls navigator.clipboard.writeText(hexValue) and briefly show a 'Copied!' tooltip.

How do I show different shades?▼

Create a vertical stack of 50-950 shades for each color, using Tailwind's shade classes like bg-blue-50 through bg-blue-950.