Tailwind Color Generator
Generate Tailwind CSS 50–950 11-shade palette and configuration code from a single Hex color
Features
Auto-generate 11 shades from one color
Set your input color as 500, and calculate tints and shades from 50 to 950
Support both v3 and v4 formats
Switch between config and @theme syntax using tabs
Copy Hex code per shade
Copy individual color codes one at a time using the button for each swatch
Palette updates in real-time
No need to click a button—compare colors as you adjust and experiment
How to Use
Enter the base color Hex code
Input a Hex code, or click the color swatch on the left and select a color from the color picker
Enter a color name if needed
Input the color name in lowercase English for use in your code. If left blank, 'primary' is used
Review the 11-shade color swatches
Check the color swatches and Hex codes for 50–950, and copy each color one by one using the swatch copy button
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 tints and shades
Generate all tints and shades for button hover states and backgrounds from a single brand color
Add colors not in the standard palette
Add project-specific colors missing from Tailwind's standard palette to your config file in 11 shades
Create v4 @theme configuration
Generate Tailwind v4 CSS variables from your site's main color all at once
Prepare design comp for implementation
Generate 11-shade codes from the comp's specified color, and transfer the codes to your design tool as well
Knowledge Base
What Tailwind's 50–950 numbers represent
Tailwind CSS colors use 11 numeric levels from 50 (lightest) to 950 (darkest) to represent brightness, with 500 as the base shade of the color. These numbers are used at the end of class names like 'bg-primary-500' or 'text-primary-700'.
- 50–300 range：The 50–300 range consists of light colors commonly used for backgrounds and light fills, with enough contrast to remain readable when overlaid with dark text.
- 600–950 range：The 600–950 range consists of dark colors commonly used for button hover states and heading text, with enough contrast to be clearly visible over white backgrounds.
Difference in color definition between v3 and v4
Tailwind CSS v3 defines colors in JavaScript within tailwind.config.js, while v4 defines colors as CSS variables inside @theme in CSS files. Regardless of which syntax you use, the colors you define work with the same class names like 'bg-primary-500'.
- v3 syntax：The v3 syntax uses nested format in theme.extend.colors, such as 'primary: { 500: '#3B82F6' }', with color names and levels nested together.
- v4 syntax：The v4 syntax uses variable names inside @theme that connect the color name and level with hyphens, such as '--color-primary-500: #3B82F6;'.
Safety and Privacy
Tapos sa browser
Ang inilagay na data ay pinoproseso lamang sa loob ng iyong browser at hindi ipinapadala sa labas.
Proseso lamang sa loob ng browser
Palette calculation and code generation ay ginagawa nang lubusan sa loob ng iyong browser, at ang mga input data ay hindi ipinapadala sa server.
Ang komunikasyon ay naka-encrypt gamit ang HTTPS
Ang pagkarga ng pahina ay naka-encrypt din ng TLS, at ang nilalaman ay hindi mababasa ng third party.
Walang pagpapadala sa third party
Ang mga input content ay hindi ipinapadala sa mga external na serbisyo tulad ng advertising network o tracker.
Walang awtomatikong pagpapanatili ng resulta
Input color and color name at input suggestion ay hindi iniimbak sa server.
Sundan ang RAKKOTOOLS sa Google Search
187 kapaki-pakinabang na tool na mas madaling mahanap mula sa Google Search at AI Search!
- Makikita sa paghahanap
- Lalabas rin sa AI Search
- Tuklasin ang mga bagong tool
Impormasyon ng update
- update #318
Naidagdag ang Tailwind color generation, lumikha ng 11 na antas ng kulay at setting code mula sa 1 kulay