Color Palette Generator
Generate a complete 10-shade color palette from any base color in Tailwind CSS style.
50#f0f6fergb(240, 246, 254)hsl(217, 91%, 97%)
100#dde9fdrgb(221, 233, 253)hsl(217, 91%, 93%)
200#b6d1fcrgb(182, 209, 252)hsl(217, 91%, 85%)
300#7bacf9rgb(123, 172, 249)hsl(217, 91%, 73%)
400#3c83f6rgb(60, 131, 246)hsl(217, 91%, 60%)
500#3c83f6rgb(60, 131, 246)hsl(217, 91%, 60%)
600#0b60eargb(11, 96, 234)hsl(217, 91%, 48%)
700#094cb9rgb(9, 76, 185)hsl(217, 91%, 38%)
800#063888rgb(6, 56, 136)hsl(217, 91%, 28%)
900#042458rgb(4, 36, 88)hsl(217, 91%, 18%)
इस टूल के बारे में
कलर पैलेट एक्सट्रैक्टर किसी भी मूल रंग से Tailwind CSS, Material Design और समान फ्रेमवर्क द्वारा उपयोग किए जाने वाले 50-900 शेड अनुरूपताओं से मेल खाते हुए 10-चरण डिज़ाइन सिस्टम स्केल उत्पन्न करता है।
उत्पन्न स्केल में प्रत्येक स्वॉच अपने hex, RGB और HSL मान दिखाता है। प्रत्येक स्वॉच पर टेक्स्ट रंग luminance के आधार पर स्वचालित रूप से सफेद या गहरे रंग में समायोजित होता है।
कैसे उपयोग करें
- रंग चुनने वाले का उपयोग करके या hex मान टाइप करके मूल रंग चुनें।
- 10-चरण स्केल (50-900) तुरंत उत्पन्न होता है, जो पूर्ण चमक श्रेणी को कवर करता है।
- अपने डिज़ाइन सिस्टम या CSS वेरिएबल में रंग लागू करने के लिए hex, RGB या HSL मान उपयोग करें।
उपयोग के मामले
डिज़ाइन सिस्टम टीमें Tailwind config extensions या CSS custom properties के रूप में पूर्ण रंग स्केल बनाती हैं।
अक्सर पूछे जाने वाले प्रश्न
- यह स्केल अन्य टूल के "शेड्स" से कैसे अलग है? — यह टूल एक निश्चित 10-चरण स्केल (50, 100, 200, … 900) उत्पन्न करता है जो विशिष्ट चमक मानों पर एंकर की गई है।
- संतृप्ति बदलने से स्केल प्रभावित होती है? — मूल रंग की संतृप्ति सभी चरणों में बनी रहती है — केवल चमक बदलती है।
- क्या मैं इन रंगों को Tailwind CSS में सीधे उपयोग कर सकता हूं? — हां। प्रत्येक शेड स्तर से hex मान कॉपी करें और शेड नंबरों को कुंजी के रूप में tailwind.config.js में theme.extend.colors के तहत जोड़ें।