रंग मिक्सर

रंग मिश्रण कैसे काम करता है

यह टूल RGB रंग स्पेस में एडिटिव मिक्सिंग का उपयोग करता है। प्रत्येक रंग के RGB घटकों को उनके वज़न के अनुसार भारित किया जाता है और अंतिम रंग प्राप्त करने के लिए औसत निकाला जाता है।

क्या मैं दो से अधिक रंग मिला सकता हूँ?

हाँ! 8 तक रंग जोड़ने के लिए «+ रंग जोड़ें» पर क्लिक करें। मिश्रण में प्रत्येक रंग के योगदान को नियंत्रित करने के लिए वेट स्लाइडर का उपयोग करें।

कैसे उपयोग करें

1. अपने रंग चुनें: प्रत्येक रंग चुनने के लिए पिकर का उपयोग करें। अधिक रंग जोड़ने के लिए "+ रंग जोड़ें" पर क्लिक करें।
2. प्रत्येक रंग का वज़न समायोजित करें: अंतिम मिश्रण में उसके योगदान को नियंत्रित करने के लिए प्रत्येक रंग के नीचे स्लाइडर खींचें।
3. परिणाम का पूर्वावलोकन करें: मिश्रित रंग HEX, RGB और HSL मानों के साथ लाइव दिखाया जाता है।
4. मिश्रित रंग कॉपी करें: अपनी डिज़ाइन में उपयोग के लिए HEX या RGB मान कॉपी करने हेतु क्लिक करें।

कलर मिक्सर क्यों इस्तेमाल करें?

रंग मिलाना डिज़ाइन में एक बुनियादी ऑपरेशन है, सफ़ेद के साथ मिलाकर टिंट बनाना, पूरक रंगों के साथ मिलाकर म्यूटेड टोन बनाना, या दो ब्रांड रंगों को मिलाकर एक्सेंट रंग खोजना।

लोग जब "रंग मिलाना" कहते हैं तो उनका मतलब तीन में से एक चीज़ होती है

जब कोई ग़ैर-विशेषज्ञ कहता है "दो रंग मिलाओ", तो लगभग हमेशा वह तीन पूरी तरह अलग-अलग संक्रियाओं में से किसी एक की बात कर रहा होता है। ग़लत मॉडल चुनना ही रंग टूल में भ्रम का सबसे बड़ा स्रोत है।

योज्य मिश्रण तब होता है जब रंगीन प्रकाश की किरणें परस्पर अध्यारोपित होती हैं। एक लाल और एक हरी टॉर्च, दोनों एक ही सफ़ेद दीवार के टुकड़े पर पड़कर, पीला धब्बा बनाती हैं। ऊपर तीसरी नीली टॉर्च जोड़ने पर सफ़ेद बनता है। मॉडल है "अधिक प्रकाश = अधिक चमकीला", और तीनों प्राथमिक रंग लाल, हरा और नीला इसलिए हैं क्योंकि मानव शंकु कोशिकाओं की चरम संवेदनशीलता लगभग इन्हीं बैंडों में होती है। हर स्क्रीन, फ़ोन, मॉनिटर, टीवी, प्रोजेक्टर, योज्य मिश्रण का उपयोग करता है। हर पिक्सेल में तीन उप-पिक्सेल (R, G, B) होते हैं, और तीनों को अधिकतम कर देने से सफ़ेद बनता है। यही कारण है कि web का डिफ़ॉल्ट रंग मॉडल RGB है: माध्यम उत्सर्जक है, और गणित माध्यम से मेल खाता है।

व्यवकलनी मिश्रण तब होता है जब रंजक श्वेत प्रकाश से तरंगदैर्घ्य अवशोषित करते हैं। सायन स्याही लाल प्रकाश अवशोषित करती है और हरा व नीला परावर्तित करती है। पीली स्याही नीला अवशोषित करती है और लाल व हरा परावर्तित करती है। सायन को पीले के ऊपर रखिए और दोनों फ़िल्टरों से जो तरंगदैर्घ्य बचते हैं वे केवल हरे होते हैं। मॉडल है "अधिक रंजक = अधिक गहरा", और तीन व्यवकलनी प्राथमिक रंग हैं सायन, मजेंटा और पीला। सिद्धांत में CMY पूर्ण सघनता पर मिलकर काला बनता है, पर वास्तव में रंजक अपूर्ण होते हैं और परिणाम मटमैला भूरा होता है, इसलिए वाणिज्यिक छपाई ने सच्चे काले रंगों के लिए अलग काली स्याही (CMYK में K) जोड़ी। स्क्रीन पर चलने वाला रंग मिक्सर असली व्यवकलनी मिश्रण नहीं कर सकता क्योंकि स्क्रीन ख़ुद योज्य है; वह केवल दिखावट का अनुकरण कर सकता है।

पारंपरिक कलाकार रंग सिद्धांत ने हमें सिखाया कि प्राथमिक रंग हैं लाल, पीला और नीला। चित्रकला परंपरा, और 1810 का गोएठे का Theory of Colours, और 1961 का इटन का बाउहाउस पाठ्यपुस्तक The Art of Color, ने RYB को कलाकार-पैलेट की नींव के रूप में संहिताबद्ध किया। RYB भौतिक रूप से सटीक नहीं है। गामुट अधिकतम करने वाली वास्तविक व्यवकलनी प्राथमिकताएँ CMY हैं, RYB नहीं। पर RYB सदियों तक टिका रहा क्योंकि असली रंग शुद्ध व्यवकलनी फ़िल्टर नहीं होते: कैडमियम लाल की एक नली और अल्ट्रामरीन नीले की एक नली मिलकर पहचान योग्य बैंगनी बना देती हैं, और यह प्रणाली स्टूडियो में पीढ़ियों के विद्यार्थियों को पढ़ाने भर के लिए "काम करती है"। यह उपकरण एक योज्य RGB मिक्सर है, जो web वास्तव में करता भी यही है, इसलिए "लाल जोड़ हरा" से पीला मिलता है, वह भूरा नहीं जो एक रंग मिक्सर देगा।

रंग स्थान: sRGB, Display P3, Rec. 2020, Adobe RGB

एक रंग मॉडल (RGB, CMYK, HSL) आपको बताता है कि आपके पास कौन-से आयाम हैं। एक रंग स्थान आपको बताता है कि हर संख्यात्मक त्रिक किस वास्तविक भौतिक रंग के अनुरूप है: यह प्राथमिकताओं की वर्णप्रवृत्ति, श्वेत बिंदु और स्थानांतरण फलन को तय करता है। दोनों "RGB" बोलने वाले दो डिस्प्ले एक ही कोड के लिए दृश्य रूप से अलग लाल दे सकते हैं अगर वे अलग-अलग रंग स्थान को लक्ष्य कर रहे हों।

• sRGB (IEC 61966-2-1:1999) web का डिफ़ॉल्ट है और 1990 के दशक के अंत से रहा है। 1996 में Hewlett-Packard और Microsoft द्वारा बनाया गया, ताकि PC मॉनिटर, स्कैनर और आरंभिक web में रंग को मानकीकृत किया जा सके। दृश्यमान CIE 1931 वर्णप्रवृत्ति क्षेत्र का लगभग 35%। web पर जो कुछ भी रंग स्थान निर्दिष्ट नहीं करता वह परंपरा से sRGB ही है।
• Display P3, Apple का वाइड-गामुट प्रवेश। Apple ने 2015 के अंत में Retina 5K डिस्प्ले वाला iMac, Display P3 को लक्ष्य करने वाले वाइड-गामुट डिस्प्ले के साथ भेजा, फिर इसे iPhone (iPhone 7, सितंबर 2016), iPad Pro और MacBook Pro लाइनों में चरणबद्ध रूप से फैलाया। sRGB से ~25% चौड़ा गामुट, ख़ासकर संतृप्त लाल और हरे में। CSS Color Module Level 4 ने color(display-p3 r g b) सिंटैक्स जोड़ा।
• Rec. 2020 (ITU-R Recommendation BT.2020, पहली बार 2012 में प्रकाशित) अल्ट्रा-हाई-डेफ़िनिशन टेलीविज़न का रंग स्थान है और अधिकांश HDR वर्कफ़्लो की नींव। दृश्यमान स्पेक्ट्रम का ~75%, जिसमें प्राथमिकताएँ स्पेक्ट्रल लोकस पर बैठती हैं। आज लगभग कोई भी उपभोक्ता डिस्प्ले पूरा Rec. 2020 गामुट पुन: प्रस्तुत नहीं कर सकता; यह आगे-संगत स्पेक है।
• Adobe RGB (1998) Adobe Systems द्वारा परिभाषित किया गया, ताकि छायाकारों और प्रिंट डिज़ाइनरों को sRGB से चौड़ा गामुट मिले। लगभग 50% चौड़ा। यह web रंग स्थान नहीं है, ब्राउज़र इसे मान कर नहीं चलते, पर पेशेवर फ़ोटो कैमरे, Lightroom और Photoshop प्रिंट वर्कफ़्लो के लिए इसी को डिफ़ॉल्ट रखते हैं।

अवबोधक रंग स्थान, और sRGB में मिश्रण से मध्य बिंदु मटमैले क्यों आते हैं

जिन sRGB और HSL निर्देशांकों में अधिकांश web उपकरण रंग संग्रहीत और संशोधित करते हैं, वे अवबोधक रूप से एकसमान नहीं हैं। HSL के L चैनल में एक इकाई का क़दम रंग के "कितना उज्ज्वल दिखता है" में एक इकाई के क़दम के अनुरूप नहीं होता। यही गहरा कारण है कि दो रंगों को उनके चैनलों का औसत निकालकर मिलाने पर अंतर्बोधहीन परिणाम मिलते हैं।

मानक उदाहरण: शुद्ध लाल #ff0000 और शुद्ध हरा #00ff00 लें। RGB चैनलों को घटक-दर-घटक औसत करें: लाल 255 से 127, हरा 0 से 127, नीला 0 पर। परिणाम #7f7f00, एक ऑलिव जो फीका, गहरा और थोड़ा गंदला लगता है। यह उस चमकीले पीले #ffff00 जैसा बिल्कुल नहीं है जो आपको असल में लाल और हरी टॉर्च एक ही दीवार पर डालने पर मिलेगा। इसे दो आपस में जुड़ी समस्याएँ समझाती हैं।

पहली, sRGB गामा-एन्कोडेड है। 127 के रूप में संग्रहीत संख्या उतने प्रकाश का प्रतिनिधित्व नहीं करती जितना 255 करती है, उसका आधा भी नहीं। स्थानांतरण फलन ग़ैर-रैखिक है: sRGB में 127 लगभग 21% रैखिक प्रकाश तीव्रता के अनुरूप है, 50% नहीं। तो जब आप गामा-एन्कोडेड मानों का औसत निकालते हैं तो आप तीव्रता के वर्गमूल जैसी किसी चीज़ का औसत निकाल रहे होते हैं, स्वयं तीव्रता का नहीं, और परिणाम जितना होना चाहिए था उससे बहुत गहरा निकलता है। केवल इस समस्या का समाधान है: औसत से पहले sRGB को रैखिक-RGB में बदलें, फिर वापस। रैखिक-RGB औसत के साथ, लाल जमा हरा बंटा दो एक काफ़ी अधिक उज्ज्वल और विश्वसनीय पीले-हरे बन जाता है।

दूसरी, रैखिक-RGB भी अवबोधन से मेल नहीं खाती। रैखिक-RGB में बराबर क़दम अब भी अवबोधक उज्ज्वलता या वर्णप्रवृत्ति के बराबर क़दम नहीं हैं। रैखिक-RGB में लाल और नीले का मध्य बिंदु एक संतृप्ति-रहित लैवेंडर होता है, न कि वह समृद्ध बैंगनी जिसकी डिज़ाइनर अपेक्षा करता है। इस गहरी समस्या का समाधान है: एक अवबोधक रूप से एकसमान स्थान-Lab, Oklab, OKLCH-में मिलाना। दोनों छोरों को Oklab में बदलें, L, a और b चैनलों को रैखिक रूप से इंटरपोलेट करें, फिर sRGB में लौटें। Oklab में लाल और हरे का मध्य बिंदु एक जीवंत, विश्वसनीय पीला होता है। लाल और नीले का मध्य बिंदु एक संतृप्त मजेंटा। पीले और नीले का मध्य बिंदु एक साफ़ तटस्थ ग्रे, उस दलदली हरे की जगह जो भोले RGB से मिलता है।

यह उपकरण फ़िलहाल गामा-एन्कोडेड sRGB में औसत निकालता है-सबसे सरल मॉडल और वही जो उन मटमैले मध्य बिंदुओं को पैदा करता है। उस सरल मामले के लिए यह सही है, पर भौतिक प्रकाश या मानवीय अवबोधन वास्तव में क्या करता है, उससे मेल नहीं खाता। यदि आप ग्रैडिएंट स्टॉप या पैलेट के मध्य-स्वर चुन रहे हैं और मटमैले-ग्रे जाल में नहीं फँसना चाहते, तो नीचे वर्णित नई CSS color-mix() फ़ंक्शन का या रंग-गणित पुस्तकालयों में से किसी का प्रयोग करें।

CIE Lab, Oklab, OKLCH, अवबोधक स्टैक

CIE Lab (जिसे CIELAB भी लिखा जाता है) अंतर्राष्ट्रीय प्रकाशीकरण आयोग ने 1976 में प्रकाशित किया। इसके तीन अक्ष हैं: 0 (काला) से 100 (सफ़ेद) तक उज्ज्वलता के लिए L*, हरे-से-लाल वर्ण अक्ष के लिए a*, और नीले-से-पीले वर्ण अक्ष के लिए b*। ऐसा डिज़ाइन कि बराबर संख्यात्मक अंतर लगभग बराबर अवबोधक अंतरों के अनुरूप हों। आधी सदी तक यह ग्राफ़िक्स, दृष्टि विज्ञान और रंग प्रबंधन में मानक अवबोधक स्थान रहा। ज्ञात कमज़ोरियाँ: इंटरपोलेट करने पर नीले अप्राकृतिक रूप से बैंगनी हो जाते हैं; अत्यधिक संतृप्त रंगों के लिए उज्ज्वलता अक्ष अवबोधन का सटीक अनुसरण नहीं करता।

CIE LCH केवल ध्रुवीय निर्देशांकों में व्यक्त CIE Lab है: उज्ज्वलता के लिए L, क्रोमा (तटस्थ अक्ष से दूरी) के लिए C, ह्यू कोण के लिए H। डिज़ाइनरों के लिए कच्चे a*/b* से अधिक उपयोगी, क्योंकि "ह्यू को 30 डिग्री खिसकाओ" या "क्रोमा को 0 तक गिराओ" जैसी संक्रियाएँ सीधे स्वाभाविक मानसिक मॉडलों पर मैप होती हैं।

Oklab, Björn Ottosson द्वारा, दिसंबर 2020 में bottosson.github.io पर "A perceptual color space for image processing" शीर्षक के निबंध में प्रकाशित। Ottosson एक स्वीडिश इंजीनियर हैं जो गेम उद्योग में रंग पर काम कर चुके हैं। Oklab CIE Lab की अधिकांश ज्ञात कमियाँ ठीक करता है, ख़ास तौर पर इंटरपोलेशन में नीले-बैंगनी का खिसकाव और संतृप्त रंगों में क्रोमा अंतरों का अधिअनुमान। W3C ने Oklab को Ottosson की ब्लॉग पोस्ट के लगभग एक साल के भीतर CSS Color Module Level 4 में अपनाया, जो एक नए रंग स्थान के लिए असाधारण रूप से तेज़ मानकीकरण है। आज हर बड़ा ब्राउज़र oklab() को मूल रूप से समर्थन करता है।

OKLCH बेलनाकार निर्देशांकों में Oklab है: 0 से 1 तक उज्ज्वलता के लिए L, 0 से लगभग 0.4 तक क्रोमा के लिए C, 0 से 360 डिग्री ह्यू के लिए H। यह डिज़ाइन-सिस्टम पैलेट के लिए सबसे अनुशंसित रंग स्थान बनता जा रहा है, ठीक इसलिए कि उसकी धुरियों पर संक्रियाएँ डिज़ाइनर की अंतर्बोध से साफ़ मैप होती हैं, और दो OKLCH रंगों के बीच इंटरपोलेशन CSS में आज उपलब्ध किसी भी स्थान से सबसे चिकने, सबसे सुखद ग्रैडिएंट पैदा करता है।

CSS color-mix() फ़ंक्शन, JS-मुक्त अवबोधक मिश्रण

CSS Color Module Level 5 ने color-mix() पेश किया, जो दो रंग, एक इंटरपोलेशन रंग स्थान और वैकल्पिक वज़न लेता है, और मिश्रित परिणाम पूरी तरह ब्राउज़र द्वारा संगणित करवाता है। सिंटैक्स है color-mix(in oklch, red 50%, blue 50%)। आप स्थान बदल सकते हैं (in srgb, in oklab, in lch, in hsl longer hue, आदि) और गणित उसी स्थान में चलता है। ब्राउज़र समर्थन 2023 की शुरुआत में पहुँचा:

• Safari 16.2, दिसंबर 2022 (पहला ब्राउज़र जो लाया)
• Chrome 111, मार्च 2023
• Edge 111, मार्च 2023 (वही Chromium रिलीज़)
• Firefox 113, मई 2023

JavaScript-मुक्त, CSS-नेटिव रंग मिक्सर दो साल से अधिक समय से व्यापक रूप से उपलब्ध है। कोई भी उपकरण जो color-mix() पर बना है, अवबोधक रूप से सही परिणाम "मुफ़्त" पाता है-ब्राउज़र रूपांतरण स्टैक सँभाल लेता है। CSS Color Module Level 4 ने स्वयं 2022 में Candidate Recommendation स्थिति पाई और आधुनिक ब्राउज़रों में व्यापक समर्थित है।

रंग गणित के लिए JavaScript पुस्तकालय

तीन पुस्तकालय वहाँ हावी हैं जहाँ आप color-mix() पर निर्भर नहीं हो सकते या नहीं होना चाहते:

• Dan Burzo की culori.js, सबसे लचीली। लगभग हर नामांकित रंग स्थान का समर्थन करती है (sRGB, रैखिक-RGB, P3, Rec. 2020, Lab, LCH, Oklab, OKLCH, HSL, HSV, Cubehelix, OKHSL, OKHSV, और भी)। Tree-shakable, ESM-first। OKLCH-आधारित पैलेट जनन के लिए संदर्भ कार्यान्वयन।
• Lea Verou और Chris Lilley की colorjs.io, एक तरह से "स्पेक-लेखकों की" पुस्तकालय, क्योंकि Lilley CSS Color Module स्पेक्स के सह-संपादक हैं। CSS Color स्पेक के अर्थशास्त्र के प्रति निष्ठावान, culori से थोड़ा बड़ा बंडल। तब अच्छी जब आप ऐसे परिणाम चाहते हैं जो वही दें जो ब्राउज़र संगणित करता।
• Gregor Aisch की chroma-js, पुरानी, सहज, छोटी। रंग पैमानों और सरल इंटरपोलेशन के लिए उत्कृष्ट। Lab और LCH समर्थन है पर पिछले प्रमुख रिलीज़ तक Oklab नहीं; समुदाय फ़ोर्क ने जोड़ा है।

रंग सिद्धांत का संक्षिप्त इतिहास

पाश्चात्य रंग सिद्धांत की शुरुआत 1665 में आइज़ैक न्यूटन से होती है। प्लेग के दौरान कैम्ब्रिज से दूर एकांतवास में, न्यूटन ने सूरज की रोशनी को प्रिज़्म से गुज़ारा और सात अलग-अलग रंगों की पहचान की (लाल, नारंगी, पीला, हरा, नीला, इंडिगो, बैंगनी)। फिर उन्हें एक बंद वृत्त पर सजाया, न्यूटन का रंग चक्र, जो स्पेक्ट्रल छोरों (बैंगनी और लाल) को एक अ-स्पेक्ट्रल मजेंटा के माध्यम से जोड़ता है। यह चक्र उनके Opticks में 1704 में प्रकाशित हुआ पर तैयार 1665-1666 में हुआ था।

योहान वोल्फ़गांग फ़ोन गोएठे ने 1810 में Theory of Colours (Zur Farbenlehre) प्रकाशित किया। जहाँ न्यूटन भौतिकशास्त्री थे, गोएठे एक कवि थे जो रंग के मनोविज्ञान की जाँच कर रहे थे: रंग दर्शक के मन में कैसा महसूस होते हैं, परस्पर विरोध और मिलन कैसे करते हैं। उनका काम कई बिंदुओं पर वैज्ञानिक रूप से ग़लत था पर पूरक रंगों, रंग पश्च-छवियों, और गर्म व ठंडे पैलेटों के भावात्मक चरित्र के बारे में ऐसे विचार लाया जो आज भी पढ़ाए जाते हैं।

बाउहाउस के मास्टर योहानेस इटन ने 1961 में The Art of Color (Kunst der Farbe) प्रकाशित किया। इटन का बारह-तीली RYB रंग चक्र और रंग के उनके सात प्रकार के विरोध (ह्यू, हल्का-गहरा, ठंडा-गर्म, पूरक, समकालिक, संतृप्ति, फैलाव) बीसवीं सदी के उत्तरार्ध में डिज़ाइन शिक्षा का प्रमुख शिक्षण ढाँचा बने।

Pantone Lawrence Herbert ने बनाई थी, जो 1956 में Pantone Inc. में कर्मचारी के रूप में आए और 1962 में कंपनी ख़रीद ली। 1963 में उन्होंने Pantone Matching System (PMS) लॉन्च किया: संख्या से पहचाने जाने वाली स्पॉट-कलर स्याहियों की मानकीकृत पुस्तकालय, छपे हुए स्वैच बुक के साथ, जिनके चलते न्यूयॉर्क का डिज़ाइनर और हांगकांग का छपाईवाला बिना अस्पष्टता के बिल्कुल वही रंग निर्दिष्ट और पुन: प्रस्तुत कर सकते थे। तकनीकी CIE अर्थ में Pantone एक रंग स्थान नहीं है, यह स्याही मिश्रणों का एक मालिकी कैटलॉग है, पर पेशेवर रंग वर्कफ़्लो पर इसका प्रभाव बहुत बड़ा है।

HSL और HSV को Alvy Ray Smith ने अपने 1978 के लेख "Color Gamut Transform Pairs" में पेश किया, जो SIGGRAPH कार्यवाही में प्रकाशित हुआ जब वे Xerox PARC में थे (Smith ने बाद में Pixar की सह-स्थापना की)। वे ऐसे रंग निर्देशांक ढूँढ रहे थे जो RGB से अधिक स्वाभाविक रूप से कलाकार के अंतर्बोध पर मैप हों। HSL web पर डिफ़ॉल्ट "डिज़ाइनर-मित्रवत" रंग मॉडल बन गया और CSS में सबसे व्यापक मान्यता प्राप्त ग़ैर-RGB नोटेशन बना हुआ है। फिर भी यह अवबोधक रूप से एकसमान नहीं है, OKLCH उसका आधुनिक उत्तराधिकारी है।

विरोधाभास और सुगम्यता, WCAG 1.4.3

जब कोई डिज़ाइनर दो रंगों को मिलाकर तीसरा बनाता है-एक हॉवर अवस्था, एक रंजित पृष्ठभूमि, एक ग्रैडिएंट स्टॉप-तब परिणामी रंग को ऊपर रखे किसी भी पाठ या आइकन के साथ विरोधाभास की आवश्यकताओं को पूरा करना होगा। WCAG 2.x सफलता मानदंड 1.4.3, "विरोधाभास (न्यूनतम)," आवश्यक करता है:

• सामान्य आकार के पाठ के लिए कम-से-कम 4.5:1 का विरोधाभास अनुपात।
• बड़े पाठ (18pt रेगुलर या 14pt बोल्ड और ऊपर) तथा ग्राफ़िकल वस्तुओं और UI घटकों के लिए कम-से-कम 3:1 का विरोधाभास अनुपात।

विरोधाभास अनुपात सापेक्ष चमक से संगणित होता है, ऊपर वर्णित रैखिक-RGB रूपांतरण और रैखिक चैनलों का भारित योग (L = 0.2126·R + 0.7152·G + 0.0722·B) के साथ। दो रंगों के बीच अनुपात है (L_अधिक_हल्का + 0.05) / (L_अधिक_गहरा + 0.05)। व्यावहारिक निहितार्थ: एक ग्रैडिएंट के साथ मध्यवर्ती स्टॉप छोरों पर विरोधाभास परीक्षण पास कर सकते हैं पर बीच में नाटकीय रूप से असफल हो सकते हैं। यदि कोई ब्रांड एक गहरे नेवी को चमकीले पीले के साथ मिलाकर हॉवर-स्टेट का ऑलिव बनाता है, वह ऑलिव सफ़ेद और काले दोनों पाठ के सामने WCAG-असफलता क्षेत्र में बैठ सकता है।

और सवाल

लाल जोड़ हरा मुझे भूरा क्यों नहीं देता?

क्योंकि यह उपकरण, हर स्क्रीन की तरह, योज्य RGB मिश्रण का प्रयोग करता है, और लाल प्रकाश जोड़ हरा प्रकाश पीला देता है। भूरा वह है जो आपको लाल और हरी रंग सामग्री मिलाने पर मिलता है, जो व्यवकलनी है: हर रंजक अलग तरंगदैर्घ्य अवशोषित करता है और बचे हुए तरंगदैर्घ्य भूरे जैसे दिखते हैं। स्क्रीन पर "रंग मिश्रण" को सटीक रूप से अनुकरण करने के लिए स्पेक्ट्रल या रंजक-जागरूक मॉडल चाहिए होगा (Procreate और Adobe Fresco कला ऐप के लिए ऐसा करते हैं); सामान्य web रंग मिक्सर, इसी सहित, ईमानदार योज्य RGB मिक्सर हैं और आपको पीला देंगे, भूरा नहीं।

मेरे मध्य बिंदु मटमैले दिखते हैं, समाधान क्या है?

दो परतों का समाधान। न्यूनतम शुद्धता क़दम है रैखिक-प्रकाश मिश्रण: औसत से पहले sRGB को रैखिक-RGB में बदलें, फिर वापस। केवल यही लाल+हरा→पीले को बहुत अधिक उज्ज्वल और विश्वसनीय बना देता है। पूर्ण अवबोधक समाधान है OKLCH या Oklab में मिलाना, दोनों छोरों को OKLCH में बदलें, इंटरपोलेट करें, वापस बदलें। ब्राउज़र का CSS color-mix(in oklch, red, green) ठीक यही एक पंक्ति में करता है और मई 2023 के बाद जारी हर ब्राउज़र में चलता है। JavaScript पाइपलाइनों के लिए, culori.js संदर्भ पुस्तकालय है।

डिज़ाइन-सिस्टम पैलेट के लिए मिलाने का सही रंग स्थान कौन-सा है?

OKLCH वर्तमान आम सहमति वाला उत्तर है। यह अवबोधक रूप से एकसमान है, उसकी साफ़ अक्षें डिज़ाइनर अंतर्बोध से मेल खाती हैं (उज्ज्वलता / क्रोमा / ह्यू), मटमैले मध्य बिंदुओं के बिना ग्रैडिएंट इंटरपोलेशन देती है, और हर आधुनिक ब्राउज़र में CSS Color 4 के oklch() और CSS Color 5 के color-mix(in oklch, ...) के माध्यम से शिप होती है। 2024-2026 में बनाए जा रहे डिज़ाइन सिस्टम HSL-आधारित पैलेट से OKLCH-आधारित पैलेटों की ओर ठीक इसी कारण से बढ़ रहे हैं।

मेरा मिला हुआ रंग WCAG विरोधाभास परीक्षण पास करेगा?

यह उपकरण फ़िलहाल परिणाम का विरोधाभास अनुपात नहीं दिखाता, पर आप इसकी संगणना कर सकते हैं: WCAG चमक है L = 0.2126·R + 0.7152·G + 0.0722·B, sRGB चैनलों को रैखिक करने के बाद, और दो रंगों के बीच विरोधाभास अनुपात है (L_अधिक_हल्का + 0.05) / (L_अधिक_गहरा + 0.05)। लक्ष्य हैं सामान्य पाठ के लिए 4.5:1 और बड़े पाठ या UI घटकों के लिए 3:1। संबंधित उपकरण क्षेत्र में Color Contrast Checker यह संगणना सीधे चलाता है।

संबंधित टूल