जब मैं बच्चा था, मैंने कॉमिक्स के बारे में एक फ़ैनज़ाइन प्रकाशित किया था। यह मेरे पास कंप्यूटर होने से बहुत पहले की बात है - इसे टाइपराइटर, कागज और कैंची का उपयोग करके बनाया गया था!

फैनज़ाइन शुरू में काले और सफेद रंग में था, मेरे स्कूल में इसकी फोटोकॉपी की गई थी। समय के साथ, जैसे-जैसे इसे अधिक सफलता मिली, मैं रंग कवर के साथ ऑफसेट प्रिंटिंग का खर्च वहन करने में सक्षम हो गया!

हालाँकि, उन रंगों को प्रबंधित करना काफी चुनौतीपूर्ण था। प्रत्येक कवर को चार बार मुद्रित करना पड़ता था, प्रत्येक रंग के लिए एक बार: सियान, मैजेंटा, पीला, और कुंजी (काला) - जिसे सीएमवाईके के रूप में संक्षिप्त किया जाता है।

इसका मतलब था कि मुझे चार अलग-अलग शीट उपलब्ध करानी थीं, जिनमें से प्रत्येक काली स्याही में मुद्रित थी, लेकिन एक विशिष्ट रंग से मेल खाती थी।

यहां मेरे द्वारा प्रकाशित मुद्दों में से एक है:

ऊपर की छवि में आप जो पीला रंग देख रहे हैं, वह मेरे द्वारा "पीली" शीट पर काली स्याही का उपयोग करके हाथ से पेंट किया गया था। त्वचा के रंग के लिए, मैंने "रैस्टर डॉट्स" नामक चीज़ का उपयोग किया। ये ऐसी चादरें थीं जिन्हें आप अलग-अलग घनत्व के काले बिंदुओं के साथ खरीद सकते थे। आप बिंदुओं को काटेंगे और उन्हें लागू करेंगे - इस मामले में, "लाल" शीट पर।

मैंने एक लाइट टेबल पर काम किया - एक ग्लास टॉप वाली ड्राइंग टेबल जिसमें अंतर्निर्मित प्रकाश व्यवस्था थी - ताकि मैं विभिन्न शीटों को सही ढंग से संरेखित करते हुए उनके माध्यम से देख सकूं।

यह बहुत समय लेने वाला था, लेकिन इसने रंगों को समझने में आजीवन रुचि पैदा की - और प्रिंट और स्क्रीन रंगों के बीच विशाल अंतर!

हालांकि सीएमवाईके चार रंगों तक सीमित है, फिर भी इसे समझना अपेक्षाकृत आसान है। हम सभी ने कागज पर रंगीन पेंसिलों का उपयोग किया है और हमें यह सहज ज्ञान है कि रंग कैसे मिश्रित होते हैं। CMYK एक subtractive रंग मॉडल है। आप कागज की एक सफेद शीट से शुरुआत करते हैं, और जैसे-जैसे आप अधिक स्याही जोड़ते हैं, आप वास्तव में प्रकाश घटा रहे होते हैं। सभी रंगों का मेल आपको काले रंग की ओर ले जाता है। यदि आप कोई स्याही नहीं लगाते हैं, तो कागज सफेद ही रहता है क्योंकि यह सारा प्रकाश परावर्तित कर देता है।

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

उस समय एक ग्राफ़िक डिज़ाइनर के रूप में, आपको अपनी स्क्रीन को कैलिब्रेट करना पड़ता था क्योंकि जो रंग आपने स्क्रीन पर देखे थे और जो आपने प्रिंट में देखे थे वे अक्सर बहुत भिन्न होते थे!

आरजीबी को विज़ुअलाइज़ करना

आरजीबी तीन प्रकाश स्रोतों का प्रतिनिधित्व करता है: लाल, हरा और नीला। जब एक लाइट बंद होती है, तो इसका मान 0 होता है; जब यह पूरी तरह से पर होता है, तो इसका मान 255 होता है। जब ये लाइटें ओवरलैप होती हैं, तो वे अलग-अलग रंग बनाती हैं।

आरजीबी कैसे काम करता है इसे बेहतर ढंग से समझने के लिए, आइए एक छोटा टूल बनाएं:

एचटीएमएल

शैलियों

सबसे पहले, आइए एक 9x8 ग्रिड बनाएं:

.rgb {
  all: unset;
  aspect-ratio: 9 / 8;
  container-type: inline-size;
  display: grid;
  font-size: 1.75cqi;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: 100%;
}

यह एक असामान्य आकार है, लेकिन ऐसा इसलिए है क्योंकि हमारे आर, जी और बी सर्कल 5x5 हैं और ओवरलैप:

.r, .g, .b {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: grid;
  font-size: 5cqi;
  mix-blend-mode: difference;
}

.r, .g और .b के लिए CSS है:

.r {
  background-color: rgb(var(--r), 0, 0);
  grid-area: 1 / 3 / 6 / 8;
}

.g {
  background-color: rgb(0, var(--g), 0);
  grid-area: 4 / 1 / 9 / 6;
}

.b {
  background-color: rgb(0, 0, var(--b));
  grid-area: 4 / 5 / 9 / 10;
}

मैंने हाल ही में ग्रिड-क्षेत्र का बहुत उपयोग किया है। यह आपको एक ग्रिड आइटम को एक बहुत ही विशिष्ट स्थान पर रखने की सुविधा देता है:

रो-स्टार्ट / कॉल-स्टार्ट / रो-एंड / कॉलम-एंड

यदि आप देव टूल्स के ग्रिड विज़ुअलाइज़र को सक्षम करते हैं तो इसे विज़ुअलाइज़ करना आसान है:

क्या आपने तीन सीएसएस कस्टम प्रॉपर्टीज़, --r, --g और --b पर ध्यान दिया? हम इन्हें एक छोटे JS स्निपेट में अपडेट करेंगे:

const rgb = document.querySelector('.rgb');
rgb.addEventListener('input', e => {
  const N = e.target;
  document.body.style.setProperty(`--${N.name}`, N.value);
})

और मूलतः यही है। मैंने कुछ -तत्व और छोटे समायोजन जोड़े हैं... लेकिन मैं विज़ुअलाइज़र को काम करने के लिए सबसे महत्वपूर्ण पंक्ति का उल्लेख करना लगभग भूल गया:

मिश्रण-मिश्रण-मोड: अंतर

इसके बारे में यहां पढ़ें - सभी तरीकों से लूप करना बहुत मजेदार है।

डेमो

यहां एक कोडपेन है। आर, जी और बी के नीचे संख्याओं पर क्लिक करें और संपादित करें, और देखें कि पृष्ठ की पृष्ठभूमि और तीनों मंडलों के ओवरलैपिंग भाग कैसे बदलते हैं।