एक रंग से टिंट्स और शेड्स की पूरी रेंज बनाएं — अपना डार्कन/लाइटन स्टेप और शेड काउंट चुनें, फिर कोई भी वैल्यू तुरंत कॉपी करें।

बेस कलर
स्टेप
%
प्रत्येक स्टेप पर प्रत्येक शेड कितना हल्का/गहरा होता है (1–25%)।
शेड काउंट
बेस कलर के प्रत्येक तरफ कितने टिंट्स और शेड्स जनरेट करने हैं।
ग्रेडिएंट
जनरेट किए शेड्स

एक बेस कलर, स्टेप प्रतिशत और काउंट चुनें — हर टिंट और शेड आपके ब्राउज़र में तुरंत कम्प्यूट होता है।


Color Shades Generator के बारे में

कलर शेड्स जनरेटर एक अकेले रंग को टिंट और शेड की एक पूरी रेंज में विस्तारित करता है। इसे एक बेस कलर दें और यह एक तरफ क्रमिक रूप से हल्के टिंट और दूसरी तरफ क्रमिक रूप से गहरे शेड बनाता है — आधुनिक डिज़ाइन सिस्टम में इस्तेमाल होने वाला क्लासिक 50-से-900 स्टाइल रैंप।

दो नियंत्रण आउटपुट को आकार देते हैं: स्टेप प्रतिशत तय करता है कि हर शेड कितना हल्का या गहरा होगा (1–25% प्रति चरण), और काउंट तय करता है कि बेस के हर तरफ कितने टिंट और शेड दिखेंगे, अधिकतम दस तक। एक ग्रेडिएंट स्ट्रिप पूरे रैंप का एक झलक-भर प्रीव्यू देती है।

जनरेशन आपके टाइप करते ही ब्राउज़र में तुरंत होता है — कुछ भी सर्वर पर नहीं भेजा जाता। किसी एक मान, पूरी सूची, या पूरे रैंप को CSS वेरिएबल्स के रूप में कॉपी करें, डिज़ाइन-टोकन फ़ाइल या Tailwind-शैली कलर स्केल में डालने के लिए तैयार।

Color Shades Generator का उपयोग कैसे करें

  1. पिकर से एक बेस कलर चुनें या एक मान टाइप करें; प्रेरणा के लिए "Random color" पर क्लिक करें।
  2. यह नियंत्रित करने के लिए स्टेप प्रतिशत सेट करें कि हर शेड कितनी तीव्रता से हल्का या गहरा होता है।
  3. यह तय करने के लिए शेड काउंट चुनें कि हर तरफ कितने टिंट और शेड दिखें।
  4. किसी स्वैच पर क्लिक करके उसे कॉपी करें, या पूरे रैंप के लिए "Copy all" और "Copy CSS variables" का उपयोग करें।

अक्सर पूछे जाने वाले प्रश्न

हां, पूरी तरह मुफ़्त। सभी टिंट और शेड आपके ब्राउज़र में लाइव गणना किए जाते हैं, इसलिए इसमें कोई लागत नहीं, कोई अकाउंट नहीं और आप कितने भी रैंप जनरेट करें, कोई सीमा नहीं है।

टिंट आपका बेस कलर सफेद की ओर मिलाया हुआ है (हल्का), जबकि शेड बेस को काले की ओर मिलाया हुआ है (गहरा)। जनरेटर दोनों दिशाओं को एक साथ बनाता है, आपके बेस कलर के आसपास "Tints (lighter)" और "Shades (darker)" लेबल के साथ।

प्रति साइड काउंट को 4 या 5 पर सेट करें ताकि आपको कुल नौ से ग्यारह स्वैच मिलें, बीच में आपके बेस के साथ। लगभग 8–10% का स्टेप आमतौर पर लोकप्रिय फ्रेमवर्क द्वारा उपयोग किए जाने वाले 50–900 स्केल जैसा स्पेसिंग देता है।

छोटे स्टेप (3–6%) सूक्ष्म hover और बॉर्डर विविधताएं देते हैं; मध्यम स्टेप (8–12%) पूर्ण डिज़ाइन-सिस्टम रैंप के लिए उपयुक्त हैं; बड़े स्टेप (15–25%) उच्च-कंट्रास्ट, पोस्टर जैसे सेट बनाते हैं। ग्रेडिएंट प्रीव्यू देखें — एक अच्छा रैंप बिना बैंडिंग के समान रूप से गहरा होना चाहिए।

हां। "Copy CSS variables" पूरे रैंप को नामित CSS कस्टम प्रॉपर्टीज़ के रूप में आउटपुट करता है, और "Copy all" आपको मानों की एक सादी सूची देता है जिसे आप SCSS मैप से लेकर JavaScript थीम ऑब्जेक्ट तक कहीं भी पेस्ट कर सकते हैं।

इसे साझा करें

लोकप्रिय खोजें
कलर शेड्स जनरेटर टिंट्स और शेड्स रंग हल्का और गहरा करें एक रंग के शेड्स कलर टिंट जनरेटर कलर शेड्स बनाएं
मदद चाहिए?
इस टूल में कोई समस्या मिली? हमारी टीम को बताएं।
समस्या की रिपोर्ट करें

इस मुफ़्त टूल को अपनी वेबसाइट पर जोड़ें — नीचे दिया गया कोड कॉपी और पेस्ट करें।