logo Toolmaxy
New

Tailwind CSS v4 Color Palette Generator

Generate professional OKLCH color palettes and CSS @theme blocks for Tailwind CSS v4.

This will be the prefix for your classes (e.g. bg-brand-500)

What is the Tailwind CSS v4 Palette Generator?

Our free Tailwind CSS v4 palette generator is a specialized utility designed to help developers transition to the new CSS-first configuration model introduced in Tailwind CSS v4. Unlike previous versions that relied on a JavaScript file, v4 uses the @theme directive directly in your CSS files.

This tool uses OKLCH color interpolation to generate perceptually uniform shades. This ensures that your brand colors maintain consistent visual weight across all brightness levels, from light backgrounds to deep shadows. It is the modern standard for accessible UI design and high-quality digital products.

How to Generate and Use Your v4 Palette

  1. Enter your brand color: Paste your primary hex code or use the color picker to find your starting point.
  2. Name your color: Choose a slug like "brand", "primary", or "accent" that will be used in your classes (e.g., `text-brand-600`).
  3. Review the shades: Inspect the generated 50-950 range. Each shade is calculated using OKLCH for maximum visual consistency.
  4. Copy to CSS: Click the Copy @theme Block button and paste the result into your `app.css` file.

Why OKLCH matters in v4

Tailwind CSS v4 has embraced OKLCH because it solves the "brightness mismatch" problem inherent in HSL and RGB. In HSL, blue at 50% lightness looks much darker than yellow at 50% lightness. OKLCH is designed around how the human eye actually perceives light, allowing you to create palettes that are perceptually uniform and significantly easier to make WCAG compliant.

Reference: Official Tailwind CSS v4 Theme Documentation

Frequently Asked Questions

How does Tailwind CSS v4 handle colors differently?

Tailwind v4 shifts to a CSS-first configuration using the @theme directive. It also promotes the use of OKLCH, a perceptually uniform color space that ensures consistent lightness across different hues, making it superior to HSL or RGB for UI design.

What is the @theme directive in Tailwind v4?

The @theme directive replaces the tailwind.config.js for most configuration needs. You define your theme variables (like colors, spacing, and fonts) directly in your CSS file using standard CSS variables syntax within the @theme block.

Why should I use OKLCH for my Tailwind palette?

OKLCH allows for more predictable color adjustments. Unlike HSL, where "50% lightness" can look very different between yellow and blue, OKLCH L (Lightness) is perceptually uniform. This makes it easier to create accessible palettes with consistent contrast.

How do I add the generated palette to my project?

Simply copy the generated @theme CSS block and paste it into your main CSS file (e.g., app.css). Tailwind v4 will automatically detect these variables and make them available as utility classes like bg-brand-500.

Is this tool free and private?

Yes, the Tailwind v4 Palette Generator is completely free and runs entirely in your browser. Your color data is never sent to any server.

More Developer Tools

View all