अवधारणा और ज्ञान केंद्र
Tailwind CSS रंग पैलेट और शेड्स स्केल जनरेटर (50-950)
Tailwind CSS रंग पैलेट और शेड्स स्केल जनरेटर (50-950)
यह टूल 100% आपके ब्राउज़र में सुरक्षित रूप से चलता है। आपका कोड, टोकन और संवेदनशील डेटा कभी भी बाहरी सर्वर पर अपलोड नहीं होता।
मूल वास्तुकला और गणितीय सूत्र
Luminance Scale = Lerp(Base Color, White [50]) ➔ Base Color [500] ➔ Lerp(Base Color, Black [950])
The generator isolates the primary hue and mathematically scales the lightness channel up for background tints (50 to 400) and down for text shades (600 to 950).
सर्वोत्तम अभ्यास और आवश्यक दिशानिर्देश
- Lock the 500 Shade to Your Brand: In Tailwind, the 500 shade is traditionally the vibrant, primary brand color used for primary buttons and active states. Build the rest of the scale symmetrically around it.
- Use 50 and 900 for Backgrounds: The absolute lightest shades (50 and 100) are explicitly designed for massive background panels, while the darkest (900 and 950) are designed for highly legible typography.
- Export to Tailwind Config: Once generated, copy the raw JavaScript object directly into the `theme.extend.colors` block of your `tailwind.config.js` file to instantly compile the utility classes.
अक्सर पूछे जाने वाले प्रश्न (FAQ)
Why do the dark shades look muddy?
If you scale the lightness down using pure black, vibrant colors (like yellow or cyan) will turn into a muddy olive green. Advanced generators shift the hue slightly towards blue or purple in the darker shades to maintain perceived vibrancy.
Can I use RGB instead of HEX?
Tailwind natively supports Hex, RGB, and HSL. However, if you want to use Tailwind's built in background opacity utilities (like `bg-blue-500/50`), you must configure the colors using raw RGB variables.
How many colors should a UI have?
A professional dashboard typically requires one Primary scale (Brand), one Neutral scale (Grays/Text), and four Semantic scales (Success, Warning, Danger, Info).