How to Create Custom Color Palettes for Tailwind CSS in 2026

Why Custom Colors Matter in Tailwind CSS

Tailwind CSS ships with a beautiful default color palette, but real-world projects need brand-specific colors. Whether you're building a startup's marketing site or a SaaS dashboard, your color palette is your brand's visual fingerprint.

In Tailwind v4 (2026), the color system has been completely redesigned around CSS custom properties and the new `@theme inline` syntax. This guide covers everything you need to know.

Tailwind v4 Color System: What Changed

Old Way (Tailwind v3)

```js

// tailwind.config.js

module.exports = {

theme: {

extend: {

colors: {

primary: '#A855F7',

secondary: '#6366F1',

}

}

}

}

```

New Way (Tailwind v4)

```css

/* globals.css */

@import "tailwindcss";

@theme inline {

--color-primary: #A855F7;

--color-primary-container: #C084FC;

--color-secondary: #6366F1;

--color-surface: #1a1c20;

}

```

Key differences:

• No config file needed — colors live in your CSS
• CSS custom properties — use `var(--color-primary)` anywhere
• `@theme inline` — tells Tailwind to generate utilities from these tokens
• Automatic utilities — `bg-primary`, `text-primary-container`, etc.

Step 1: Extract Your Brand Colors

Start by extracting colors from your existing brand assets. Upload your logo, marketing materials, or mood board images to PaletteAI to get exact hex values.

PaletteAI gives you:

• 6 dominant colors from any image
• Hex, RGB, and HSL formats
• One-click copy for CSS and Tailwind
• Complementary and triadic suggestions

Step 2: Build Your Color Scale

A single brand color isn't enough. You need a full scale from light to dark:

```css

@theme inline {

--color-primary-50: #FAF5FF;

--color-primary-100: #F3E8FF;

--color-primary-200: #E9D5FF;

--color-primary-300: #D8B4FE;

--color-primary-400: #C084FC;

--color-primary-500: #A855F7;

--color-primary-600: #9333EA;

--color-primary-700: #7E22CE;

--color-primary-800: #6B21A8;

--color-primary-900: #581C87;

--color-primary-950: #3B0764;

}

```

Use these for different states:

• 50-100: Backgrounds, hover states
• 200-300: Borders, dividers
• 400-500: Primary buttons, links
• 600-700: Hover/active states
• 800-950: Dark mode accents, text on light backgrounds

Step 3: Define Semantic Tokens

Instead of using color scales directly, create semantic tokens that describe *purpose* rather than *appearance*:

```css

@theme inline {

/* Semantic tokens */

--color-surface: #111317;

--color-surface-container: #1a1c20;

--color-surface-container-high: #1e2024;

--color-surface-lowest: #0c0e12;

--color-on-surface: #e2e2e8;

--color-on-surface-variant: #c7c4d7;

--color-outline: #464554;

/* Primary action colors */

--color-primary: #A855F7;

--color-primary-container: #C084FC;

--color-on-primary: #FFFFFF;

/* Status colors */

--color-success: #22C55E;

--color-warning: #F59E0B;

--color-error: #EF4444;

}

```

This approach (inspired by Material Design 3) lets you:

• Switch themes by changing token values, not class names
• Maintain consistent hierarchy across your entire app
• Support dark/light modes with a single token swap

Step 4: Use Colors in Components

With your theme defined, use Tailwind utilities:

```html

Get Started

```

Step 5: Dark Mode Support

In Tailwind v4, dark mode works with the same semantic tokens. Define two sets:

```css

@theme inline {

/* Light mode tokens */

--color-surface: #FFFFFF;

--color-on-surface: #1a1c20;

}

@media (prefers-color-scheme: dark) {

:root {

--color-surface: #111317;

--color-on-surface: #e2e2e8;

}

}

```

Or use the `dark:` variant in Tailwind classes:

```html

```

Real-World Example: Building a SaaS Dashboard Palette

Let's build a complete palette for a SaaS analytics dashboard:

1. Extract inspiration colors

Upload a dashboard screenshot you admire to PaletteAI.

2. Define the theme

```css

@import "tailwindcss";

@theme inline {

/* Brand */

--color-primary: #6366F1;

--color-primary-container: #818CF8;

--color-secondary: #A855F7;

/* Surfaces */

--color-surface: #0F172A;

--color-surface-card: #1E293B;

--color-surface-elevated: #334155;

/* Text */

--color-on-surface: #F1F5F9;

--color-on-surface-muted: #94A3B8;

/* Data visualization */

--color-chart-1: #6366F1;

--color-chart-2: #A855F7;

--color-chart-3: #EC4899;

--color-chart-4: #F59E0B;

--color-chart-5: #22C55E;

/* Status */

--color-success: #22C55E;

--color-warning: #F59E0B;

--color-error: #EF4444;

--color-info: #3B82F6;

}

```

3. Apply to components

```html

```

Exporting Colors from PaletteAI to Tailwind

PaletteAI has a built-in Tailwind export feature. After extracting colors from an image:

1. Click the Tailwind export button

2. Copy the generated `@theme inline` block

3. Paste into your `globals.css`

The export includes properly named tokens ready to use as Tailwind utilities.

Color Palette Best Practices

Do:

• Start with brand colors and build outward
• Use semantic names (primary, surface, on-surface) not visual names (purple, dark-gray)
• Test accessibility — every text/background combo needs 4.5:1 contrast
• Include neutrals — you need 8-10 gray shades for real-world UIs
• Document your palette — maintain a style guide page

Don't:

• Use more than 5-6 distinct hues (plus neutrals)
• Mix warm and cool grays
• Forget hover, active, and disabled states
• Skip dark mode testing
• Hard-code hex values instead of using tokens

Frequently Asked Questions

Do I still need tailwind.config.js in Tailwind v4?

For most color work, no. The `@theme inline` block in your CSS replaces the JavaScript config. You only need the config file for plugins or complex customizations.

How do I use PaletteAI colors in Tailwind?

Extract colors with PaletteAI, click the Tailwind export button, and paste the generated CSS variables into your `@theme inline` block. The colors become available as utilities immediately.

Can I use both Tailwind's default colors and custom colors?

Yes. Your custom colors in `@theme inline` extend the defaults. You can still use `bg-blue-500` alongside `bg-primary`.

What's the best number of colors for a Tailwind theme?

3-5 brand colors (with full scales), plus a neutral gray scale, plus 4 status colors (success, warning, error, info). This gives you ~60-80 individual color values.

How do I share my Tailwind palette with designers?

Export your color tokens to a JSON file and import into Figma or your design tool. PaletteAI's JSON export format works with most design token plugins.

Build Your Tailwind Palette Now

Extract colors from any image, get Tailwind-ready CSS variables, and start building. PaletteAI makes it free and instant.

Open PaletteAI Color Extractor →