एक ही रंग, चार अलग-अलग भाषाएँ

appstoryo

AppStoryo

lapnito.cz s.r.o.

blog/hex-vs-rgb-vs-hsl-vs-cmyk-which-color-format-to-use/hi

HEX बनाम RGB बनाम HSL बनाम CMYK: कौन-सा कलर फ़ॉर्मैट कब चुनें

Lubor Šimůnek

21032026

2026

lapnito.cz s.r.o.

CC BY 4.0

HEX, RGB, HSL और CMYK में क्या अंतर है? जानिए वेब, प्रिंट, UI डिज़ाइन और सोशल मीडिया के लिए कौन-सा कलर फ़ॉर्मैट चुनें — व्यावहारिक उदाहरणों के साथ।

डिज़ाइनarticleAppStoryo

एक ही रंग, चार अलग-अलग भाषाएँ

कोई भी रंग चुनिए — मान लीजिए एक गर्म कोरल शेड। अब उसे चार तरीकों से बताइए:

HEX: #E8635A

RGB: rgb(232, 99, 90)

HSL: hsl(4, 75%, 63%)

CMYK: 0, 57, 61, 9

ये चारों बिल्कुल एक ही रंग को दर्शाते हैं। ये आपस में प्रतिस्पर्धा करने वाले मानक नहीं हैं — ये रंग के अलग-अलग निरूपण हैं, जिनमें से हर एक किसी खास संदर्भ के लिए अनुकूलित है। भ्रम इसलिए पैदा होता है क्योंकि हमें पता नहीं होता कि किस स्थिति में कौन-सा फ़ॉर्मैट चाहिए।

यह गाइड हर फ़ॉर्मैट को सरल भाषा में समझाती है: वह क्या है, कैसे काम करता है, कब इस्तेमाल करना चाहिए और कब वह गलत चुनाव होता है। अगर आप किसी भी रूप में रंगों के साथ काम करते हैं — डिज़ाइन, डेवलपमेंट, प्रिंटिंग या मार्केटिंग — तो यह गाइड आपको अपने प्रोजेक्ट के लिए गलत फ़ॉर्मैट चुनने से बचा लेगी।

HEX: वेब का मानकयह क्या है

HEX (हेक्साडेसिमल) हैश चिह्न से शुरू होने वाला छह अक्षरों का कोड है: #E8635A। हर दो अक्षरों की जोड़ी लाल, हरे और नीले चैनल को बेस-16 नोटेशन (00 से FF तक) में दर्शाती है।

कार्य रूप में यह RGB के बिल्कुल समान है — बस लिखने का तरीका अलग है। #E8635A वही है जो rgb(232, 99, 90) है। HEX बस RGB मानों को लिखने का अधिक संक्षिप्त तरीका है।

HEX कब इस्तेमाल करें

CSS और वेब डेवलपमेंट — HEX, CSS में रंग लिखने का डिफ़ॉल्ट तरीका है। हर ब्राउज़र इसे समझता है। वेब पर रंग तय करने का सबसे आम तरीका color: #E8635A; ही है।

डिज़ाइन टूल — Figma, Sketch, Adobe XD और Canva सभी HEX को प्राथमिक इनपुट के रूप में लेते हैं। जब कोई डिज़ाइनर कहता है "यह नीला #3B82F6 है", तो सबको समझ आ जाता है।

ब्रांड गाइडलाइन — डिजिटल ब्रांड गाइड में लगभग हमेशा HEX मान दिए जाते हैं, क्योंकि वे छोटे, स्पष्ट और आसानी से कॉपी-पेस्ट किए जा सकते हैं।

तेज़ संवाद — Slack पर "#333 इस्तेमाल करो" लिखना "rgb(51, 51, 51) इस्तेमाल करो" से कहीं तेज़ है।

HEX कब इस्तेमाल न करें

जब पारदर्शिता चाहिए — मानक छह अंकों वाला HEX अल्फ़ा/ओपैसिटी को सपोर्ट नहीं करता। इसके लिए आठ अंकों वाला HEX (#E8635A80) चाहिए, जो पढ़ने में कठिन है, या फिर RGBA पर चले जाइए।

जब रंगों को प्रोग्राम से बदलना हो — "इसे 20% हल्का करो" जैसी गणना HEX में मन ही मन करना लगभग असंभव है। इसके लिए HSL कहीं बेहतर है।

प्रिंट प्रोडक्शन — प्रिंटर HEX का इस्तेमाल नहीं करते। कभी नहीं।

वास्तविक उदाहरण

मान लीजिए आप किसी लैंडिंग पेज के लिए CSS लिख रहे हैं। डिज़ाइनर आपको ब्रांड रंगों वाली स्टाइल गाइड देता है और आप लिखते हैं:

:root { --primary: #E8635A; --secondary: #2D3748; --accent: #F6AD55; }

यहाँ HEX एकदम सही है: संक्षिप्त, पढ़ने में आसान और हर जगह समर्थित।

RGB: स्क्रीन का कलर मॉडलयह क्या है

RGB का अर्थ है Red, Green, Blue — प्रकाश के वे तीन रंग जिन्हें मिलाकर स्क्रीन हर वह रंग बनाती है जो आप देखते हैं। हर चैनल का मान 0 से 255 तक होता है। rgb(232, 99, 90) का अर्थ है 232 इकाई लाल, 99 इकाई हरा और 90 इकाई नीला।

RGB हर डिजिटल रंग की नींव है। HEX तो बस अलग नोटेशन में लिखा गया RGB है, और HSL, RGB का मानव-अनुकूल रूपांतरण है। आपकी स्क्रीन पर दिखने वाली हर चीज़ अंततः पिक्सलों तक भेजे जाने वाले RGB मानों में बदल जाती है।

RGB कब इस्तेमाल करें

जब पारदर्शिता चाहिए — RGBA एक अल्फ़ा चैनल जोड़ता है: 50% ओपैसिटी के लिए rgba(232, 99, 90, 0.5)। यह आठ अंकों वाले HEX से कहीं साफ़ है और CSS, डिज़ाइन टूल तथा प्रोग्रामिंग भाषाओं में व्यापक रूप से समर्थित है।

प्रोग्रामिंग और ऐप डेवलपमेंट — Swift, Kotlin, Flutter, React Native जैसे ऐप फ़्रेमवर्क आमतौर पर भीतर से RGB/RGBA मानों के साथ काम करते हैं।

LED और लाइटिंग — स्मार्ट लाइटें (Philips Hue, LED स्ट्रिप्स) RGB मानों का उपयोग करती हैं। अगर आप भौतिक प्रकाश व्यवस्था डिज़ाइन कर रहे हैं, तो RGB ही मूल फ़ॉर्मैट है।

रंगों का गणित — रंग मिलाना, ग्रेडिएंट को इंटरपोलेट करना या प्रोग्राम से रंग बनाना — RGB में यह सब सीधा-सादा है।

RGB कब इस्तेमाल न करें

प्रिंट — स्क्रीन प्रकाश उत्सर्जित करती है (योगात्मक मिश्रण), जबकि कागज़ उसे परावर्तित करता है (व्यवकलनात्मक मिश्रण)। इसलिए RGB यह सटीक रूप से नहीं दिखा सकता कि प्रिंटर से क्या निकलेगा।

लाइटनेस या सैचुरेशन बदलना — "इस रंग का सैचुरेशन 30% घटाओ" RGB में बिल्कुल सहज नहीं है। इसके लिए पहले HSL में बदलना पड़ेगा।

वास्तविक उदाहरण

मान लीजिए आप React Native ऐप बना रहे हैं और आपको एक अर्ध-पारदर्शी ओवरले चाहिए:

backgroundColor: 'rgba(0, 0, 0, 0.6)'

अल्फ़ा के साथ RGB यहाँ स्वाभाविक चुनाव है — सीधा, पढ़ने में आसान और रेंडरिंग इंजन के लिए मूल फ़ॉर्मैट।

HSL: डिज़ाइनर का फ़ॉर्मैटयह क्या है

HSL का अर्थ है Hue (वर्ण), Saturation (संतृप्ति), Lightness (चमक):

Hue (0°–360°) — रंग स्वयं, यानी कलर व्हील पर उसकी स्थिति। 0° लाल है, 120° हरा और 240° नीला।

Saturation (0%–100%) — रंग कितना चटख है। 0% स्लेटी है और 100% उस वर्ण का शुद्धतम रूप।

Lightness (0%–100%) — रंग कितना हल्का या गहरा है। 0% काला, 100% सफ़ेद और 50% उस रंग का "असली" रूप।

hsl(4, 75%, 63%) का अर्थ है: लाल की ओर झुका वर्ण (4°), बेहद चटख (75% संतृप्त) और थोड़ा हल्का (63%)।

HSL कब इस्तेमाल करें

डिज़ाइन सिस्टम और थीमिंग — एक जैसे कलर स्केल बनाने के लिए HSL सबसे बढ़िया फ़ॉर्मैट है। अपने प्राथमिक रंग के दस शेड चाहिए? वर्ण वही रखिए और लाइटनेस को 10% से 95% तक बदलिए। हल्का-फीका संस्करण चाहिए? संतृप्ति घटा दीजिए। HEX या RGB में यह सहजता से करना लगभग असंभव है।

डार्क मोड / लाइट मोड — थीम बदलने का मतलब है लाइटनेस और सैचुरेशन को समायोजित करना, जो सीधे HSL के पैरामीटरों से जुड़ा है। Tailwind CSS, Radix Colors और कई आधुनिक डिज़ाइन सिस्टम HSL पर ही बने हैं।

प्रोग्राम से रंग बनाना — एक ही आधार रंग से हॉवर स्टेट, डिसेबल्ड स्टेट, बैकग्राउंड और बॉर्डर बनाना HSL में बेहद आसान है: हल्के रूप के लिए hsl(4, 75%, 73%) और गहरे रूप के लिए hsl(4, 75%, 43%)।

सुगम्यता — जब आप लाइटनेस को सीधे देख और बदल सकते हैं, तो कंट्रास्ट अनुपात की जाँच कहीं अधिक सहज हो जाती है।

HSL कब इस्तेमाल न करें

टीमों के बीच संवाद — ज़्यादातर लोग डिग्री और प्रतिशत में रंग नहीं सोचते। डिज़ाइन हैंडऑफ़ में "बटन hsl(4, 75%, 63%) है" कहना "बटन #E8635A है" कहने से कम स्पष्ट होता है।

प्रिंट — RGB की ही तरह HSL भी स्क्रीन का कलर मॉडल है।

वास्तविक उदाहरण

मान लीजिए आप Tailwind CSS में डिज़ाइन सिस्टम बना रहे हैं और आपको एक सुसंगत कलर स्केल चाहिए:

--brand-50: hsl(4, 75%, 95%); --brand-100: hsl(4, 75%, 90%); --brand-200: hsl(4, 75%, 80%); --brand-500: hsl(4, 75%, 63%); --brand-700: hsl(4, 75%, 43%); --brand-900: hsl(4, 75%, 25%);

वही वर्ण, वही संतृप्ति, अलग-अलग लाइटनेस। 30 सेकंड में एकदम सटीक स्केल तैयार। यही काम HEX में करके देखिए।

CMYK: प्रिंट का फ़ॉर्मैटयह क्या है

CMYK का अर्थ है Cyan, Magenta, Yellow, Key (काला)। यह रंग को सफ़ेद कागज़ पर लगाई गई स्याही के मिश्रण के रूप में बताता है। हर मान 0% से 100% तक होता है: 0, 57, 61, 9 का अर्थ है 0% सायन, 57% मैजेंटा, 61% पीला और 9% काला।

RGB (जो रंग बनाने के लिए प्रकाश जोड़ता है) के विपरीत, CMYK सफ़ेद कागज़ में से घटाता है। जितनी ज़्यादा स्याही, उतना गहरा रंग। इसीलिए इसे व्यवकलनात्मक कलर मॉडल कहा जाता है।

CMYK कब इस्तेमाल करें

प्रिंट डिज़ाइन — विज़िटिंग कार्ड, ब्रोशर, पैकेजिंग, पोस्टर, पत्रिकाएँ। किसी भी व्यावसायिक प्रिंटर को भेजी जाने वाली फ़ाइल CMYK कलर मोड में होनी चाहिए।

InDesign, Illustrator में प्रिंट के लिए फ़ाइल तैयार करना — ये टूल आपको CMYK मोड में काम करने देते हैं ताकि आप देख सकें कि रंग कागज़ पर कैसे दिखेंगे (जो स्क्रीन की तुलना में हमेशा कम चटख होते हैं)।

कलर प्रूफ़िंग — यह जाँचना कि आपके डिज़ाइन के रंग CMYK में दोबारा बन सकते हैं या नहीं। कुछ चटख RGB रंग (खासकर नियॉन हरे और इलेक्ट्रिक नीले) CMYK में छापना भौतिक रूप से असंभव है — वे "गैमट के बाहर" चले जाते हैं।

CMYK कब इस्तेमाल न करें

स्क्रीन पर दिखने वाली किसी भी चीज़ के लिए — वेबसाइट, ऐप, सोशल मीडिया, प्रेज़ेंटेशन, ईमेल। स्क्रीन RGB इस्तेमाल करती है। किसी वेबसाइट के लिए CMYK बताना वैसा ही है जैसे रास्ता समझाते समय दूरी नॉटिकल मील में बताना — तकनीकी रूप से दूरी तो है, पर उस सफ़र के लिए बेकार।

फ़ोटो एडिटिंग — एडिटिंग RGB में कीजिए और CMYK में सिर्फ़ प्रिंट के अंतिम एक्सपोर्ट चरण पर बदलिए।

वास्तविक उदाहरण

आपने Illustrator में एक पोस्टर डिज़ाइन किया। प्रिंटर को भेजने से पहले आप दस्तावेज़ को CMYK कलर मोड में बदलते हैं (File → Document Color Mode → CMYK Color), गैमट के बाहर जाने की चेतावनियाँ जाँचते हैं और उन इलेक्ट्रिक नीले रंगों को ठीक करते हैं जो मटमैले टील में बदल गए हैं। अंतिम PDF प्रिंटर की ICC प्रोफ़ाइल के साथ CMYK में सहेजी जाती है।

त्वरित संदर्भ तालिका

फ़ॉर्मैट	किसके लिए सर्वोत्तम	परास	पारदर्शिता समर्थन	पढ़ने में आसानी	प्रिंट के लिए उपयुक्त
HEX	वेब, CSS, ब्रांड गाइड	#000000 – #FFFFFF	केवल आठ अंकों में (#RRGGBBAA)	मध्यम	नहीं
RGB	स्क्रीन, ऐप, ग्रेडिएंट	प्रति चैनल 0–255	हाँ (RGBA)	मध्यम	नहीं
HSL	डिज़ाइन सिस्टम, थीमिंग	0°–360°, 0%–100%, 0%–100%	हाँ (HSLA)	उच्च	नहीं
CMYK	प्रिंट, पैकेजिंग	प्रति चैनल 0%–100%	नहीं	कम	हाँ

चीट शीट: किस काम के लिए कौन-सा फ़ॉर्मैट

आपका प्रोजेक्ट	यह फ़ॉर्मैट इस्तेमाल करें	क्यों
वेबसाइट CSS	HEX या HSL	सरलता के लिए HEX; थीमिंग वाले डिज़ाइन सिस्टम के लिए HSL
मोबाइल ऐप (iOS/Android)	RGB/RGBA	नेटिव फ़्रेमवर्क भीतर से RGB इस्तेमाल करते हैं
Figma / Sketch डिज़ाइन फ़ाइल	HEX	डिज़ाइन टूल में मानक इनपुट
डिज़ाइन सिस्टम / टोकन	HSL	HSL में स्केल और वैरिएंट बनाना बेहद आसान है
सोशल मीडिया ग्राफ़िक्स	HEX या RGB	केवल डिजिटल; Canva और Photoshop दोनों स्वीकारते हैं
विज़िटिंग कार्ड / ब्रोशर	CMYK	यह भौतिक प्रिंटर तक जा रहा है
प्रोडक्ट पैकेजिंग	CMYK + Pantone	प्रिंट के साथ ब्रांड रंग की एकरूपता
ईमेल टेम्पलेट	HEX	ईमेल क्लाइंट HEX को भरोसेमंद ढंग से सपोर्ट करते हैं
स्मार्ट लाइट / LED	RGB	LED हार्डवेयर मूल रूप से RGB इस्तेमाल करता है
ब्रांड गाइडलाइन दस्तावेज़	चारों	अलग-अलग टीमों को अलग-अलग फ़ॉर्मैट चाहिए

क्या इन्हें आपस में बदला जा सकता है?

हाँ — कुछ शर्तों के साथ।

HEX ↔ RGB — बिना किसी हानि के, क्योंकि ये एक ही डेटा के दो अलग नोटेशन हैं।

RGB ↔ HSL — बिना किसी हानि के, यह महज़ एक गणितीय रूपांतरण है।

RGB → CMYK — हानिकारक रूपांतरण। कुछ RGB रंग (चटख नीले, नियॉन, चमकीले हरे) CMYK में दोबारा नहीं बनाए जा सकते। रूपांतरण उन्हें निकटतम छपने योग्य रंग में बदल देगा, जो अक्सर फीका दिखता है।

CMYK → RGB — तकनीकी रूप से संभव है, पर परिणाम इस्तेमाल की गई ICC प्रोफ़ाइल पर निर्भर करता है। एक ही CMYK इनपुट के लिए दो कन्वर्टर थोड़े अलग RGB मान दे सकते हैं।

चलते-फिरते तेज़ रूपांतरण के लिए ऐसा फ़ोन कलर पिकर सबसे तेज़ तरीका है जो चारों फ़ॉर्मैट एक साथ दिखाए। Color Picker Camera: HEX RGB ठीक यही करता है — कैमरा किसी भी रंग पर ताकिए और HEX, RGB, HSL तथा CMYK साथ-साथ देखिए। एक टैप में कोई भी मान कॉपी हो जाता है। यह iPhone और Android दोनों पर उपलब्ध है।

आम गलतियाँ1. प्रिंट के लिए RGB में डिज़ाइन करना

यह शुरुआती लोगों की सबसे जानी-मानी भूल है। आप Photoshop में RGB मोड में एक चटख पोस्टर बनाते हैं, प्रिंटर को भेजते हैं और नतीजा फीका दिखता है — खासकर हरे और नीले रंग। प्रिंट के लिए एक्सपोर्ट करने से पहले हमेशा CMYK में बदलिए और गैमट चेतावनियाँ जाँचिए।

2. पारदर्शिता चाहिए, फिर भी HEX इस्तेमाल करना

अगर आपके डिज़ाइन में अर्ध-पारदर्शी ओवरले, छाया या ग्लासमॉर्फ़िज़्म प्रभाव चाहिए, तो RGBA या HSLA पर जाइए। मानक छह अंकों वाला HEX ओपैसिटी की जानकारी नहीं रखता, और आठ अंकों वाला HEX पढ़ने में कठिन होने के कारण शायद ही इस्तेमाल होता है।

3. HEX में डिज़ाइन सिस्टम बनाना

"#3B82F6 लेकिन 20% हल्का" के लिए रूपांतरण, गणना और फिर से रूपांतरण करना पड़ता है। HSL में: बस लाइटनेस 20% बढ़ा दीजिए। डिज़ाइन टोकन, थीम जनरेटर और आधुनिक CSS कस्टम प्रॉपर्टीज़ HSL के साथ कहीं बेहतर काम करती हैं।

4. वेब के लिए CMYK को HEX में बदलकर वही रंग की उम्मीद करना

जो ब्रांड प्रिंट के लिए CMYK में तय किया गया हो, उसे सीधे-सीधे HEX में बदलने पर वह वेब पर अलग दिखेगा। सही तरीका यह है: स्क्रीन पर रंग को छपे हुए संस्करण से आँख से मिलाइए, फिर डिजिटल इस्तेमाल के लिए अलग HEX मान तय कीजिए। ब्रांड गाइडलाइन में दोनों होने चाहिए।

अक्सर पूछे जाने वाले सवालHEX और RGB में क्या अंतर है?

रंग में कोई अंतर नहीं — सिर्फ़ लिखने के तरीके में है। HEX उन्हीं लाल/हरे/नीले मानों को बेस-16 में लिखता है। #FF0000 बिल्कुल rgb(255, 0, 0) के समान है। HEX टाइप करने में छोटा है; RGB को प्रोग्राम से बदलना आसान है और वह अल्फ़ा चैनल (RGBA) भी सपोर्ट करता है।

मुझे RGB के बजाय CMYK कब इस्तेमाल करना चाहिए?

जब भी आपका अंतिम आउटपुट किसी भौतिक सामग्री पर छपना हो — कागज़, गत्ता, कपड़ा, प्लास्टिक। अगर वह स्क्रीन तक ही सीमित है तो RGB (या HEX/HSL) इस्तेमाल कीजिए। और अगर वह छपेगा, तो एक्सपोर्ट के चरण पर CMYK में चले जाइए।

क्या HSL, HEX से बेहतर है?

डिज़ाइन सिस्टम, थीमिंग और रंगों में फेरबदल के लिए — हाँ। तेज़ संवाद और टूल में कॉपी-पेस्ट के लिए HEX ज़्यादा व्यावहारिक है। दोनों एक ही रंग बताते हैं; HSL बस जानकारी को उस क्रम में सजाता है जिस तरह इंसान रंग के बारे में सोचता है (वर्ण → चटख़पन → चमक)।

क्या मेरा फ़ोन चारों फ़ॉर्मैट एक साथ दिखा सकता है?

हाँ। Color Picker Camera: HEX RGB आपके कैमरे या फ़ोटो से रंग पकड़ता है और HEX, RGB, HSL तथा CMYK एक साथ दिखाता है। किसी भी मान पर टैप कीजिए और वह कॉपी हो जाएगा। यह वास्तविक दुनिया के लिए कलर फ़ॉर्मैट कैलकुलेटर की तरह काम करता है — एक कैप्चर, चार फ़ॉर्मैट।

निष्कर्ष

वेब और तेज़ संवाद के लिए HEX। ऐप डेवलपमेंट और पारदर्शिता के लिए RGB। डिज़ाइन सिस्टम और रंगों में फेरबदल के लिए HSL। प्रिंट के लिए CMYK।

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

iPhone के लिए Color Picker Camera डाउनलोड करें | Android के लिए डाउनलोड करें