Nothing saved yet
Configure a base color and click "Generate" to start building your palette.
Overview
A free online tool that takes a single hex color code — typically your brand's primary — and produces a complete set of 11 shade variations (50 through 950) formatted specifically for Tailwind CSS. Instead of eyeballing tints and shades by hand, color science algorithms create a perceptually uniform scale that looks consistent across your entire UI.
Takes your brand's primary hex code and generates a complete 50–950 shade scale using color science algorithms — perceptually uniform, no muddy midtones.
Tailwind ships 22 built-in color families, but real projects need custom brand colors. A single hex in your config gives you one shade — this tool generates the full scale in seconds.
Export a tailwind.config.js snippet for v3, or a @theme CSS block with OKLCH values for v4 — ready to paste, zero reformatting.
Step-by-Step Guide
Paste any hex code (e.g., #6d5cff) into the color input or use the color picker. This becomes your 500-level shade — the primary anchor of your palette.
The tool instantly calculates 11 shades from 50 (lightest) to 950 (darkest), displayed as a visual color strip. Each shade shows its hex value and OKLCH equivalent.
Choose a semantic name for your color (e.g., brand, primary, indigo) that you'll use in your utility classes like bg-brand-500 or text-primary-700.
Toggle between Tailwind v3 config format (JavaScript object with hex values) and Tailwind v4 format (CSS @theme block with OKLCH values).
Click the copy button and paste the config snippet directly into your tailwind.config.js (v3) or your main CSS file (v4). Your new utility classes are immediately available.
Features
Enter one color and get all 11 Tailwind shade levels automatically generated. The algorithm maintains perceptual uniformity so each step feels visually consistent — no muddy midtones or washed-out extremes.
Outputs native OKLCH values ready to paste into a v4 @theme block — something most competing tools still don't support.
Produces a tailwind.config.js snippet that drops directly into your theme.extend.colors section. No reformatting needed.
See how every shade looks before you copy. The preview strip shows all 11 shades side by side to evaluate contrast, brightness progression, and palette harmony at a glance.
Name your palette anything — brand, accent, ocean. The output uses your name so classes read as bg-brand-500.
No server requests, no data storage, no tracking. The entire palette generation happens in your browser using JavaScript. Your color choices never leave your machine.
The shade algorithm is designed to produce a scale with sufficient contrast between adjacent steps, making it easier to build accessible interfaces that meet WCAG 2.1 AA guidelines.
Copy the full config snippet, an individual shade's hex value, or the OKLCH equivalent with a single click. No highlighting, no manual selection.
Use Cases
Your startup has a brand color specified in your design system. You need all 11 shades to build buttons (500), hover states (600), disabled states (300), backgrounds (50), and focus rings (400). Generate the entire scale from your brand hex and drop it into your config.
Tailwind v4 uses OKLCH instead of hex/RGB. If you have custom colors in your v3 config, you'll need OKLCH equivalents. This generator converts your brand hex into the exact OKLCH format that v4's @theme directive expects.
Freelancers and agencies regularly receive brand hex codes from clients. Rather than hacking lighter/darker variants together with opacity tricks, generate a proper shade scale that gives you full control over every element in the UI.
Dark mode requires inverted shade usage — backgrounds use 900–950 shades while text uses 50–200. Having a complete 11-shade scale ensures smooth light-to-dark mode transitions without custom overrides for every component.
Rapidly prototype multiple palette options — try 5 different primary hex values, compare the generated shade scales side by side, and settle on the one with the best contrast and harmony before writing a single line of code.
Shadcn/ui relies on CSS variables for theming and its default palette uses Tailwind colors. When customizing a shadcn/ui project with brand colors, you need complete shade scales to map onto the component variables.
Reference
Every Tailwind color palette consists of 11 shade levels. Each level serves a specific purpose in UI design. Here's how developers typically use each shade:
The lightest shades are used for page backgrounds, card surfaces, and table row alternation. bg-brand-50 creates subtle colored backgrounds without overwhelming the content. In dark mode, these roles are handled by 900–950 instead.
Mid-light shades work well for borders (border-brand-200), input outlines, dividers, and disabled button backgrounds. Visible enough for contrast while remaining subtle.
Placeholder text in inputs, secondary icons, and muted labels typically use the 400 shade. Visible enough to be readable but clearly secondary to the primary content.
The 500 shade is your base color — the hex you entered into the generator. Used for primary buttons (bg-brand-500), text links, active indicators, and anywhere your brand color needs to be most prominent.
Darker than the base, these shades handle interactive states. A primary button might use bg-brand-500 hover:bg-brand-600 for its transition, while focus rings use ring-brand-600 for accessibility feedback.
The darkest shades serve as high-contrast text colors on light backgrounds (text-brand-900) and background colors in dark mode. Shade 950 is nearly black and works well for primary headings and nav backgrounds.
Deep Dive
Tailwind CSS v4, released in early 2025, made a significant change to its color system: the entire default palette was migrated from RGB hex values to OKLCH (Oklab Cylindrical) notation. This wasn't a cosmetic change — it fundamentally improves how colors behave in your UI.
OKLCH stands for Oklab Lightness, Chroma, Hue — a perceptually uniform color space designed by Björn Ottosson in 2020. Equal changes in lightness values produce equal perceived brightness changes, so shade scales actually look evenly spaced.
OKLCH enables wider-gamut colors on modern displays (P3 and Rec.2020), produces more vibrant saturated hues that hex can't represent, and allows more predictable color manipulation. Tailwind's team described it as "more vivid where sRGB was limited."
In Tailwind v3, you defined colors in tailwind.config.js using hex values. In v4, you define them using the @theme CSS directive with OKLCH values in your main CSS file.
/* Tailwind v4 — add to your CSS file */
@import "tailwindcss";
@theme {
--color-brand-50: oklch(0.98 0.01 250);
--color-brand-100: oklch(0.95 0.03 250);
--color-brand-200: oklch(0.90 0.05 250);
--color-brand-300: oklch(0.82 0.08 250);
--color-brand-400: oklch(0.73 0.12 250);
--color-brand-500: oklch(0.63 0.17 250);
--color-brand-600: oklch(0.53 0.15 250);
--color-brand-700: oklch(0.43 0.12 250);
--color-brand-800: oklch(0.33 0.09 250);
--color-brand-900: oklch(0.23 0.06 250);
--color-brand-950: oklch(0.15 0.04 250);
}
/* Now use: bg-brand-500, text-brand-900, etc. */Our generator produces this exact format, saving you from manually calculating OKLCH values for each shade level.
Quick Reference
Copy the snippet for your Tailwind version and paste it directly — no additional configuration needed.
@import "tailwindcss";
@theme {
--color-brand-50: oklch(0.98 0.01 250);
--color-brand-100: oklch(0.95 0.03 250);
--color-brand-500: oklch(0.63 0.17 250);
--color-brand-900: oklch(0.23 0.06 250);
--color-brand-950: oklch(0.15 0.04 250);
}
/* Usage: bg-brand-500, text-brand-900, border-brand-200, ring-brand-400 */// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
brand: {
50: '#f5f3ff',
100: '#ede9fe',
200: '#ddd6fe',
300: '#c4b5fd',
400: '#a78bfa',
500: '#8b5cf6',
600: '#7c3aed',
700: '#6d28d9',
800: '#5b21b6',
900: '#4c1d95',
950: '#2e1065',
},
},
},
},
};
// Usage: bg-brand-500, text-brand-900, etc.<!-- Primary button -->
<button class="bg-brand-500 hover:bg-brand-600 text-white
px-4 py-2 rounded-lg">
Get Started
</button>
<!-- Card with brand accent -->
<div class="bg-brand-50 border border-brand-200 rounded-xl p-6">
<h3 class="text-brand-900 font-semibold">Feature Title</h3>
<p class="text-brand-700">Description using a darker shade.</p>
</div>FAQ
In Tailwind v4, add custom colors using the @theme directive in your CSS file: @theme { --color-brand-500: oklch(0.55 0.2 250); }. In Tailwind v3, extend the colors object in tailwind.config.js under theme.extend.colors. This generator creates the full config for both versions automatically.
OKLCH is a perceptually uniform color space that produces more consistent and vivid colors compared to hex or HSL. Tailwind CSS v4 switched its entire default palette from RGB to OKLCH to take advantage of wider-gamut displays and more predictable color manipulation. Our generator outputs OKLCH values compatible with Tailwind v4's @theme system.
Every Tailwind CSS color palette includes 11 shade levels: 50 (lightest), 100, 200, 300, 400, 500 (base), 600, 700, 800, 900, and 950 (darkest). The 500 level is typically your brand's primary color, and the other shades are generated algorithmically to ensure visual consistency.
Yes. The generator outputs both formats: a tailwind.config.js snippet with hex values for Tailwind v3, and a CSS @theme block with OKLCH values for Tailwind v4. Copy whichever format matches your project.
No. The entire palette generation happens client-side in your browser. No color data, hex codes, or configurations are transmitted to any server.
Start with your brand's primary hex color as the 500-level shade. The generator will create lighter shades (50–400) for backgrounds, surfaces, and hover states, and darker shades (600–950) for text, active states, and focus rings. For accessible contrast, ensure your text color has a lightness difference of at least 0.4 from your background in OKLCH terms.
Extending (using theme.extend.colors in v3, or just adding new @themevariables in v4) keeps all of Tailwind's built-in colors and adds your custom palette alongside them. Replacing (using theme.colors in v3, or --disable-default-colors in v4) removes all defaults — useful for strict design systems where you want to limit the available palette.
An accessible palette needs sufficient contrast between text and background colors. Use lighter shades (50–200) for backgrounds and darker shades (700–950) for text in light mode, and reverse this for dark mode. WCAG 2.1 AA requires a minimum contrast ratio of 4.5:1 for body text. Our generator produces perceptually uniform shade scales that naturally maintain good contrast across the range.
More workbench essentials to speed up your build.
Live preview of shadcn/ui components with instant copy-paste code. Browse rendered components and grab snippets.
Select your stack and instantly get a production-ready folder structure. Copy the entire scaffold in one click.
Pick your tech stack and get a complete, commented .env boilerplate file. Never forget an environment variable.
Complete SaaS foundation with auth, Stripe billing, team management, admin dashboard, and RBAC. Launch in days.
From specialized code generators to full-stack internal dashboards — we build tools that make your team 10x more productive.