RGB काफ़ी नहीं: HSL, CMYK और OKLCH रंग संकेतन

पिछली पोस्ट, कंप्यूटर रंग कैसे बनाता है: RGB, HEX और बाइनरी की कहानी, में हमने देखा कि एक रंग केवल तीन संख्याएँ होती हैं — लाल, हरा, नीला, प्रत्येक 0–255 के बीच। स्क्रीनें इन संख्याओं पर बिना किसी दिक्कत के चलती हैं। लेकिन जैसे ही कोई इंसान रंग के साथ काम करने लगता है, RGB जल्दी ही असहज हो जाती है।

RGB सुविधाजनक है, पर सहज नहीं

“थोड़ा और चमकदार लाल।” RGB से यह कैसे बनाएँ? तीनों चैनल एक साथ थोड़े-थोड़े बढ़ाने होंगे। “सिर्फ़ saturation थोड़ा कम करना है” — RGB देखकर पता नहीं चलता क्या घटाएँ। “यह रंग कागज़ पर हूबहू छापो” — RGB से यह संभव ही नहीं।

इन्हीं समस्याओं को हल करने के लिए दूसरी रंग प्रणालियाँ आईं।

HSL — इंसान की सोच का तरीका

HSL रंग को रंगत · गहराई · चमक तीन भागों में बाँटकर देखता है। hsl(14, 100%, 60%) वही #FF5733 है, लेकिन यहाँ हर हिस्से का स्रोत साफ़ है।

कंप्यूटर की भाषा RGB है — designer की भाषा HSL है। एक ही रंग को “क्या बदलना है” उस नज़रिए से देखा जा सकता है।

Hue — रंगत 360° का एक चक्र है

रंगत घड़ी की तरह एक चक्कर लगाती है। 0° से शुरू, 360° तक। 0° और 360° एक ही लाल हैं।

Saturation — चमक की गहराई

एक ही रंगत में saturation घटाने पर रंग धीरे-धीरे धूसर होता जाता है।

Lightness — काले से सफ़ेद तक

L 0% हो तो हमेशा काला, 100% हो तो हमेशा सफ़ेद। 50% वह रंग की “मूल” चमक है।

HSL का असली फ़ायदा — palette बनाना

एक ही Hue रखकर सिर्फ़ L बदलने से स्वाभाविक रूप से मिलती-जुलती रंग-शृंखला बनती है। RGB से यही काम करने के लिए 9 खाने अलग-अलग हाथ से गणना करने पड़ते, लेकिन HSL में बस L को 12% → 92% तक चरण-दर-चरण बदलना काफ़ी है।

ऊपर के दोनों palette एक-एक लाइन में बनाए जा सकते हैं।

:root {
  --terra-100: hsl(14 60% 92%);
  --terra-200: hsl(14 60% 82%);
  --terra-300: hsl(14 60% 72%);
  /* ... सिर्फ़ L 10-10 बदलें */
}

Design system बनाते वक़्त HSL सबसे ज़्यादा काम का होता है।

CMYK — स्याही की भाषा

स्क्रीन नहीं, कागज़ पर रंग चाहिए तो एकदम अलग प्रणाली चाहिए। CMYK वह चार स्याहियों का अनुपात है जो प्रिंटशॉप उपयोग करती है।

काले को “B” नहीं “K” क्यों कहते हैं? क्योंकि B से Blue का भ्रम होता। और यह “Key plate” नामक छपाई शब्द से आया — वह प्लेट जिस पर दूसरी स्याहियाँ align होती हैं।

प्रकाश जोड़ने से चमक बढ़ती है, स्याही जोड़ने से अँधेरा

RGB और CMYK का सबसे बड़ा अंतर मिश्रण की विधि है।

लाल स्याही लाल इसलिए दिखती है क्योंकि वह बाकी प्रकाश अवशोषित कर लेती है और केवल लाल परावर्तित करती है। स्याही प्रकाश घटाने का काम करती है। इसीलिए स्याही मिलाते जाएँ तो रंग गहरा होता जाता है। सिद्धांतः CMY तीनों मिलाएँ तो काला बनना चाहिए, लेकिन असल में गाढ़ा भूरा निकलता है। इसीलिए असली काली स्याही (K) अलग रखी जाती है।

CMYK कहाँ उपयोग होता है?

Screen design करते हों तो CMYK से शायद ही पाला पड़े। यह केवल कागज़ पर छपाई के समय आता है।

• प्रिंटशॉप को फ़ाइल देते वक़्त — विज़िटिंग कार्ड, पोस्टर, किताब, पैकेजिंग। प्रिंटशॉप RGB फ़ाइल मिलने पर CMYK में बदलती है।
• Photoshop / Illustrator में print कार्य करते समय — शुरू से रंग-मोड CMYK रखें।
• Brand guide — screen के लिए HEX और print के लिए CMYK दोनों लिखे जाते हैं। एक ही brand color दोनों माध्यमों में मिलता-जुलता दिखना चाहिए।

स्क्रीन और प्रिंट के रंग अलग क्यों होते हैं — Gamut

स्क्रीन का रंग-दायरा (RGB gamut) और स्याही का रंग-दायरा (CMYK gamut) अलग हैं। स्क्रीन पर चटख नियॉन-पिंक प्रिंट करने पर वैसा नहीं आता — वह रंग स्याही से बनता ही नहीं।

इसीलिए print designer काम से पहले केवल CMYK के दायरे में आने वाले रंग चुनते हैं। RGB में बने design को सीधे print करने पर रंग फ़ीके लगने की शिकायत आम है।

CMYK मान ऐसे लिखते हैं

हर स्याही को कितने प्रतिशत छिड़कना है यह लिखते हैं। 0% मतलब नहीं, 100% मतलब पूरा।

गहरे काले के लिए केवल K 100% उपयोग करें तो धूसर-भूरा जैसा काला मिलता है। इसीलिए प्रिंटशॉप में CMY भी साथ डालकर और गहरा काला बनाया जाता है।

OKLCH — इंसान के निर्देशांक

2020 के दशक में पूरी तरह उभरा रंग-मॉडल। एकमात्र कीवर्ड — “मानव आँख के लिए स्वाभाविक।”

तीन निर्देशांक HSL जैसे नाम के हैं।

• L — Lightness (चमक, 0–1)
• C — Chroma (गहराई, 0–लगभग 0.4)
• H — Hue (रंगत, 0–360°)

लेकिन HSL में एक छिपी समस्या है। एक ही L = 50% पर भी अलग-अलग रंगों की महसूस होने वाली चमक बिल्कुल अलग होती है। सीधे तुलना करते हैं।

एक पंक्ति में — RGB और HSL मशीन के निर्देशांक। OKLCH इंसान के निर्देशांक।

L · C · H, प्रत्येक की भूमिका

एक ही रंग में एक-एक निर्देशांक बदलने पर क्या होता है, देखते हैं।

कहाँ उपयोग होता है?

• एकसमान चमक वाला palette — 8 category रंगों को सब एक-सी चमक पर रखना हो
• Dark/Light mode स्वचालित रूपांतरण — केवल L उलटा करने से स्वाभाविक dark theme बन जाती है
• Accessibility — text और background की चमक का अंतर सटीक अनुमानित किया जा सकता है
• Gradient — बीच में धूसर पट्टी आए बिना स्वाभाविक प्रवाह

CSS Color Level 4 से आधिकारिक रूप से अपनाया गया, नए browsers में सीधे उपयोग किया जा सकता है।

.btn { background: oklch(67% 0.18 30); }       /* नारंगी */
.btn:hover { background: oklch(60% 0.18 30); } /* L 7 घटाएँ → ठीक उतना ही गहरा */

क्या कब उपयोग करें?

अधिकांश digital कार्यों में RGB/HEX पर्याप्त है। HSL palette बनाते वक़्त याद रखें, और OKLCH dark/light mode design में बहुत काम आता है।

fns में रंग कैसे प्रबंधित करें?

रंग संख्या है यह जानने के बाद, अगला कदम है — अपने बार-बार उपयोग होने वाले रंगों को उँगलियों की नोक पर रखना। fns रंग निकालने·सहेजने·दोबारा उपयोग करने का पूरा प्रवाह एक key के पीछे समेटता है।

स्क्रीन पर कहीं भी रंग पकड़ें — Eyedropper ⌘+Shift+K

Eyedropper स्क्रीन के किसी भी pixel का सटीक रंग पकड़ने का औज़ार है। Figma/Photoshop के अंदर ही उपलब्ध picker को पूरे सिस्टम में लाने जैसा है।

⌘+Shift+K दबाएँ और स्क्रीन पर कहीं भी fns का Eyedropper प्रकट हो जाता है। Design फ़ाइल का कोई pixel, फ़ोटो का कोई हिस्सा, किसी दूसरे app की पृष्ठभूमि का रंग — माउस ले जाकर click करने पर उस जगह का रंग सटीक पकड़ा जाता है।

• हर click पर clipboard में स्वतः सहेजा जाता है। अलग से “copy” करने की ज़रूरत नहीं।
• Eyedropper widget में चुनें कि RGB / HEX / HSL / CMYK / OKLCH में से कौन-सा प्रारूप clipboard में जाए।
• पकड़े गए रंग का visual preview और नज़दीकी system रंग भी दिखाए जाते हैं।

Eyedropper → clipboard में स्वतः सहेजना → clipboard picker से दोबारा निकालना — प्रवाह कहीं नहीं टूटता। Mac के built-in Digital Color Meter की तरह अलग से खोलने की या हर बार copy shortcut दबाने की ज़रूरत नहीं।

Clipboard रंग स्वतः पहचानता है

fns का clipboard history copy किया गया text रंग कोड है या नहीं, स्वतः पहचान लेता है। प्रारूप से फ़र्क नहीं पड़ता।

copy किया गया रंग history से दोबारा निकालते वक़्त, सिर्फ़ text देखकर याद नहीं रहता कि कौन-सा रंग था। fns हर item के बगल में एक छोटा color chip दिखाता है, एक नज़र में पता चलता है।

सिर्फ़ रंग देखें

एक key से clipboard history में से केवल रंग कोड filter करके देखे जा सकते हैं। Design के दौरान हाल में उपयोग किए रंग देखने हों तो text·URL·code के बीच खोजना नहीं पड़ता।

• उसी picker में color: जैसा filter keyword → केवल रंग items दिखें
• रंग के नाम से search — “blue”, “red” खोजने पर उस रंग की श्रेणी ही दिखती है
• मिलते-जुलते रंग visually एक साथ समूहीकृत

एक रंग को दूसरे प्रारूप में

एक ही रंग को दूसरे प्रारूप में रूपांतरित करके निकाला जा सकता है। Figma से #FF5733 copy किया, फिर CSS में rgb(...) रूप में paste करना हो — fns clipboard picker में वह item चुनें, shortcut एक बार दबाएँ और स्वतः रूपांतरित।

Figma (HSB) और CSS (HSL/HEX/OKLCH) के बीच आते-जाते हर बार converter खोलने की ज़रूरत नहीं।

Text expansion और समूहन

बार-बार उपयोग होने वाले brand colors को text shortcut में दर्ज करें।

CSS, Figma के color input, Slack message, code editor — कहीं भी वही shortcut काम करती है। Brand guide का रंग हर बार खोजकर copy करने का समय ख़त्म।

हर बार converter खोलकर रंग कोड दूसरे प्रारूप में ले जाने का वक़्त, एक बार fns से कम करके देखें।

जानना चाहते हैं ये संख्याएँ आती कहाँ से हैं — RGB के तीन चैनलों, बाइनरी और HEX संकेतन की बुनियाद? शुरू करें कंप्यूटर रंग कैसे बनाता है: RGB, HEX और बाइनरी की कहानी से।