Tailwind Color Generator
Generate an 11-shade palette (50–950) and configuration code for Tailwind CSS from a single Hex color code
Features
Auto-generate 11 shades from one color
Calculate tints and shades from 50 to 950, with the input color as the base (500)
Support both v3 and v4 formats
Switch between config and @theme syntax with tabs
Copy Hex per shade
Copy color codes one at a time with buttons on each swatch
Update palette as you type
Preview and compare colors instantly without clicking a run button
How to Use
Enter the base color Hex
Enter a Hex code or click the color swatch to choose a color with the color picker
Enter a color name (optional)
Type a color name in lowercase letters. If left blank, 'primary' is used
Review the 11-shade palette
Check the swatches and Hex codes from 50 to 950, and copy one color at a time with the swatch buttons
Choose output format and copy
Select v3 or v4 and click 'Copy Code' to paste into your tailwind.config.js or CSS file
Use Cases
Create brand color variations
Generate consistent tints and shades from a single brand color for hover states and backgrounds
Add non-standard palette colors
Add project-specific colors not in Tailwind's standard palette as 11 shades in your config
Create Tailwind v4 @theme configuration
Generate CSS variables for Tailwind v4 from your site's primary color
Prepare design comps for development
Generate 11-shade codes from a design comp's specified color and transfer to design tools
Knowledge Base
What the 50–950 range means in Tailwind
Tailwind CSS uses 11 numeric steps (50–950) to represent lightness, where 50 is the lightest, 950 is the darkest, and 500 is the base color. Use these numbers at the end of class names like 'bg-primary-500' or 'text-primary-700'.
- 50–300 range：The 50–300 range contains light colors typically used for backgrounds and light fills, which remain readable with dark text on top.
- 600–950 range：The 600–950 range contains dark colors typically used for button hover states and heading text, which remain clearly visible on light backgrounds.
Differences between v3 and v4 color definitions
Tailwind CSS v3 defines colors in JavaScript within tailwind.config.js, while v4 defines them as CSS variables in @theme within CSS files. Both approaches use the same class names like 'bg-primary-500'.
- v3 syntax：v3 syntax uses nested color names and steps in theme.extend.colors, like 'primary: { 500: "#3B82F6" }'.
- v4 syntax：v4 syntax uses hyphen-separated variable names inside @theme, like '--color-primary-500: #3B82F6;'.
Safety and Privacy
Runs entirely in your browser
Your input data is processed only within your browser and is never sent externally.
Processing only in your browser
Palette calculations and code generation is processed entirely within your browser, and input data is not sent to any server.
Communications encrypted with HTTPS
Page loading is also encrypted by TLS, and content cannot be read by third parties.
No transmission to third parties
Input content is not sent to external services such as ad networks or trackers.
No automatic saving of results
Input colors and color names and input suggestions are not stored on the server.
Follow RAKKOTOOLS on Google Search
187 useful tools become easier to find from Google Search and AI Search!
- Found in search
- Also shown in AI Search
- Discover new tools
Updates
- update #318
Tailwind color generator added: generate 11 color shades and configuration code from a single color