How do I add custom color scales in Tailwind CSS v4?

In Tailwind CSS v4, add your colors inside the @theme directive in your main CSS file using --color-{name}-{step}: #hex;. This automatically exposes bg-, text-, and border- utilities.

How does the Hex to Tailwind class matcher work?

The matcher computes the CIELAB Delta-E color difference between your input hex and all 242 official Tailwind CSS palette colors, identifying the closest perceptual match with human vision accuracy.

Can I export these colors into shadcn/ui?

Yes, select the shadcn/ui Tokens tab to copy CSS variables for :root and .dark ready to paste into your globals.css file.

Tailwind CSS v4 & v3 • shadcn/ui Perceptual Delta-E Matcher • 100% Free

Tailwind Color Generator & Hex Class Matcher

Generate mathematical 11-step 50–950 color scales for Tailwind CSS. Find the closest official Tailwind color class for any hex with perceptual CIELAB Delta-E matching, and export ready-to-use tokens for Tailwind v4 @theme, Tailwind v3 config, shadcn/ui, and Figma.

Quick Bases:

Scale Parameters

Base Color (Step 500)

Scale Name

Generates 50 (lightest tint) to 950 (deepest dark mode shade) with uniform perceptual lightness progression.

Closest Tailwind CSS Class Match

Exact Match

Scanned across all 242 official Tailwind v3/v4 colors using human ocular CIELAB Delta-E distance.

bg-blue-500

#3B82F6 Official Palette Hex

Generated 11-Step Palette Scale

Click any swatch to copy HEX

Export Design Tokens & Configuration

Zero dependencies. Copy directly into your front-end codebase.

// Generating Tailwind tokens...

How Tailwind CSS v4 Handles Color Architecture

Tailwind v4 CSS-First @theme Engine

In Tailwind CSS v4, JavaScript configuration files (tailwind.config.js) are superseded by the native CSS @theme directive. Custom colors are defined directly as CSS custom properties:

@theme {
  --color-brand-500: #3B82F6;
}

This instantly provides bg-brand-500, text-brand-500, and border-brand-500 classes with zero JavaScript compilation overhead.

shadcn/ui Semantic Token Binding

Modern component libraries like shadcn/ui do not hardcode utility numbers like 500 into components. Instead, they use semantic abstraction layers (--primary, --secondary, --accent) defined in your global CSS.

Our generator maps Step 500 to --primary, Step 50 to light mode --secondary, and Step 900 to dark mode --secondary, delivering instantaneous 1-click theme synchronization.