HEX रंग चयन: HEX, RGB, HSL, OKLCH, हल्के और गहरे शेड | We.Inc
मुफ़्त HEX रंग चयन टूल: रंग चुनें या पेस्ट करें और HEX, RGB, HSL, OKLCH मान, हल्के और गहरे शेड तथा सफ़ेद और काले के साथ कंट्रास्ट स्कोर पाएं।
HEX रंग चयन टूल
डिज़ाइन और कोड के लिए रंग चुनें या HEX, RGB अथवा HSL मान पेस्ट करें; HEX, RGB, HSL और OKLCH फ़ॉर्मैट पाएं। हल्के और गहरे शेड देखें और जांचें कि सफ़ेद या काले टेक्स्ट पर कितना पढ़ा जा सकता है।
रंग चयन टूल इस्तेमाल करें या #4F98FB, rgb(79, 152, 251) अथवा hsl(215, 95%, 65%) जैसा मान लिखें।
एक क्लिक में कोई भी फ़ॉर्मैट कॉपी करें। OKLCH आधुनिक CSS फ़ॉर्मैट है, जो अलग-अलग रंगों में हल्केपन को एक जैसा रखता है।
किसी हल्के या गहरे शेड पर क्लिक करके उसे मौजूदा रंग बनाएं।
कंट्रास्ट अनुपात देखकर तय करें कि इस रंग पर सफ़ेद या काला टेक्स्ट बेहतर रहेगा।
बटन के लेबल और रंग के बीच कम से कम 4.5:1 कंट्रास्ट रखें।
एक ब्रांड रंग से पैलेट बनाएं: बैकग्राउंड के लिए हल्का शेड, बटन के लिए मूल रंग और होवर स्थिति तथा टेक्स्ट के लिए गहरा शेड।
हर स्क्रीन अलग दिखाती है। अपने ब्रांड रंग को लैपटॉप के साथ फ़ोन पर भी जांचें।
अक्सर पूछे जाने वाले सवाल
HEX रंग कोड क्या होता है?
स्क्रीन के रंग का छह अंकों वाला कोड, जिसमें # के बाद लाल, हरे और नीले रंग के लिए हेक्साडेसिमल अंकों के तीन जोड़े होते हैं। #FF0000 शुद्ध लाल, #000000 काला और #FFFFFF सफ़ेद है।
HEX, RGB और HSL में क्या अंतर है?
ये एक ही रंगों को अलग तरीकों से बताते हैं। HEX और RGB लाल, हरे और नीले रंग की मात्रा देते हैं। HSL रंगत (रंग चक्र का कोण), संतृप्ति और हल्कापन बताता है, जिसे हाथ से बदलना आसान है।
OKLCH क्या है और क्या मुझे इसका उपयोग करना चाहिए?
OKLCH नया CSS रंग फ़ॉर्मैट है, जो लोगों की रंग देखने की अनुभूति पर आधारित है। समान L मान वाले दो रंग बराबर हल्के दिखते हैं, जिससे एकसमान पैलेट बनाना आसान होता है। सभी मौजूदा प्रमुख ब्राउज़र इसे समर्थन देते हैं।
कंट्रास्ट की गणना कैसे होती है?
WCAG 2 फ़ॉर्मूले से: हल्के रंग की सापेक्ष चमक में 0.05 जोड़कर उसे गहरे रंग की सापेक्ष चमक में 0.05 जोड़ने से भाग देते हैं। दो रंगों की पूरी जांच के लिए We.Inc का रंग कंट्रास्ट चेकर इस्तेमाल करें।
वेबसाइट पर काम आने वाला ब्रांड रंग चुनना
ब्रांड रंग को कई काम करने होते हैं: बटन पर साफ़ दिखे, सफ़ेद टेक्स्ट के पीछे पढ़ने योग्य रहे और पूरे पेज पर आंखों को न थकाए। मध्यम नीले, हरे और गहरे लाल रंग आमतौर पर ये तीनों काम कर लेते हैं। बहुत हल्के रंग (पीला, हल्का गुलाबी) लोगो में अच्छे दिखते हैं, पर बटन के लिए कमज़ोर हैं क्योंकि उनमें बदलाव किए बिना सफ़ेद या काला टेक्स्ट ठीक से नहीं पढ़ा जाता।
कंट्रास्ट पैनल यह तुरंत दिखाता है। सफ़ेद टेक्स्ट का स्कोर 4.5:1 से कम हो तो काला टेक्स्ट इस्तेमाल करें या बटन के लिए पैमाने से गहरा शेड चुनें।
हल्के और गहरे शेड से सरल पैलेट
हल्के शेड में आपके रंग के साथ सफ़ेद और गहरे शेड में काला मिलाया जाता है। वेबसाइट के व्यावहारिक पैलेट में कुछ ही रंग चाहिए: सेक्शन बैकग्राउंड के लिए बहुत हल्का शेड, बटन और लिंक के लिए मुख्य रंग, और होवर स्थिति के लिए एक गहरा शेड। टेक्स्ट और बॉर्डर के लिए तटस्थ स्लेटी जोड़ें और आपका पूरा, एकसमान सेट तैयार है।
किसी खास टेक्स्ट और बैकग्राउंड की जोड़ी जांचने के लिए (जैसे हल्के रंग पर स्लेटी टेक्स्ट), रंग कंट्रास्ट चेकर इस्तेमाल करें। यह WCAG AA और AAA दोनों के स्कोर देता है।