कलर पिकर, color और *-color के एलान को बदलने के लिए जीयूआई उपलब्ध कराता है. इसकी मदद से, बिना एचडी और एचडी कलर बनाए जा सकते हैं, उनमें बदलाव किया जा सकता है, और उन्हें डीबग किया जा सकता है.
नए कलर स्पेस के बारे में ज़्यादा जानने के लिए, हाई डेफ़िनिशन सीएसएस कलर गाइड देखें.
कलर पिकर खोलें और रंग बदलें
एक क्लिक से रंग की वैल्यू बदलने के लिए, कलर पिकर का इस्तेमाल करें:
- एलिमेंट पैनल में, कोई एलिमेंट चुनें.
स्टाइल पैनल में, वह
colorया*-colorएलान ढूंढें जिसमें आपको बदलाव करना है.हर
colorया*-colorवैल्यू की बाईं ओर, उस रंग की झलक के साथ एक छोटा स्क्वेयर आइकॉन होता है.
कंप्यूट की गई वैल्यू की जांच करने के लिए, कंप्यूट किए गए पैनल का इस्तेमाल करें.
- कलर पिकर खोलने के लिए, किसी रंग के बगल में मौजूद, झलक दिखाने वाले स्क्वेयर पर क्लिक करें.
- रंग बदलने के लिए, कलर पिकर के किसी भी यूज़र इंटरफ़ेस (यूआई) एलिमेंट का इस्तेमाल करें.
कलर पिकर एलिमेंट
यहां कलर पिकर के हर यूज़र इंटरफ़ेस (यूआई) एलिमेंट का ब्यौरा दिया गया है:
- शेड.
- आईड्रॉपर. आईड्रॉपर की मदद से, कहीं भी रंग का सैंपल देखें.
- क्लिपबोर्ड पर कॉपी करें. डिसप्ले वैल्यू को अपने क्लिपबोर्ड पर कॉपी करें.
- डिसप्ले वैल्यू. चुने गए कलर स्पेस के आर्ग्युमेंट.
- कंट्रास्ट का अनुपात. सिर्फ़
colorवैल्यू के लिए उपलब्ध है. यहcolorऔरbackground-colorके बीच का अंतर है. - रंग पटल. रंग को स्क्वेयर में बदलने के लिए, स्क्वेयर पर क्लिक करें.
- गमुट की सीमा. यह लाइन सिर्फ़ नए कलर स्पेस और
color()फ़ंक्शन के लिए उपलब्ध है. इनसे एचडी और नॉन-एचडी, दोनों तरह के रंग बनाए जा सकते हैं. लाइन की मदद से एचडी और नॉन-एचडी के बीच अंतर किया जा सकता है. - कलर सर्कल. डिसप्ले वैल्यू बदलने के लिए, इस सर्कल को सभी शेड पर खींचें और छोड़ें.
- ह्यू स्लाइडर.
- ओपैसिटी स्लाइडर.
- डिसप्ले वैल्यू स्विचर. ड्रॉप-डाउन सूची से कोई कलर स्पेस चुनें. रंग बदलना देखें.
- कंट्रास्ट का अनुपात बड़ा करें. इससे वह सेक्शन खुलता है जो आपको कंट्रास्ट ठीक करने की सुविधा देता है.
रंग पटल स्विचर. इसके बीच टॉगल करने के लिए इस पर क्लिक करें:
- मटीरियल डिज़ाइन पैलेट.
- कस्टम पैलेट. मौजूदा रंग को इस पैलेट में मैन्युअल रूप से जोड़ने के लिए,
पर क्लिक करें. - सीएसएस वैरिएबल पैलेट. यह आपके पेज पर,
--से जोड़े गए सभी कस्टम सीएसएस वैरिएबल की सूची बनाता है. - पेज के रंग पैलेट. इस पैलेट को जनरेट करने के लिए, DevTools आपकी स्टाइलशीट में सभी रंगों को खोजता है.
कोई कलर स्पेस चुनें
कलर स्पेस चुनने के लिए:
रंग की वैल्यू के बगल में मौजूद, झलक वाले आइकॉन पर शिफ़्ट पर क्लिक करें. एक ड्रॉप-डाउन सूची खुलेगी.
इनमें से कोई एक कलर स्पेस चुनें:
या नए स्पेस में से कोई एक:
या
color(<color_space> X X X)फ़ंक्शन से तय किया गया स्पेस.
रंगों को बदलें
डिसप्ले वैल्यू स्विचर की मदद से कलर स्पेस के बीच स्विच करने पर, DevTools अपने-आप वैल्यू को बदल देता है.
ओरिजनल वैल्यू देखने के लिए, आइकॉन पर कर्सर घुमाएं.
अगला वीडियो, कन्वर्ज़न को कार्रवाई में दिखाता है.
कंट्रास्ट ठीक करें
color के एलान के लिए कंट्रास्ट से जुड़ी समस्या को ठीक करने के लिए:
colorवैल्यू के बगल में मौजूद, कलर पिकर खोलें.- कंट्रास्ट अनुपात
सेक्शन को बड़ा करें. सुझाए गए रंग का इस्तेमाल करें, जो दिशा-निर्देशों का पालन करता हो:
- दिशा-निर्देश के आगे दिए गए
पर क्लिक करें. - सबसे ऊपर शेड की झलक में, उससे जुड़ी लाइन के नीचे कलर सर्कल को खींचें और छोड़ें.
- दिशा-निर्देश के आगे दिए गए
कंट्रास्ट से जुड़ी सभी समस्याओं की सूची एक ही बार में पाने के लिए, अपनी वेबसाइट को पढ़ने में आसान बनाएं गाइड पढ़ें.
आईड्रॉपर की मदद से, कहीं भी रंग का आनंद लें
आईड्रॉपर किसी पेज पर या स्क्रीन पर कहीं से भी रंग का नमूना ले सकता है.
स्क्रीन पर कहीं से भी रंग चुनने के लिए:
- कलर पिकर खोलें और इनमें से कोई एक काम करें:
बटन पर क्लिक करें.- आईड्रॉपर को चालू करने के लिए, C को दबाएं. बंद करने के लिए, Escape दबाएं.
- आईड्रॉपर चालू होने पर, टारगेट किए गए रंग पर कर्सर घुमाएं और सैंपल देखने के लिए क्लिक करें.
इस उदाहरण में, कलर पिकर कलर की मौजूदा वैल्यू rgb(224 255 255 / 15%) दिखाता है. Chrome से बाहर क्लिक करने पर, यह रंग गुलाबी हो जाता है.