टिंट और शेड
Tints and Shades Generator किसी भी base color के हल्के tints (सफ़ेद मिलाकर) और गहरे shades (काला मिलाकर) 5, 10 या 20 steps में बनाता है, CSS variable आउटपुट के साथ।
इस टूल के बारे में
Tints and Shades Generator किसी भी base color के हल्के tints (सफ़ेद मिलाकर) और गहरे shades (काला मिलाकर) 5, 10 या 20 steps में बनाता है, CSS variable आउटपुट के साथ।
इस्तेमाल कैसे करें
- एक base color चुनें।
- 5, 10 या 20 steps चुनें।
- किसी भी swatch की hex value कॉपी करने के लिए उस पर क्लिक करें।
- पूरा स्केल export करने के लिए Copy as CSS Variables पर क्लिक करें।
जानने योग्य बातें
- tint वह रंग है जिसमें सफ़ेद मिलाया गया हो; shade वह रंग है जिसमें काला मिलाया गया हो।
- generator बराबर RGB steps में मिलाता है, इसलिए हर step रंग को बराबर मात्रा में बदलता है।
- Tailwind जैसे design systems हर brand color के tints और shades से बना 50–900 स्केल इस्तेमाल करते हैं।
- स्केल से लिए गए टेक्स्ट रंगों का contrast ज़रूर जाँचें, क्योंकि बीच के steps अक्सर सफ़ेद पर WCAG AA में फ़ेल होते हैं।
पूरी तरह आपके ब्राउज़र में चलता है — आप जो भी डालते हैं, वह न अपलोड होता है न सेव।
अक्सर पूछे जाने वाले सवाल
tint और shade में क्या फ़र्क है?
tint सफ़ेद मिलाकर रंग को हल्का करता है; shade काला मिलाकर उसे गहरा करता है। tone में ग्रे मिलाया जाता है।
design system के एक रंग में कितने shades होने चाहिए?
लगभग 10 steps आम हैं, जैसे Tailwind में 50, 100 … 900। इससे backgrounds, borders, टेक्स्ट और hover states के लिए पर्याप्त रेंज मिल जाती है।
CSS में स्केल कैसे इस्तेमाल करें?
स्केल को custom properties के रूप में कॉपी करें और var(--color-name) से इस्तेमाल करें, जैसे backgrounds, borders या hover states पर।
कुछ tints फीके क्यों लगते हैं?
सफ़ेद मिलाने से lightness बढ़ने के साथ saturation भी घटती है। ज़्यादा चटख हल्के रूपों के लिए HSL में saturation अलग से एडजस्ट करें।