कलर पिकर और कन्वर्टर

कैसे कलर कॉपी करें

1. 1

   कलर चुनें या वैल्यू पेस्ट करें

   कोई भी नोटेशन टाइप करें, जिसे ब्राउजर समझता है: hex कोड, rgb(), hsl(), oklch(), यहां तक कि CSS में कलर का नाम भी। यहां मुख्य कंट्रोल टेक्स्ट फील्ड है; स्वॉच और आईड्रॉपर उसी वैल्यू तक पहुंचने के छोटे रास्ते हैं।

2. 2

   किसी भी फॉर्मेट में कॉपी करें

   सभी बारह नोटेशन एक साथ दिखते हैं, हर एक के पास कॉपी बटन है। कुछ भी ड्रॉपडाउन में छिपा नहीं है, इसलिए HEX को RGB में बदलने में तीन नहीं, एक क्लिक लगता है।

3. 3

   पैलेट को CSS या JSON में एक्सपोर्ट करें

   बेस कलर, उसका दस चरणों वाला स्केल और इमेज से लिए गए सभी कलर एक साथ एक्सपोर्ट होते हैं: CSS कस्टम प्रॉपर्टी, Tailwind थीम का हिस्सा, SCSS वेरिएबल या सादा JSON।

काम OKLCH में क्यों होता है

HSL की एक खूबी सुविधाजनक है और एक कमी गंभीर। सुविधा यह है कि ह्यू, सैचुरेशन और लाइटनेस अलग-अलग संख्याएं हैं, जिनके बारे में सोचना आसान है। कमी यह है कि उसकी लाइटनेस वह नहीं, जो आंख देखती है: hsl(60 100% 50%) चमकीला पीला है और hsl(240 100% 50%) गहरा नीला, जबकि दोनों पचास प्रतिशत लाइटनेस का दावा करते हैं। इसीलिए HSL में ह्यू घुमाने पर ऐसी हार्मनी स्कीम बनती हैं, जिनमें एक स्वॉच उभरकर आता है और दूसरा गायब-सा हो जाता है। OKLCH इसे ठीक करता है। उसकी लाइटनेस इंसानी नजर के हिसाब से चलती है, इसलिए सिर्फ ह्यू बदलने पर चमक सच में बराबर रहती है। इस पेज की हर स्कीम और हर स्केल वहीं गिनी जाती है और फिर आउटपुट के लिए वापस sRGB में बदली जाती है।

कंट्रास्ट की संख्याओं का मतलब

WCAG कंट्रास्ट को दो कलर की रिलेटिव ल्यूमिनेंस के अनुपात के रूप में बताता है: एक जैसे कलर के लिए 1:1 से लेकर सफेद पर काले के लिए 21:1 तक। AA पास करने के लिए सामान्य टेक्स्ट को 4.5:1 चाहिए। बड़े टेक्स्ट (18.66px और उससे ज्यादा, या 14px बोल्ड) और इंटरफेस के हिस्सों, जैसे आइकन और इनपुट की बॉर्डर, को 3:1 चाहिए। AAA सामान्य टेक्स्ट के लिए 7:1 मांगता है। ये पसंद-नापसंद की बातें नहीं हैं: इन्हीं से तय होता है कि पेज धूप में या कमजोर नजर के साथ पढ़ा जा सकेगा या नहीं। अगर कोई जोड़ी कम पड़ती है, तो नतीजे के पास वाला बटन OKLCH में लाइटनेस को कदम-दर-कदम कम करता है, जब तक जोड़ी पास न हो जाए। इस तरह आपको कोई दूसरा कलर नहीं, बल्कि आपके अपने कलर का सबसे करीबी पास होने वाला रूप मिलता है।

फोटो से बना पैलेट

इमेज चुनें, और उसके मुख्य कलर मीडियन कट तरीके से निकाले जाते हैं: पिक्सल के बादल को बार-बार उस चैनल के साथ बांटा जाता है, जिसमें सबसे ज्यादा फर्क है, और हर बने हुए बॉक्स का औसत एक स्वॉच बन जाता है। फिर लगभग एक जैसे कलर CIEDE2000 से हटाए जाते हैं, जो कलर के बीच नजर से दिखने वाली दूरी का पैमाना है। इसलिए आपको एक ही आसमान के छह शेड नहीं, छह अलग कलर मिलते हैं। तस्वीर पहले 400 पिक्सल तक छोटी की जाती है और आपके ब्राउजर से बाहर नहीं जाती।

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