Tailwind CSS Color Configuration Guide

Extend Tailwind with your custom color palettes. From single colors to full design systems with shade scales.

1
Configure
Add your colors to tailwind.config.js
2
Use Utilities
Apply with bg-, text-, border- classes
3
Build & Ship
Tailwind generates only used classes

Tailwind CSS v4: colors in CSS with @theme

Tailwind CSS v4 (released January 2025) moved configuration into CSS. Instead of tailwind.config.js, you declare colors as --color-* variables inside an @theme block, and Tailwind generates bg-, text-, border- and other utilities from them. The tailwind.config.js examples further down still apply to v3 projects (and to v4 projects that load a legacy config with @config).

@import "tailwindcss";

@theme {
  --color-brand: #2D5BE3;          /* bg-brand, text-brand */
  --color-accent: #E8453C;
  --color-primary-50: #EEF2FF;     /* bg-primary-50 */
  --color-primary-500: #6366F1;
  --color-primary-900: #312E81;
}

Because theme values are real CSS variables, you can also use them directly: color: var(--color-brand);. To remove all default colors in v4, add --color-*: initial; at the top of the @theme block. Tailwind v4's own default palette is defined in OKLCH, so its shades look slightly more vivid than the v3 HEX values.

Basic Configuration

Add a single custom color to your Tailwind theme. The simplest way to extend Tailwind's color palette.

// tailwind.config.js module.exports = { theme: { extend: { colors: { brand: '#2D5BE3', accent: '#E8453C', } } } }

Generated Utility Classes

bg-brand
Aa
text-brand
border-brand

Creating Color Scales

Build professional shade scales like Tailwind's built-in colors. Perfect for design systems.

// tailwind.config.js module.exports = { theme: { extend: { colors: { primary: { 50: '#EEF2FF', 100: '#E0E7FF', 200: '#C7D2FE', 300: '#A5B4FC', 400: '#818CF8', 500: '#6366F1', // Base color 600: '#4F46E5', 700: '#4338CA', 800: '#3730A3', 900: '#312E81', 950: '#1E1B4B', } } } } }

Color Scale Preview

50
100
200
300
400
500
600
700
800
900
950
<!-- Usage Examples --> <button class="bg-primary-500 hover:bg-primary-600"> Primary Button </button> <div class="bg-primary-50 text-primary-900"> Light background with dark text </div> <div class="border-primary-300 text-primary-700"> Bordered card </div>

Integrating Palette from swatches.net

Import any palette from our library directly into your Tailwind config.

// Fintech Blue Palette from swatches.net module.exports = { theme: { extend: { colors: { fintech: { darkest: '#0A1628', dark: '#1B3A5C', base: '#2D7DD2', light: '#6CB4EE', lightest: '#E8F1F8', } } } } }
// Organic Food Greens Palette module.exports = { theme: { extend: { colors: { organic: { darkest: '#1B4332', dark: '#40916C', base: '#74C69D', light: '#D8F3DC', lightest: '#FFF1E6', } } } } }

Advanced: Full Design System

A production-ready configuration with semantic naming and complete color system.

// tailwind.config.js module.exports = { theme: { extend: { colors: { // Brand colors brand: { primary: '#2D5BE3', secondary: '#E8453C', accent: '#F4A940', }, // Semantic colors success: { 50: '#ECFDF5', 500: '#18A558', 700: '#0F7A3F', }, warning: { 50: '#FEF3E8', 500: '#F4A940', 700: '#C77C1E', }, error: { 50: '#FEF2F2', 500: '#E8453C', 700: '#C0362F', }, // Neutral scale neutral: { 50: '#FAFAF8', 100: '#F2F1EE', 200: '#E5E4E0', 300: '#D1D0CC', 400: '#9A9A9A', 500: '#6B6B6B', 600: '#4A4A4A', 700: '#333333', 800: '#1A1A1A', 900: '#0F0F0F', } } } } }

Generating Shade Scales Automatically

Use these tools to generate perfect shade scales from a single base color.

🎨
Use HSL for Scales
Adjust lightness while keeping hue and saturation consistent to create harmonious scales.
📐
Follow the 100-900 Pattern
Stick to Tailwind's convention: 50 (lightest), 500 (base), 900 (darkest) for consistency.
✅
Test Contrast
Use our contrast checker to ensure text colors meet WCAG AA standards (4.5:1 minimum).
🔄
Semantic Naming
Use names like 'primary', 'success', 'danger' instead of color names for flexibility.

Quick Reference: Common Patterns

Replacing Default Colors

// Replace all default colors (use with caution) module.exports = { theme: { colors: { // This replaces ALL Tailwind colors white: '#FFFFFF', black: '#000000', primary: { /* your scale */ }, gray: { /* your scale */ } } } }

Using CSS Variables

// Reference CSS variables for dynamic theming module.exports = { theme: { extend: { colors: { primary: 'var(--color-primary)', secondary: 'var(--color-secondary)', } } } } /* Then in your CSS */ :root { --color-primary: #2D5BE3; --color-secondary: #E8453C; }

Opacity Utilities

<!-- Tailwind automatically generates opacity variants --> <div class="bg-primary-500/50"> <!-- 50% opacity --> <div class="bg-primary-500/75"> <!-- 75% opacity --> <div class="bg-primary-500/90"> <!-- 90% opacity -->

Ready to Get Started?

Browse our palette library to find your perfect color scheme, then copy the Tailwind config directly into your project.

Browse Palettes