Generate custom Tailwind CSS colors from 50 to 950, preview them in real UI, check contrast, and export production-ready @theme, CSS variables, or Tailwind v3 config — free, with no signup.
@theme {
--color-brand-50: oklch(...);
--color-brand-500: oklch(...);
--color-brand-950: oklch(...);
}Start with a brand color, HEX value, color wheel selection, or screen sample. The Tailwind color generator expands your base color into an 11-step scale from 50 to 950, giving you lighter colors for surfaces and backgrounds, mid-range colors for primary UI elements, and darker shades for text, hover states, and dark interfaces.
Tailwind CSS colors use a numbered shade system from 50 to 950. Lower numbers are lighter, while higher numbers become progressively darker. A complete Tailwind color palette contains 11 shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, and 950.
Use lighter shades for backgrounds and subtle surfaces, middle shades for brand colors and interactive elements, and darker shades for text, active states, and dark-mode interfaces.
| Shade range | Common UI use |
|---|---|
| 50–100 | Backgrounds and subtle surfaces |
| 200–300 | Borders, dividers, and disabled UI |
| 400–500 | Icons, brand accents, and primary actions |
| 600–700 | Hover, active, and focus states |
| 800–950 | Text, headings, and dark UI surfaces |
Move from generated colors to implementation without rewriting tokens by hand. Export your palette for Tailwind CSS v4, Tailwind CSS v3, or framework-independent CSS variables.
@theme {
--color-brand-50: oklch(...);
--color-brand-500: oklch(...);
--color-brand-950: oklch(...);
}
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'brand': {
50: '#fdf2f8',
500: '#ec4899',
950: '#500724',
},
},
},
},
};
:root {
--color-brand-50: #fdf2f8;
--color-brand-500: #ec4899;
--color-brand-950: #500724;
}
Tailwind CSS v4 uses a CSS-first configuration model, so custom design tokens can be defined directly in CSS with the @theme directive. This makes generated colors easier to move into modern Tailwind projects without relying only on a JavaScript config file.
The tool also exposes OKLCH alongside familiar formats such as HEX, RGB, and HSL. OKLCH is useful for modern color systems because it represents lightness, chroma, and hue in a perceptual color space and fits naturally into current Tailwind workflows.
@import "tailwindcss";
@theme {
--color-brand-50: oklch(...);
--color-brand-500: oklch(...);
--color-brand-950: oklch(...);
}
Generated shades are more useful when you can map them to real interface states. Use lighter tones for surfaces, middle shades for primary actions, and darker shades for readable text and dark-mode components.
bg-brand-500 hover:bg-brand-600 text-white
bg-brand-50 border-brand-200 text-brand-900
bg-brand-950 text-brand-100
Choose a starting color visually, paste a HEX value, or sample a visible pixel from your screen. Every change immediately updates the custom Tailwind color scale, so the picker supports the generation workflow without becoming the page's main focus.
Click the Eyedropper button and pick any color from anywhere on your screen — other browser tabs, your Figma designs, reference images, anything visible. The picked color instantly feeds into the Tailwind CSS scale generator.
The Color Information panel updates as you pick, giving you familiar web formats plus modern color values for Tailwind workflows. Click any row to copy the value to your clipboard.
Color name detection maps your picked color to the closest named CSS color or Pantone-like name from a curated database of 2000+ color names.
A useful Tailwind color scale needs to work in real interfaces, not only look balanced as a row of swatches. Compare foreground and background combinations, review the contrast ratio, and identify shades that work better for normal text, large text, buttons, and UI surfaces.
These screenshots use the actual app interface, showing the full path from selecting one base color to previewing, validating, and exporting a complete Tailwind-ready color system.
Start with the wheel, the eyedropper, or manual HEX input. The app immediately shows every key color format, a live contrast checker, tints and shades, and palette-slot assignment for broader workflows.
See how your Tailwind colors behave before adding them to production. Preview lighter shades on surfaces, brand colors on buttons and accents, and darker shades across text, cards, dashboards, and interface states.
Once the base hue is chosen, the tool expands it into shades 50 through 950, compares the generated family with the closest official Tailwind palette, and exposes one-click export actions for CSS and config output.
Use this Tailwind color generator when you need more than a single HEX value. It connects color selection, accessible shade building, UI preview, and implementation so designers and developers can work from one source color.
Common questions about Tailwind CSS colors, 50–950 shades, v4 @theme exports, v3 config, OKLCH, and accessibility.
Choose a base HEX color, use the wheel, or sample a screen color with the EyeDropper. The tool expands that color into a complete Tailwind-style 50 to 950 scale for interfaces, design systems, and front-end projects.
Export the generated colors as Tailwind CSS v4 theme variables and place them inside an @theme block in your CSS. Your custom color tokens can then be used through Tailwind utility classes.
Yes. You can also copy a ready-to-paste tailwind.config.js color object for Tailwind CSS v3 projects, alongside CSS variables for framework-independent use.
Tailwind color families use 11 numbered shades from 50 to 950. Lower numbers are lighter and work well for backgrounds and subtle surfaces, while higher numbers are darker and are useful for text, hover states, and dark interfaces.
OKLCH is a perceptual color format used by modern Tailwind CSS palettes. The tool shows OKLCH alongside familiar formats such as HEX, RGB, and HSL so colors can move into current Tailwind workflows more easily.
Use the built-in contrast checker to compare foreground and background combinations, review the contrast ratio, and select shades that work better for normal text, large text, buttons, and UI surfaces.
Start with any HEX color and generate a complete 50–950 Tailwind CSS scale with accessibility checks and ready-to-use export options. Free, no login.
Generate My Tailwind Palette