कलर पिकर की मदद से, एचडी और नॉन-एचडी कलर की जांच करें और उन्हें डीबग करें

जेसेलिन येन

Twitter GitHub होम पेज

सोफ़िया इमेलियानोवा

GitHub

कलर पिकर color और *-color में किए गए बदलावों को बदलने के लिए जीयूआई उपलब्ध कराता है. इसकी मदद से, बस एक क्लिक में नॉन-एचडी और एचडी कलर बनाए जा सकते हैं, उन्हें बदला जा सकता है, और डीबग किया जा सकता है.

अहम जानकारी: इस वीडियो में, Chrome DevTools 112 से पहले का वर्शन दिखाया गया है. बाद के वर्शन में, स्टाइल पैनल में 12 नए कलर स्पेस और सीएसएस कलर लेवल 4 के सात नए गैमट शामिल किए जा सकते हैं. साथ ही, color-mix() फ़ंक्शन सीएसएस कलर लेवल 5 से काम करता है.

नए कलर स्पेस के बारे में ज़्यादा जानने के लिए, हाई डेफ़िनिशन सीएसएस कलर गाइड देखें.

कलर पिकर खोलें और रंग बदलें

कलर पिकर का इस्तेमाल करके, क्लिक से कलर वैल्यू बदलने के लिए:

1. एलिमेंट पैनल में कोई एलिमेंट चुनें.

2. स्टाइल पैनल में, color या *-color एलान ढूंढें जिसे आपको बदलना है.

   हर color या *-color वैल्यू की बाईं ओर, एक छोटा स्क्वेयर आइकॉन होता है, जिसमें उस रंग की झलक दिखती है.

   

   ध्यान दें: इस उदाहरण में, color-mix() फ़ंक्शन के बगल में दो इंटरसेक्टेड सर्कल दिखाए गए हैं: . चौराहा, मिलने वाले रंग की झलक होता है.

कंप्यूट किए गए मान की जांच करने के लिए, कंप्यूटेड पैनल का इस्तेमाल करें.

1. कलर पिकर खोलने के लिए, रंग के आगे दिए गए झलक दिखाने वाले स्क्वेयर पर क्लिक करें.
2. रंग बदलने के लिए, कलर पिकर के किसी भी यूज़र इंटरफ़ेस (यूआई) एलिमेंट का इस्तेमाल करें.

कलर पिकर एलिमेंट

यहां कलर पिकर के हर यूज़र इंटरफ़ेस (यूआई) एलिमेंट की जानकारी दी गई है:

1. शेड्स.
2. आईड्रॉपर. आईड्रॉपर की मदद से कहीं भी रंग को सैंपल करने का तरीका देखें.
3. क्लिपबोर्ड पर कॉपी करें. डिसप्ले वैल्यू को अपने क्लिपबोर्ड पर कॉपी करें.
4. डिसप्ले वैल्यू. चुने गए कलर स्पेस के तर्क.
5. कंट्रास्ट अनुपात. सिर्फ़ color वैल्यू के लिए उपलब्ध है. यही color और background-color के बीच का अंतर है.
6. रंग पटल. वर्ग के रंग को बदलने के लिए, किसी स्क्वेयर पर क्लिक करें.
7. गामट की सीमा. यह लाइन सिर्फ़ नए कलर स्पेस और color() फ़ंक्शन के लिए उपलब्ध है. इन डिवाइसों से एचडी और नॉन-एचडी, दोनों रंगों में वीडियो बनाए जा सकते हैं. लाइन से आपको एचडी और नॉन-एचडी के बीच अंतर करने में मदद मिलती है.
8. कलर सर्कल. डिसप्ले वैल्यू बदलने के लिए, इस सर्कल को शेड में खींचें और छोड़ें.
9. Hue स्लाइडर.
10. पारदर्शिता वाला स्लाइडर.
11. डिसप्ले वैल्यू स्विचर. ड्रॉप-डाउन सूची से कोई कलर स्पेस चुनें. रंगों को बदलना देखें.
    ध्यान दें: इसके अलावा, सीधे ड्रॉप-डाउन मेन्यू को खोलने के लिए, Shift को दबाकर रखें और कलर वैल्यू के बगल में मौजूद, कलर की झलक वाले आइकॉन पर क्लिक करें.
12. कंट्रास्ट अनुपात को बड़ा करें. इससे जुड़ा वह सेक्शन खुलता है जिस पर कंट्रास्ट ठीक किया जा सकता है.

13. रंग पटल स्विचर. इनके बीच टॉगल करने के लिए इस पर क्लिक करें:

    • मटीरियल डिज़ाइन पैलेट.
    • कस्टम पैलेट. मौजूदा रंग को मैन्युअल तरीके से इस पैलेट में जोड़ने के लिए, पर क्लिक करें.
    • सीएसएस वैरिएबल पैलेट. आपके पेज पर, -- के साथ जोड़े गए सभी कस्टम सीएसएस वैरिएबल की सूची दिखाता है.
    • पेज के रंग पैलेट. यह पैलेट जनरेट करने के लिए, DevTools आपकी स्टाइलशीट के सभी कलर ढूंढता है.

कोई कलर स्पेस चुनें

कलर स्पेस चुनने के लिए:

1. किसी रंग की वैल्यू के बगल में मौजूद, झलक दिखाने वाले आइकॉन पर Shift-क्लिक करें. इसके बाद, एक ड्रॉप-डाउन सूची खुलेगी.

   ध्यान दें: इसके अलावा, कलर पिकर में जाकर, डिसप्ले वैल्यू स्विचर पर क्लिक करें.

   

2. इनमें से कोई एक कलर स्पेस चुनें:

   • #<hex-color>
   • rgb(X X X / .X).
   • hsl(X X X / X).
   • hwb(X X X / .X).

   या नए स्पेस में से कोई एक:

   • lch(X X X / .X)
   • oklch(X X X / .X)
   • lab(X X X / .X)
   • oklab(X X X / .X)

   या color(<color_space> X X X) फ़ंक्शन से तय किया गया स्पेस.

रंग बदलें

डिसप्ले वैल्यू स्विचर की मदद से कलर स्पेस के बीच स्विच करने पर, DevTools अपने-आप वैल्यू को बदल देता है.

चेतावनी: एचडी से एचडी से नॉन-एचडी में बदलने पर, DevTools क्लिप के स्पेस में फ़िट होने के लिए अलग-अलग साइज़ की क्लिप का इस्तेमाल किया जाता है. साथ ही, क्लिप की गई वैल्यू को चेतावनी वाले आइकॉन के साथ मार्क किया जाता है.

ओरिजनल वैल्यू देखने के लिए, आइकॉन पर कर्सर घुमाएं.

अगले वीडियो में, कन्वर्ज़न ऐक्शन के तौर पर दिखाया गया है.

कंट्रास्ट ठीक करें

अहम जानकारी: कलर पिकर, सिर्फ़ color वैल्यू के लिए और उनसे जुड़ी background-color वैल्यू के लिए, कंट्रास्ट अनुपात की गिनती करता है. इसलिए, सिर्फ़ color वैल्यू में कंट्रास्ट अनुपात सेक्शन होते हैं.

color के एलान में कंट्रास्ट से जुड़ी समस्या को ठीक करने के लिए:

1. color वैल्यू के बगल में मौजूद, कलर पिकर खोलें.
2. कंट्रास्ट अनुपात सेक्शन को बड़ा करें.

3. सुझाए गए उस रंग का इस्तेमाल करें जो दिशा-निर्देशों का पालन करता हो:

   • दिशा-निर्देश के आगे मौजूद, पर क्लिक करें.
   • सबसे ऊपर शेड की झलक में, रंग के गोले को उससे जुड़ी लाइन के नीचे खींचें और छोड़ें.

ध्यान दें: डिफ़ॉल्ट रूप से, कलर पिकर आपको WebAIM के दिशा-निर्देशों का पालन करने का सुझाव देता है. इसके अलावा, इसे APCA के मुताबिक वैल्यू के सुझाव देने के लिए सेट किया जा सकता है: सेटिंग > एक्सपेरिमेंट में, नया बेहतर पर्सेप्चुअल कंट्रास्ट एल्गोरिदम (APCA) चालू करें...

को चुनें

एक ही बार में सभी कंट्रास्ट समस्याओं की सूची पाने के लिए, अपनी वेबसाइट को ज़्यादा पढ़ने लायक बनाएं गाइड का पालन करें.

आईड्रॉपर की मदद से, कहीं भी रंग को आज़माएं

आईड्रॉपर की मदद से, पेज पर और स्क्रीन पर कहीं से भी रंगों को सैंपल के तौर पर इस्तेमाल किया जा सकता है.

स्क्रीन पर कहीं से भी रंग चुनने के लिए:

1. कलर पिकर खोलें और इनमें से कोई एक काम करें:
   • बटन पर क्लिक करें.
   • आईड्रॉपर को चालू करने के लिए, C दबाएं. बंद करने के लिए, Escape दबाएं.
2. आईड्रॉपर चालू होने पर, टारगेट किए गए रंग पर कर्सर घुमाएं और सैंपल करने के लिए क्लिक करें.

ध्यान दें: आईड्रॉपर सिर्फ़ एसआरजीबी कलर स्पेस में ही रंग के नमूने देता है. जब इस जगह के बाहर सैंपल लिया जाता है, तो आईड्रॉपर रंग को सबसे नज़दीकी रंग से क्लिप कर देता है. रंगों को बदलना देखें.

इस उदाहरण में, कलर पिकर rgb(224 255 255 / 15%) की मौजूदा कलर वैल्यू दिखाता है. Chrome के बाहर क्लिक करने पर, यह रंग गुलाबी हो जाता है.