कलर पिकर और पैलेट जनरेटर

स्क्रीन पर दिखने वाले हर रंग को तीन अलग तरीक़ों से बताया जा सकता है, और यह टूल तीनों को एक-दूसरे से मिलाकर रखता है: HEX वह छोटा रूप है जो CSS और डिज़ाइन टूल्स में चलता है, RGB बताता है कि लाल, हरी और नीली रोशनी कितनी-कितनी मिलकर रंग बनाती हैं, और HSL — ह्यू, सैचुरेशन, लाइटनेस — रंग को उस तरह बताता है जिस तरह इंसान सचमुच सोचता है: वह कौन-सा शेड है, कितना गहरा-चटख है, और कितना हल्का या गहरा है। नेटिव कलर स्वैच को खींचें, HEX कोड टाइप करें, या R/G/B या H/S/L के किसी भी फ़ील्ड को सीधे बदलें, और बाक़ी सारे फ़ील्ड तुरंत अपडेट हो जाते हैं। इस तरह आप जिस भी तरीक़े से रंग के बारे में सोचने के आदी हैं, बिना खुद हिसाब लगाए उसी में काम कर सकते हैं।

कलर व्हील छह क्लासिक हार्मनी नियमों का आधार है, और ये सभी आपके चुने किसी भी बेस रंग से अपने-आप बन जाते हैं। कॉम्प्लिमेंट्री एक रंग को उसके ठीक सामने वाले रंग से जोड़ती है, जिससे सबसे ज़्यादा कंट्रास्ट मिलता है; एनालॉगस व्हील पर पास के रंग चुनती है, जिससे शांत और एकसार लुक बनता है; ट्रायडिक और टेट्राडिक तीन या चार रंगों को व्हील पर बराबर दूरी पर रखते हैं, जिससे पैलेट जीवंत होते हुए भी संतुलित रहता है; स्प्लिट-कॉम्प्लिमेंट्री सामने वाले रंग की जगह उसके दोनों बगल के रंग लेकर कॉम्प्लिमेंट्री जोड़ी को नरम कर देती है; और मोनोक्रोमैटिक एक ही ह्यू पर टिकी रहती है और सिर्फ़ लाइटनेस बदलती है — जो अक्सर उस UI के लिए सबसे सुरक्षित चुनाव होता है जिसे एक ही ब्रांड रंग के कई शेड चाहिए।

हर अच्छा पैलेट कलर थ्योरी से शुरू नहीं होता — कभी-कभी आप बस देखना चाहते हैं कि क्या निकलकर आता है। रैंडम पैलेट जनरेटर (स्पेसबार दबाएँ, या Generate पर क्लिक करें) एक साथ पाँच रंग बनाता है, जिनकी ह्यू और लाइटनेस इस तरह रखी जाती है कि नतीजा फीका या बहुत ज़्यादा पेस्टल न लगे। जिस स्वैच को रखना हो उसके लॉक आइकन पर क्लिक करें, फिर दोबारा जनरेट करें: सिर्फ़ अनलॉक रंग बदलते हैं, इसलिए आप Coolors जैसे टूल्स की तरह पैलेट को धीरे-धीरे बना सकते हैं। किसी भी स्वैच पर क्लिक करके उसका HEX कोड कॉपी करें, या पैलेट के नीचे के बटनों से पूरा सेट CSS कस्टम प्रॉपर्टी, SCSS वेरिएबल, Tailwind कॉन्फ़िग स्निपेट या JSON ऐरे के रूप में कॉपी करें, या Illustrator और Photoshop के लिए Adobe .ase स्वैच फ़ाइल एक्सपोर्ट करें। आप किसी भी इमेज से पैलेट भी निकाल सकते हैं (लोकल प्रोसेसिंग, कभी अपलोड नहीं) और पसंद आए पैलेट बाद के लिए अपने ब्राउज़र में सहेज सकते हैं।

अच्छा दिखने वाला रंग चुनना और इस्तेमाल लायक रंग चुनना एक बात नहीं है — जिस टेक्स्ट का रंग अपने बैकग्राउंड की लाइटनेस के बहुत क़रीब हो, वह पढ़ने में नहीं आता, और Web Content Accessibility Guidelines (WCAG) इसके लिए तय सीमाएँ देती हैं: सामान्य टेक्स्ट के लिए AA स्तर पास करने को कम से कम 4.5:1 का कंट्रास्ट रेशियो, और ज़्यादा सख़्त AAA स्तर के लिए 7:1। कंट्रास्ट चेकर आपके चुने रंग और सफ़ेद व काले टेक्स्ट, दोनों के बीच का सटीक रेशियो उसी रिलेटिव-ल्यूमिनेंस फ़ॉर्मूले से निकालता है जो WCAG स्पेसिफ़िकेशन में दिया गया है, और बताता है कि हर जोड़ी पास होती है या नहीं। इस तरह कम कंट्रास्ट वाला बटन या हेडिंग आप रिलीज़ के बाद नहीं, उससे पहले ही पकड़ सकते हैं।