👩🏽‍🎨 🆚 🕙 सीएसएस एलसीएच रंग 🧝🏽 🧑🏿‍🤝‍🧑🏻 💇🏼

मुझे हमेशा से रंग विज्ञान में दिलचस्पी रही है। 2014 में, मैं बात की विभिन्न सम्मेलनों में। सीएसएस रंग 4 विनिर्देश के बारे में बात, इससे पहले कि, 2009 में, मैं एक कार्यक्रम रंग चुनने के लिए लिखा था। उसने ICC रंग प्रोफाइल का समर्थन करने और CMYK के साथ ठीक से काम करने के लिए एक छिपे हुए जावा एप्लेट का उपयोग किया। यह, जहाँ तक मुझे पता है, यह अपनी तरह का पहला कार्यक्रम था। मैंने इसे कभी जारी नहीं किया, लेकिन इसने इस प्रकाशन को आगे बढ़ाया। रंग में रुचि मुझे उस आदमी तक ले आई जो मेरा पति बन गया। 2019 में, मैं सीएसएस कलर 5 विनिर्देश के सह-संपादक बन गया । मेरा लक्ष्य मेरे प्रस्ताव को स्वीकार करना है ।

रंग संशोधन, जिसका उद्देश्य रंग विकल्पों को बनाने के लिए डिजाइनरों को मनमाने ढंग से रंग चैनलों को अनुकूलित करने की अनुमति देना है। मैं इस ऑफ़र के साथ अपने ऑफ़र को संयोजित करना चाहता हूं । सीएसएस एलसीएच रंग कुछ ऐसे हैं जो वास्तव में मुझे रोमांचित करते हैं। मुझे गहरा यकीन है कि डिजाइनर, जब वे एलसीएच रंगों के बारे में अधिक सीखते हैं, तो इस तथ्य से नाराज हो जाएंगे कि उनके पास अभी भी ऐसे रंगों का उपयोग करने का अवसर नहीं है।

LCH क्या है?

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

में सफारी समर्थन एलसीएच पहले से ही लागू किया जा रहा है।
क्रोम में यह सुविधा अपेक्षित है ।
फ़ायरफ़ॉक्स में इस सुविधा को लागू करने की संभावना पर चर्चा की गई है ।

LCH एक रंग स्थान है जो RGB / HSL रंग स्थानों पर कुछ फायदे हैं जो कि सभी को CSS के साथ काम करने के लिए उपयोग किया जाता है। वास्तव में, मैं और भी आगे बढ़ूंगा और एलसीएच को एक ऐसी तकनीक कहूंगा जो वेब पर रंगों के काम करने के तरीके को नाटकीय रूप से बदल सकती है। यहां तीन तथ्य दिए गए हैं जो मुझे इस तरह के बयान देने की अनुमति देते हैं।

▍1। LCH, sRGB की तुलना में, लगभग 50% अधिक रंगों तक पहुंच प्रदान करता है

यह एक बहुत बड़ा कदम है। अभी, हम जो भी CSS कलर सेट कर सकते हैं, वह sRGB कलर स्पेस में परिभाषित किया गया है । कुछ साल पहले, यह पर्याप्त से अधिक था, क्योंकि सभी मॉनिटर, पेशेवर लोगों को छोड़कर, एसआरजीबी से कम एक रंग सरगम था। हालाँकि, अब सब कुछ ऐसा नहीं है। आज, अधिकांश मॉनिटरों का रंग सरगम (यानी, रंग की सीमा जो प्रदर्शित की जा सकती है) P3 के करीब है । और इस रंग स्थान की मात्रा 50% अधिक हैअंतरिक्ष sRGB की मात्रा से। वर्तमान में CSS में इन रंगों की कोई पहुंच नहीं है। मैं इसे दोहराता हूं: हमारे पास उन रंगों की एक तिहाई तक पहुंच नहीं है जिन्हें आधुनिक मॉनिटर प्रदर्शित कर सकते हैं। और यह कुछ मामूली रंगों के बारे में नहीं है। हम सबसे ज्वलंत रंगों के बारे में बात कर रहे हैं जो मॉनिटर प्रदर्शित कर सकते हैं। हमारी साइटें इस तथ्य के कारण बहुत कम दिखती हैं कि हार्डवेयर सीएसएस विनिर्देशों और ब्राउज़र कार्यान्वयन की तुलना में तेजी से विकसित हो रहा है।

कलर स्पेस sRGB और P3

▍2। एलसीएच (और लैब) धारणा में रंग के स्थान समान हैं

LCH के साथ काम करते समय, रंग स्थान में समान संख्यात्मक परिवर्तन रंगों के बीच समान अंतर देता है। रंग स्थान की इस संपत्ति को "अवधारणात्मक एकरूपता" कहा जाता है। आरजीबी या एचएसएल रंग रिक्त स्थान धारणा में समान नहीं हैं। इस सुविधा का एक बहुत ही खुलासा उदाहरण ( यहाँ इस उदाहरण का स्रोत है) है।

एचएसएल रंगों की धारणा की विषमता।

ऊपरी और निचले पंक्तियों में रंग 20 डिग्री तक भिन्न होते हैं। क्या आपको लगता है कि इन रंगों के बीच कथित अंतर समान है?

▍3। LCH में चमक एक संकेतक है जिसका अर्थ कुछ है

एचएसएल रंग अंतरिक्ष में, लपट एक अर्थहीन संकेतक है। रंगों में एक ही हल्कापन हो सकता है, लेकिन उनकी कथित चमक में काफी भिन्नता होती है। मेरा पसंदीदा उदाहरण पीले और नीले रंग की तुलना है। आप मुझ पर विश्वास नहीं कर सकते हैं, लेकिन नीचे दिखाए गए रंगों में समान एचएसएल लपट है।

एचएसएल रंग एक ही प्रकाश वाले होते हैं

दोनों रंगों में 50% की हल्की होती है, लेकिन निश्चित रूप से उनमें समान चमक नहीं होती है। एचएसएल में "लपट" की अवधारणा का अर्थ क्या है?

यहां आप मुझसे तर्क कर सकते हैं, यह कहते हुए कि हल्कापन, कम से कम, निरंतर रंग टोन (ह्यू) और रंग संतृप्ति के साथ कुछ समझ में आता है। वह है - जब एक ही रंग के भीतर हल्कापन बदलना। और सच्चाई: एचएसएल-लाइटनेस बढ़ने से हमें हल्का रंग मिलता है, और घटता है - गहरा रंग। लेकिन जो होता है जरूरी नहीं कि वही रंग भी हो।

निरंतर रंग टोन और रंग संतृप्ति के साथ लपट को समायोजित करना

इन दोनों रंगों में एक ही रंग और एक ही संतृप्ति है, लेकिन क्या वे एक ही रंग के गहरे और हल्के संस्करण की तरह दिखते हैं?

LCH रंग मॉडल का उपयोग करते समय, समान चमक वाले रंगों को समान चमक वाले रंगों के रूप में माना जाता है, और समान क्रोमा वाले रंगों को समान संतृप्ति के रंगों के रूप में माना जाता है।

LCH रंग कैसे व्यवस्थित होते हैं?

LCH लाइटनेस, क्रोमा, ह्यू (लाइटनेस, कलर, टोन) के लिए छोटा है। इस रंग मॉडल के रंग घटकों का एचएसएल रंग मॉडल के घटकों से कुछ संबंध है। लेकिन इन रंग मॉडल के घटकों के बीच गंभीर अंतर हैं।

LCH में पिच कोण एचएसएल टन से काफी मेल नहीं खाते हैं। वह है - 0 - यह पूरी तरह से लाल नहीं है। यह रंग बल्कि मैजेंटा के करीब है। और 180 एक फ़िरोज़ा रंग नहीं है, बल्कि यह नीले-हरे रंग का है, और यह पूरी तरह से पूरक है।

समान कथित चमक वाले

रंग ध्यान दें कि ये रंग, हालांकि स्वर में बहुत भिन्न हैं, उन रंगों की तरह दिखते हैं जिनमें समान चमक होती है।

एचएसएल रंग अंतरिक्ष में, संतृप्ति को 0-100 से मानों की एक स्वच्छ श्रेणी द्वारा दर्शाया जाता है। तथ्य यह है कि यह स्थान आरजीबी के ध्रुवीय निर्देशांक में एक साधारण परिवर्तन का परिणाम है। LCH में, हालांकि, क्रोमा घटक का मूल्य सैद्धांतिक रूप से असीमित है। LCH मानक (जैसे लैब) को मनुष्यों द्वारा देखे जाने वाले रंगों की पूरी श्रृंखला का प्रतिनिधित्व करने में सक्षम बनाया गया है। इन सभी रंगों को मॉनिटर पर प्रदर्शित नहीं किया जा सकता है, यहां तक कि एक भी जो पी 3 रंग स्थान का समर्थन करता है। इसके अलावा, हम मॉनिटर के रंग सरगम के आधार पर न केवल प्रदर्शित रंगों की अधिकतम संख्या के बारे में बात कर रहे हैं, बल्कि रंगों में अंतर के बारे में भी।

शायद इस विचार को समझना आसान होगा अगर मैं इसे एक उदाहरण के साथ समझाऊं। सादगी के लिए, आइए कल्पना करें कि हमारे पास एक मॉनिटर है जिसका रंग सरगम बिल्कुल sRGB रंग स्थान से मेल खाता है। तुलना के लिए, 2013 मैकबुक एयर स्क्रीन लगभग 60% sRGB का उत्पादन कर सकता है, लेकिन अधिकांश आधुनिक डिस्प्ले, जैसा कि पहले ही उल्लेख किया गया है, 150% sRGB प्रदर्शित कर सकता है। L = 50 और H = 180 (उपरोक्त आकृति में सियान नमूना) के लिए, C का अधिकतम मूल्य केवल 35 है! L = 50 और H = 0 (गुलाबी) के लिए, C का मूल्य sRGB से परे जाए बिना 77 तक पहुँच सकता है। L = 50 और H = 320 (पर्पल) के लिए C का मान 108 तक जा सकता है!

हालाँकि सीमाओं की कमी को कुछ भयावह माना जा सकता है (चाहे वह लोगों या रंग स्थानों के बारे में हो), इसके बारे में चिंता करने की कोई बात नहीं है: यदि एक रंग सेट किया गया है जो एक निश्चित मॉनिटर पर प्रदर्शित नहीं किया जा सकता है, तो यह मॉनिटर द्वारा समर्थित समान रंग में कम हो जाएगा। अंत में, नया कुछ भी नहीं है: जब तक मॉनिटर sRGB की क्षमताओं से अधिक रंग सरगम का अधिग्रहण नहीं कर लेता, तब तक मॉनिटर पर प्रदर्शित होने वाले सामान्य सीएसएस रंगों के साथ ठीक यही हुआ था जिसका रंग सरगम sRGB से कम था।

LCH रंग बीनने वाला

मुझे उम्मीद है कि अब आप LCH रंगों का उपयोग करने के विचार में भी थोड़ा रुचि रखते हैं। यह सवाल उठाता है कि इन रंगों की कल्पना कैसे की जाए।

वास्तव में, मैंने काफी समय पहले इसी टूल, LCH Color Picker को बनाया था, जिसे मुख्य रूप से मुझे और मेरे सहकर्मियों को CSS रंग 5 को संपादित करते समय LCH सुविधाओं को ठीक से समझने में मदद करने के लिए डिज़ाइन किया गया था । एक सिद्धांत को जानने के लिए है, और एक अन्य को स्लाइडर्स के साथ प्रयोग करने और अपनी आंखों से परिणाम देखने में सक्षम होना है। मैंने भी प्रासंगिक उदाहरण पोस्ट करने के लिए एक डोमेन, css.land खरीदा । हमने इस टूल का थोड़ा उपयोग किया, मैंने इसमें नई सुविधाएँ जोड़ीं, लेकिन मैंने इसके बारे में कभी नहीं लिखा। इसलिए, यह उपकरण केवल हमारे लिए और उन लोगों के लिए उपलब्ध था, जिन्होंने इस पर ध्यान दियायह गीथूब भंडार।

एलसीएच रंगों का चयन करने के लिए साधन

यदि आप एलसीएच रंगों के साथ प्रयोग करने में रुचि रखते हैं, तो आप इस उपकरण का उपयोग कर सकते हैं। यहाँ उसके बारे में कुछ विवरण हैं:

रंग रूपांतरण कोड हमारी टीम के सदस्यों में से एक द्वारा लिखा गया था। हमें विश्वास है कि गणना, कम से कम, रूपांतरण प्रक्रिया की एक सही समझ के आधार पर की गई थी (यानी, अगर कुछ गलत हो जाता है - यह कोड में एक गलती है, और कुछ की गलतफहमी का परिणाम नहीं है)।
Chroma रंग घटक 0 - 100 के अलावा किसी अन्य श्रेणी में परिवर्तन का समर्थन करता है, जो हमारे टूल को कुछ अन्य से अलग करता है जिन्हें हम खोजने में सक्षम थे।
उपयोगकर्ता इसमें (आयात बटन का उपयोग करके) मनमाने ढंग से सीएसएस रंगों को लोड कर सकते हैं।
स्लाइडर्स आपको केवल पूर्णांक मान दर्ज करने की अनुमति देते हैं, लेकिन स्लाइडर के ऊपर दिखाई देने वाले काले क्षेत्रों में, आप किसी भी संख्या में प्रवेश कर सकते हैं।
इस प्रक्रिया में, आप रंगों को बचा सकते हैं और देख सकते हैं कि वे कैसे प्रक्षेपित हैं।
रंग विश्लेषण इस बात के लिए समर्थित है कि यह sRGB, P3 रंग स्थान (या Rec.2020, और भी अधिक व्यापक रंग स्थान) से संबंधित है।
समर्थित पारदर्शिता सेटिंग।
और अंत में, इस उपकरण का उपयोग करना केवल दिलचस्प है! विशेष रूप से यह देखते हुए कि यह मावो के आधार पर कार्यान्वित किया जाता है (हालांकि यहां जावास्क्रिप्ट का थोड़ा उपयोग किया जाता है, अर्थात यह शुद्ध HTML में निर्मित मावो परियोजना नहीं है)।

तथ्य की बात के रूप में, आप यहाँ LCH रंग बीनने की कोशिश कर सकते हैं ।

सवाल और जवाब

जब मैंने यह लेख प्रकाशित किया, तब उन्होंने मुझसे प्रश्न पूछना शुरू कर दिया। मेरा मानना है कि मुझे यहां कुछ सामान्य गलतफहमियों को स्पष्ट करना चाहिए।

▍आप कहते हैं कि ब्राउज़रों में LCH रंगों के लिए समर्थन अभी तक लागू नहीं हुआ है, लेकिन मैं उन्हें लेख में देख सकता हूं। यह कैसे हो सकता है?

इस लेख में प्रयुक्त सभी रंग sRGB रंग सरगम के भीतर आते हैं। ऐसा इसलिए है क्योंकि हम अभी तक sRGB के बाहर रंगों का उत्पादन नहीं कर सकते हैं। sRGB एक कलर स्पेस है, न कि कलर डिस्क्रिप्शन सिंटैक्स। उदाहरण के लिए, rgb(255 0 0)वे lch(54.292% 106.839 40.853)एक ही रंग निर्धारित करते हैं।

Color LR कलर पिकर sRGB के बाहर के रंग कैसे दिखाता है?

मेरा कार्यक्रम, एलसीएच कलर पिकर, ऐसे रंगों को प्रदर्शित नहीं करता है। और, जहां तक मुझे पता है, इंटरनेट पर कहीं भी ऐसा कोई कार्यक्रम नहीं है जो इस तरह के रंगों को प्रदर्शित कर सके। LCH कलर पिकर प्रोजेक्ट को वेब प्रौद्योगिकियों का उपयोग करके कार्यान्वित किया जाता है, जिसका अर्थ है कि मानक प्रतिबंध किसी अन्य वेब पेज पर लागू होते हैं। मैं गैर-आउटपुट रंगों को sRGB में परिवर्तित करता हूं। सबसे पहले, मैं बस आरजीबी रंग घटकों को 0-100% की सीमा तक लाया था, लेकिन इस पीआर के लिए धन्यवाद , प्रोग्राम अब बहुत अधिक सफल एल्गोरिथ्म का उपयोग करता है। अर्थात्, हम LCH घटक C के मूल्य को कम करने के बारे में बात कर रहे हैं, जब तक कि रंग sRGB सीमा के भीतर गिर नहीं जाता। यही कारण है कि एक निश्चित सीमा से ऊपर घटक सी के मूल्य में वृद्धि एक उज्जवल रंग के समापन की ओर नहीं ले जाती है। तथ्य यह है कि इस तरह के रंग को अभी तक सीएसएस का उपयोग करके घटाया नहीं जा सकता है।

Firefox मैंने देखा कि फ़ायरफ़ॉक्स क्रोम और सफारी की तुलना में चमकीले रंग प्रदर्शित करता है। क्या LCH समर्थन के साथ कोई संबंध है?

फ़ायरफ़ॉक्स ने विनिर्देश के उस हिस्से को लागू नहीं किया है जो CSS रंगों को sRGB फ्रेम पर प्रतिबंधित करता है। इसके बजाय, ब्राउज़र केवल स्क्रीन पर कच्चे RGB मानों को पास करता है। उदाहरण के लिए, rgb(100% 0% 0%)यह सबसे चमकदार लाल रंग है जो एक मॉनिटर प्रदर्शित कर सकता है। यद्यपि यह एक स्मार्ट समाधान की तरह लग सकता है, यहाँ हम विरोधाभासों का सामना कर रहे हैं। तथ्य यह है कि इस दृष्टिकोण के साथ, आप रंग सेट कर सकते हैं, सबसे अच्छा, केवल लगभग, चूंकि सभी स्क्रीन अलग-अलग रंग प्रदर्शित करते हैं। सीएसएस रंगों को एक ज्ञात रंग स्थान (sRGB) तक सीमित करके, हमें डिवाइस स्वतंत्रता मिलती है। LCH और लैब रंग स्थान भी स्वतंत्र हैं, क्योंकि वे वास्तविक मापा रंग पर आधारित हैं।

Color आप रंग (डिस्प्ले-पी 3 आरजीबी) डिजाइन के बारे में क्या कह सकते हैं? सफारी 2017 से इसका समर्थन कर रही है!

इस लेख के प्रकाशित होने के बाद मुझे इसके बारे में बताया गया। मैं लंबे समय से जानता हूं कि सफारी इस सुविधा पर काम कर रहा है, लेकिन किसी तरह मैं उस क्षण को याद कर रहा था जब यह तैयार था। वास्तव में, पिछले महीने यह लेख WebKit में इस सिंटैक्स का वर्णन करते हुए प्रकाशित किया गया था । गजब का

डिजाइन सीएसएस कलर 4color(colorspaceid params) में वर्णित एक विशेषता है। सीएसएस में रंग प्रबंधन के मामले में उसकी तुलना स्विस चाकू से की जा सकती है। इस डिजाइन के बारे में महान बात यह है कि यह आपको आईसीसी रंग प्रोफ़ाइल और उससे लिए गए रंगों को निर्दिष्ट करने की अनुमति देता है। उदाहरण के लिए, यह उपयोगी हो सकता है यदि आप एक वेब पेज पर असली सीएमवाईके रंग या पैनटोन रंगों का उपयोग करना चाहते हैं। यह डिज़ाइन कुछ पूर्वनिर्धारित रंग स्थानों का भी समर्थन करता है, जिनमें से एक डिस्प्ले-पी 3 है। उदाहरण के लिए, color(display-p3 0 1 0)यह हमें पी 3 कलर स्पेस में सबसे हल्का हरा रंग देता है। इस डिजाइन के लिए समर्थन का परीक्षण करने के लिए, आप इस परीक्षण का उपयोग कर सकते हैं । समर्थन की अनुपस्थिति में color(), एक लाल रंग दिखाया जाएगा, और यदि उपलब्ध हो, तो एक हल्का हरा रंग।

यद्यपि यह एक अद्भुत विशेषता है (और मुझे अपने LCH कलर पिकर को रीमेक करने की आवश्यकता है ताकि यह प्रोग्राम इसका उपयोग करेगा color()यदि यह सुविधा समर्थित है), इस तथ्य पर ध्यान दें कि यह केवल मेरे द्वारा बताई गई समस्याओं में से केवल एक को हल करता है। अर्थात्, हम रंग सरगम से सभी रंगों तक पहुंच के बारे में बात कर रहे हैं। लेकिन, चूंकि टूल color()RGB पर आधारित है, यह RGB से जुड़े सभी नुकसानों से ग्रस्त है। यह एक समान धारणा से अलग नहीं है, इसकी मदद से, रंग मापदंडों को समायोजित करके, रंग विकल्प (हल्का या गहरा विकल्प, अधिक या कम उज्ज्वल, और इसी तरह) बनाना मुश्किल है।

इसके अलावा, मैं ध्यान देता हूं कि यह एक अस्थायी समाधान है। अब यह इस तथ्य के कारण लागू होता है कि पी 3 में फिट नहीं होने वाले रंग प्रदर्शित कर सकते हैं दुर्लभ हैं। लेकिन डिस्प्ले के एक और सुधार के बाद, यह पता चला है कि डिज़ाइन color(display-p3 ...)में वही समस्याएं होंगी जो अब RGB-कलर्स में हैं।

रंग रिक्त स्थान LCH और लैब डिवाइस स्वतंत्र हैं, वे उन सभी रंगों का प्रतिनिधित्व कर सकते हैं जो मनुष्यों को दिखाई देते हैं, और परिणामस्वरूप वे हार्डवेयर के विकास की परवाह किए बिना प्रासंगिक रहेंगे।

प्रिय पाठकों! क्या आप CSS में LCH रंगों का उपयोग करने में रुचि रखते हैं?

सीएसएस एलसीएच रंग