Web Utilitiesरंग टिंट और शेड जनरेटर
किसी भी आधार रंग से टिंट, शेड और टोन बनाएं। Tailwind-स्टाइल 50–950 कलर स्केल बनाएं, CSS वेरिएबल कॉपी करें और पूर्ण डिज़ाइन सिस्टम पैलेट तुरंत तैयार करें।
hsl(217, 91%, 60%)
210
आधार रंग
#3B82F6
CSS कस्टम प्रॉपर्टी
:root {
--tint-1: #DFEAFD;
--tint-2: #BED6FC;
--tint-3: #9EC1FA;
--tint-4: #7DADF9;
--tint-5: #5D98F7;
--color-base: #3B82F6;
--shade-1: #0B64F4;
--shade-2: #0950C3;
--shade-3: #073C92;
--shade-4: #052861;
--shade-5: #021431;
/* Tones */
--tone-1: #4C87E6;
--tone-2: #5B8BD7;
--tone-3: #6B8EC7;
--tone-4: #7A92B8;
--tone-5: #8A95A8;
}टिंट
#DFEAFD
#BED6FC
#9EC1FA
#7DADF9
#5D98F7
शेड
Base#3B82F6
#0B64F4
#0950C3
#073C92
#052861
#021431
टोन
#4C87E6
#5B8BD7
#6B8EC7
#7A92B8
#8A95A8
HEX मान कॉपी करने के लिए किसी भी स्वॉच पर क्लिक करें
संबंधित टूल
रंग टिंट और शेड जनरेटर के बारे में
यह कैसे काम करता है
- कलर पिकर या HEX इनपुट का उपयोग करके कोई भी आधार रंग दर्ज या चुनें।
- उत्पन्न करने के लिए स्टेप्स की संख्या चुनें।
- क्लासिक मोड और Tailwind मोड (50–950 स्टॉप) के बीच स्विच करें।
- HEX मान कॉपी करने के लिए किसी भी स्वॉच पर क्लिक करें।
- पूरी पैलेट CSS प्रॉपर्टी के रूप में प्राप्त करने के लिए सभी CSS कॉपी करें का उपयोग करें।
सामान्य उपयोग के मामले
- UI फ्रेमवर्क के लिए डिज़ाइन सिस्टम कलर पैलेट बनाना।
- कस्टम थीम के लिए Tailwind CSS-संगत कलर स्केल उत्पन्न करना।
- ब्रांड पहचान बनाए रखने वाले सुलभ कलर रैंप बनाना।
- सभी चमक स्तरों पर ब्रांड रंग का अन्वेषण करना।
- Figma या Storybook में डिज़ाइन हैंडऑफ के लिए कलर टोकन बनाना।
अक्सर पूछे जाने वाले प्रश्न
रंग टिंट क्या है?
टिंट आधार रंग में सफेद मिलाकर बनाया जाता है, जिससे वह हल्का और कम संतृप्त होता है। टिंट मूल ह्यू बनाए रखते हैं लेकिन चमक बढ़ाते हैं, जिससे पेस्टल जैसी विविधताएं बनती हैं जो पृष्ठभूमि और UI एक्सेंट के लिए आदर्श हैं।
रंग शेड क्या है?
शेड आधार रंग में काला मिलाकर बनाया जाता है, जिससे वह गहरा होता है। शेड मूल ह्यू बनाए रखते हैं और चमक कम करते हैं, आमतौर पर टेक्स्ट रंग, बॉर्डर और प्रेस्ड स्टेट के लिए उपयोग किए जाते हैं।
रंग टोन क्या है?
टोन आधार रंग में ग्रे मिलाकर बनाया जाता है, जो चमक को महत्वपूर्ण रूप से बदले बिना संतृप्ति कम करता है। टोन अधिक म्यूट रंग विविधताएं देते हैं जो तटस्थ UI घटकों के लिए उपयुक्त हैं।
Tailwind-स्टाइल पैलेट मोड क्या है?
Tailwind मोड 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 और 950 लेबल वाले 11 स्टॉप उत्पन्न करता है, जो Tailwind CSS के नामकरण परंपरा को दर्शाता है और tailwind.config.js के लिए कस्टम कलर फैमिली बनाना आसान बनाता है।
उत्पन्न CSS वेरिएबल कैसे उपयोग करें?
टूल प्रत्येक उत्पन्न रंग के लिए CSS कस्टम प्रॉपर्टी के साथ एक :root { } ब्लॉक आउटपुट करता है। इन्हें अपनी ग्लोबल स्टाइलशीट में कॉपी करें और var(--tint-1), var(--shade-3), var(--color-500) आदि के माध्यम से रंगों का संदर्भ लें।
मैं कितने स्टेप्स उत्पन्न कर सकता हूं?
क्लासिक मोड में आप टिंट और शेड के लिए 2 से 10 स्टेप्स चुन सकते हैं। Tailwind मोड हमेशा 11 स्टॉप का निश्चित स्केल उत्पन्न करता है।
क्या मैं व्यक्तिगत रंग मान कॉपी कर सकता हूं?
हां। किसी भी कलर स्वॉच पर क्लिक करके तुरंत उसका HEX मान क्लिपबोर्ड में कॉपी करें। सभी CSS के रूप में कॉपी करें बटन का उपयोग करके पूरी पैलेट एक क्लिक में प्राप्त करें।
टूल कौन से रंग प्रारूप समर्थन करता है?
आप टेक्स्ट फील्ड में कोई भी 6-अंकीय HEX रंग (जैसे #3B82F6) दर्ज कर सकते हैं, या ब्राउज़र के नेटिव कलर पिकर का उपयोग कर सकते हैं। सभी आउटपुट मान HEX प्रारूप में हैं।
क्या उत्पन्न पैलेट सुलभ है?
टूल अवधारणात्मक रूप से स्थानिक रंग उत्पन्न करता है, लेकिन WCAG अनुपालन इस पर निर्भर करता है कि आप टेक्स्ट और पृष्ठभूमि रंगों को कैसे जोड़ते हैं। UI कलर एक्सेसिबिलिटी चेकर का उपयोग करें।
यह टूल डिज़ाइन सिस्टम के लिए कैसे उपयोगी है?
डिज़ाइन सिस्टम को आमतौर पर प्रत्येक ब्रांड रंग के लिए पूर्ण कलर स्केल की आवश्यकता होती है। यह टूल उस प्रक्रिया को स्वचालित करता है — एक बार अपना ब्रांड रंग दर्ज करें और Figma, Style Dictionary या tailwind.config.js के लिए तैयार स्केल प्राप्त करें।
क्या यह टूल मेरे रंग संग्रहीत करता है?
नहीं। सभी रंग गणनाएं JavaScript का उपयोग करके आपके ब्राउज़र में पूरी तरह से होती हैं। कोई डेटा सर्वर को नहीं भेजा जाता और सत्रों के बीच कुछ भी संग्रहीत नहीं किया जाता।
टिंट/शेड और ग्रेडिएंट में क्या अंतर है?
ग्रेडिएंट एक छवि या CSS प्रॉपर्टी में दो या अधिक रंगों के बीच एक चिकना दृश्य संक्रमण है। टिंट और शेड एकल ह्यू परिवार के भीतर असतत, नामित रंग स्टॉप हैं जो डिज़ाइन टोकन में व्यक्तिगत रंग मान के रूप में उपयोग किए जाते हैं।