कलर पैलेट जनरेटर
एक रंग से शुरू करें और मेल खाते पैलेट पाएं, हर स्वैच के HEX व RGB मान और सफ़ेद व काले के मुक़ाबले उसके कंट्रास्ट के साथ।
पूरी तरह आपके ब्राउज़र में चलता है
रैंडम पैलेट
आपके ब्राउज़र के रैंडम नंबर जनरेटर से पाँच रंग। जिन्हें रखना हो उन्हें लॉक करें, फिर दोबारा चुनें। जब किसी टेक्स्ट फ़ील्ड पर फ़ोकस न हो, तब स्पेस बार दबाकर चुन सकते हैं।
एक्सपोर्ट
पैलेट OKLCH कलर स्पेस में बनते हैं और sRGB HEX के रूप में दिखते हैं, इसलिए स्क्रीन के लिए बहुत चटक रंगों की क्रोमा घटा दी जाती है। कंट्रास्ट के आँकड़े WCAG 2 के सूत्र से आते हैं, जो सिर्फ़ लाइटनेस का कंट्रास्ट नापता है।
कलर पैलेट कैसे बनाएं
- पिकर से बेस रंग चुनें, या HEX फ़ील्ड में
#1636a3याf60जैसा मान लिखें। - उसके नीचे हार्मनी पैलेट पढ़ें। हर स्वैच अपना HEX, RGB और यह दिखाता है कि उस पर काला या सफ़ेद टेक्स्ट WCAG AA या AAA पास करता है या नहीं।
- एक्सपोर्ट में कोई पैलेट चुनें और उसे CSS कस्टम प्रॉपर्टी, JSON ऐरे या सादी सूची के रूप में कॉपी या डाउनलोड करें। खोजबीन के लिए रैंडम पैलेट और लॉक बटन इस्तेमाल करें।
हार्मनी कैसे बनती हैं
रंग हार्मनी उन रंगों का समूह है जिनके ह्यू कलर व्हील पर तय कोणों पर होते हैं। एनालॉगस रंग पड़ोसी होते हैं, 30 डिग्री के अंतर पर। कॉम्प्लिमेंट्री रंग 180 डिग्री दूर होता है, स्प्लिट-कॉम्प्लिमेंट्री जोड़ी 150 और 210 डिग्री दूर, ट्रायड में 120 डिग्री के अंतर पर तीन रंग होते हैं, और टेट्रेड में 90 डिग्री के अंतर पर चार ह्यू। मोनोक्रोमैटिक पैलेट ह्यू वही रखता है और लाइटनेस को हल्के टिंट से गहरे शेड तक बदलता है।
यहाँ इस्तेमाल हुआ व्हील OKLCH है, जो Björn Ottosson के OKLab स्पेस का बेलनाकार रूप है। रूपांतरण sRGB से लीनियर लाइट में जाता है, फिर OKLab मैट्रिक्स से गुज़रता है, और गैमट जाँच के साथ वापस आता है। अगर घुमाया हुआ रंग sRGB की दिखाई जा सकने वाली सीमा से बाहर गिरता है, तो उसकी क्रोमा छोटे क़दमों में तब तक घटाई जाती है जब तक वह समा न जाए, ताकि आपकी चुनी लाइटनेस और ह्यू बनी रहें।
कंट्रास्ट हर स्वैच के लिए सफ़ेद और काले दोनों के मुक़ाबले बताया जाता है, क्योंकि पैलेट के रंग के बारे में पहला सवाल आमतौर पर यही होता है कि उस पर कौन-सा टेक्स्ट रखा जा सकता है। रेशियो और AA या AAA का शब्द हमेशा लिखे होते हैं, ताकि जानकारी रंग देख पाने पर निर्भर न हो।
सुझाव
- वही रंग HSL, CMYK या CSS नाम में चाहिए? रंग कन्वर्टर और कंट्रास्ट जाँच इस्तेमाल करें।
- पैलेट के दो रंगों से बैकग्राउंड बनाने के लिए CSS ग्रेडिएंट जनरेटर इस्तेमाल करें।
- व्हील की जगह फ़ोटो से रंग लेना है? इमेज से रंग चुनें आज़माएं।
अक्सर पूछे जाने वाले सवाल
HSL की जगह OKLCH क्यों?
HSL में एक ही लाइटनेस वाले पीले और नीले की चमक बहुत अलग दिखती है। OKLCH इस तरह बना है कि बराबर लाइटनेस के क़दम बराबर दिखते हैं, जिससे पैलेट के स्वैच एक-से वज़न के रहते हैं। हार्मनी के लिए ह्यू का कोण इस्तेमाल होता है, इसलिए कॉम्प्लिमेंट्री रंग आपके बेस से OKLCH में 180 डिग्री पर होता है, HSL में नहीं।
जब कोई रंग स्क्रीन पर दिखाया ही न जा सके तो क्या होता है?
लाइटनेस और क्रोमा वही रखते हुए ह्यू घुमाने पर कभी-कभी रंग उस sRGB दायरे के बाहर चला जाता है जो सामान्य डिस्प्ले दिखा सकता है। तब टूल लाइटनेस और ह्यू रखकर क्रोमा तब तक घटाता है जब तक रंग समा न जाए। इसीलिए घुमाया हुआ स्वैच बेस से थोड़ा कम चटक दिख सकता है।
AA और AAA लेबल का क्या मतलब है?
ये उस स्वैच पर सफ़ेद या काले टेक्स्ट का WCAG 2 कंट्रास्ट रेशियो बताते हैं। 4.5 या उससे ज़्यादा रेशियो सामान्य टेक्स्ट के लिए AA है, 7 या उससे ज़्यादा AAA, और 3 से 4.5 सिर्फ़ बड़े टेक्स्ट के लिए AA पास करता है। जो स्वैच काले और सफ़ेद दोनों पर फ़ेल हो, वह टेक्स्ट के लिए ख़राब बैकग्राउंड है।
रैंडम पैलेट कैसे काम करता है?
ब्राउज़र के सुरक्षित रैंडम नंबर जनरेटर से पाँच रंग चुने जाते हैं: ह्यू व्हील पर फैले हुए, और लगभग काले व लगभग सफ़ेद से बचने वाले दायरे में रैंडम लाइटनेस और क्रोमा के साथ। किसी स्वैच को रखने के लिए लॉक करें, फिर बाकी बदलने के लिए रैंडम पैलेट दबाएं या स्पेस बार।
कौन-सा एक्सपोर्ट फ़ॉर्मैट इस्तेमाल करूँ?
CSS कस्टम प्रॉपर्टी सीधे स्टाइलशीट के :root ब्लॉक में चिपक जाती हैं। JSON ऐरे डिज़ाइन टोकन या स्क्रिप्ट के लिए ठीक है, और सादी सूची में हर लाइन पर एक HEX होता है, उन टूल के लिए जो पेस्ट किए रंग लेते हैं। तीनों दिखाए गए HEX मान ही इस्तेमाल करते हैं।
क्या यह छोटे HEX और कैपिटल अक्षर सँभालता है?
हाँ। #abc, abc, #AABBCC और aabbcc सब पढ़े जाते हैं। अल्फ़ा जोड़ी वाले मान, जैसे आठ अंकों वाले, यहाँ नहीं चलते; पहले अल्फ़ा हटाने के लिए रंग कन्वर्टर और कंट्रास्ट जाँच इस्तेमाल करें।