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