HEX vs RGB vs HSL vs CMYK: कौन सा कलर फॉर्मेट कब इस्तेमाल करें

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

इस कोरल रंग को देखें। यह बिल्कुल एक ही रंग है, लेकिन इसे चार अलग-अलग तरीकों से लिखा जा सकता है:

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

यह गाइड वास्तविक उदाहरणों और त्वरित संदर्भ तालिकाओं के साथ बताता है कि कौन सा फॉर्मेट कब इस्तेमाल करना चाहिए।

HEX: वेब का मानक

यह क्या है: एक 6 अंकों का हेक्साडेसिमल कोड जो लाल, हरा और नीला मान दर्शाता है। हमेशा # से शुरू होता है। उदाहरण: #FF6F61 का मतलब है लाल 255, हरा 111, नीला 97।

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

• CSS स्टाइलशीट — अधिकांश वेब डेवलपर्स इस्तेमाल करते और उम्मीद करते हैं।
• डिज़ाइन टूल्स — Figma, Sketch और Canva अपने कलर पिकर में HEX प्रमुखता से दिखाते हैं।
• ब्रांड गाइडलाइन — अधिकांश ब्रांड गाइडलाइन HEX में रंग सूचीबद्ध करती हैं क्योंकि यह छोटा और कॉपी-पेस्ट आसान है।
• संवाद — Slack या ईमेल पर सटीक रंग साझा करने के लिए HEX विश्व स्तर पर समझा जाता है।

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

• जब पारदर्शिता चाहिए — HEX मूल रूप से अल्फा को सपोर्ट नहीं करता। 8 अंकों का HEX (#FF6F6180) इस्तेमाल किया जा सकता है लेकिन टूल्स में सपोर्ट असंगत है।
• प्रोग्रामेटिक कलर मैनिपुलेशन — HEX रंग को हल्का या गहरा करने के लिए पहले कंवर्जन जरूरी है।
• प्रिंट डिज़ाइन — प्रिंट CMYK का इस्तेमाल करता है। HEX को प्रिंटर को भेजने से रंग असंगति की गारंटी है।

वास्तविक उदाहरण: CSS वेरिएबल्स

:root {
  --brand-primary: #FF6F61;
  --brand-dark: #CC5850;
  --brand-light: #FF9A91;
  --text-on-primary: #FFFFFF;
}

.button-primary {
  background-color: var(--brand-primary);
  color: var(--text-on-primary);
}

RGB: स्क्रीन कलर मॉडल

यह क्या है: तीन संख्याएँ (0–255) जो लाल, हरा और नीला दर्शाती हैं — आपकी स्क्रीन द्वारा उत्सर्जित वास्तविक प्रकाश रंग। उदाहरण: rgb(255, 111, 97)।

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

• पारदर्शिता (RGBA) — rgba(255, 111, 97, 0.5) अपारदर्शिता पर सटीक नियंत्रण देता है। CSS में अर्ध-पारदर्शी रंगों के लिए सबसे व्यापक रूप से समर्थित विधि।
• एप डेवलपमेंट — Swift, Kotlin और Flutter आंतरिक रूप से RGB मानों का उपयोग करते हैं। RGB में काम करने से अनावश्यक कंवर्जन से बचा जाता है।
• LED लाइटिंग और IoT — LED स्ट्रिप्स और स्मार्ट बल्ब RGB मानों की अपेक्षा करते हैं।
• कलर गणित — दो रंगों को मिलाना या इंटरपोलेट करना RGB में सरल अंकगणित है।

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

• प्रिंट डिज़ाइन — RGB मान सीधे स्याही मिश्रण से मेल नहीं खाते। प्रिंटर को भेजने से पहले हमेशा CMYK में कंवर्ट करें।
• सैचुरेशन या ब्राइटनेस एडजस्ट करना — RGB में सैचुरेशन बदलने के लिए जटिल सूत्र चाहिए। HSL इसके लिए बहुत आसान है।

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

const Colors = {
  coral: 'rgba(255, 111, 97, 1.0)',
  coralFaded: 'rgba(255, 111, 97, 0.5)',
  coralOverlay: 'rgba(255, 111, 97, 0.15)',
};

<View style={{ backgroundColor: Colors.coralOverlay }}>
  <Text style={{ color: Colors.coral }}>Hello</Text>
</View>

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

यह क्या है: तीन मान — ह्यू (0–360°, कलर व्हील पर स्थिति), सैचुरेशन (0–100%, ग्रे से चमकदार तक) और लाइटनेस (0–100%, काले से सफेद तक)। उदाहरण: hsl(5, 100%, 69%)।

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

• डिज़ाइन सिस्टम — ह्यू और सैचुरेशन को स्थिर रखकर और केवल लाइटनेस बदलकर एक पूर्ण कलर स्केल बनाएं।
• डार्क मोड — डार्क वेरिएंट बनाना लाइटनेस कम करने जितना सरल है। कोई अंदाजा नहीं, कोई सूत्र नहीं।
• प्रोग्रामेटिक कलर जेनरेशन — 12 समान दूरी वाले रंग चाहिए? सैचुरेशन और लाइटनेस वही रखकर ह्यू को 30° बढ़ाएं।
• एक्सेसिबिलिटी — लाइटनेस मान सीधे पढ़ सकते हैं तो कंट्रास्ट जाँचना अधिक सहज होता है।

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

• टीम संवाद — अधिकांश लोग ह्यू/सैचुरेशन/लाइटनेस में नहीं सोचते। बातचीत में HEX या RGB अक्सर स्पष्ट होते हैं।
• प्रिंट वर्कफ़्लो — HSL का प्रिंट में कोई सीधा समतुल्य नहीं है। पहले CMYK में कंवर्ट करें।

वास्तविक उदाहरण: Tailwind CSS कलर स्केल

/* tailwind.config.js */
module.exports = {
  theme: {
    extend: {
      colors: {
        coral: {
          50:  'hsl(5, 100%, 95%)',
          100: 'hsl(5, 100%, 90%)',
          200: 'hsl(5, 100%, 82%)',
          300: 'hsl(5, 100%, 75%)',
          400: 'hsl(5, 100%, 69%)', /* base */
          500: 'hsl(5, 85%, 58%)',
          600: 'hsl(5, 70%, 48%)',
          700: 'hsl(5, 65%, 38%)',
          800: 'hsl(5, 60%, 28%)',
          900: 'hsl(5, 55%, 18%)',
        }
      }
    }
  }
}

CMYK: प्रिंट फॉर्मेट

यह क्या है: चार मान — सायन, मैजेंटा, येलो और ब्लैक (Key)। RGB (जो रोशनी जोड़ता है) के विपरीत, CMYK सब्ट्रैक्टिव है — यह बताता है कि सफेद कागज से कितनी स्याही रोशनी सोखती है। उदाहरण: 0, 56, 62, 0।

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

• हर प्रिंटेड चीज़ — विजिटिंग कार्ड, पोस्टर, पैकेजिंग, पत्रिकाएं। अगर प्रिंटर से गुजरता है तो CMYK होना चाहिए।
• InDesign और प्रिंट वर्कफ़्लो — रंग सीमा से बाहर के रंगों से आश्चर्य से बचने के लिए शुरू से CMYK में डिज़ाइन करें।
• कलर प्रूफिंग — स्क्रीन प्रूफ प्रिंटर आउटपुट का अनुकरण करते हैं — जो तभी काम करता है जब स्रोत रंग पहले से CMYK में हों।

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

• स्क्रीन — मॉनिटर रोशनी (RGB) का इस्तेमाल करते हैं। CMYK मानों को कंवर्ट करना पड़ता है, और कंवर्जन हमेशा अनुमानित होता है।
• फोटो एडिटिंग — एडिटिंग के दौरान RGB में काम करें। प्रिंट करने पर अंतिम चरण के रूप में ही CMYK में कंवर्ट करें।

वास्तविक उदाहरण: Illustrator से एक्सपोर्ट

/* Illustrator: File > Document Color Mode > CMYK */
/* Export settings for print-ready PDF: */

Color mode:      CMYK
Profile:         U.S. Web Coated (SWOP) v2  /* or your printer's ICC */
Bleed:           3 mm (all sides)
Marks:           Trim marks ON
Flatten:         Transparent objects

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

चीट शीट: प्रोजेक्ट प्रकार → कलर फॉर्मेट

कंवर्जन: आपको क्या जानना चाहिए

• HEX ↔ RGB — लॉसलेस कंवर्जन। एक ही कलर मॉडल के अलग प्रतिनिधित्व। #FF6F61 = rgb(255, 111, 97)।
• RGB ↔ HSL — लॉसलेस कंवर्जन। एक ही रंग सेट के अलग गणितीय अभिव्यक्ति।
• RGB → CMYK — लॉसी कंवर्जन। CMYK की रेंज RGB से छोटी है। स्क्रीन पर चमकदार रंग प्रिंट में अक्सर फीके दिखते हैं।
• CMYK → RGB — परिणाम इस्तेमाल किए गए ICC प्रोफाइल पर निर्भर करता है। एक ही CMYK मान अलग-अलग प्रोफाइल्स के साथ अलग दिख सकता है।

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

सामान्य गलतियाँ (और उनसे कैसे बचें)

1. RGB को प्रिंटर को भेजना

प्रिंटर स्याही मिलाते हैं, रोशनी नहीं। अगर RGB फाइल भेजेंगे तो प्रिंटर सॉफ्टवेयर CMYK कंवर्जन का अनुमान लगाएगा और परिणाम शायद ही स्क्रीन से मेल खाएगा। हमेशा शुरू से CMYK में डिज़ाइन करें।

2. पारदर्शिता के लिए HEX का इस्तेमाल

8 अंकों का HEX (#FF6F6180) मौजूद है लेकिन कई टूल्स इसे नहीं पहचानते। विश्वसनीय पारदर्शिता के लिए rgba() या hsla() इस्तेमाल करें।

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

HEX कोड से हल्के और गहरे टोन बनाने में ट्रायल और एरर लगता है। HSL सीधे लाइटनेस बदलने देता है, जिससे कलर स्केल पूर्वानुमानित और संगत होते हैं।

4. CMYK → HEX कंवर्जन में समान रंग की उम्मीद

CMYK की रेंज RGB/HEX से छोटी है। वापस कंवर्जन में रंग अनुमानित होता है और फीका या थोड़ा बदला दिख सकता है। हमेशा दृश्य रूप से सत्यापित करें।

अक्सर पूछे जाने वाले प्रश्न

HEX और RGB में क्या अंतर है?

उपलब्ध रंगों के मामले में कोई नहीं। दोनों एक ही 1.67 करोड़ रंगों को कवर करते हैं। HEX हेक्साडेसिमल नोटेशन में RGB मानों को लिखने का संक्षिप्त तरीका है। #FF6F61 = rgb(255, 111, 97)। एकमात्र व्यावहारिक अंतर पारदर्शिता समर्थन है: RGB में RGBA इनबिल्ट है, जबकि 8 अंकों का HEX सीमित रूप से समर्थित है।

CMYK कब इस्तेमाल करना चाहिए?

जब भी आपका डिज़ाइन भौतिक रूप से प्रिंट होगा: विजिटिंग कार्ड, ब्रोशर, पोस्टर, पैकेजिंग। अगर केवल स्क्रीन पर दिखाई देगा तो HEX, RGB या HSL इस्तेमाल करें।

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

बेहतर नहीं, डिज़ाइनर्स के लिए समझने में आसान। कलर स्कीम, डार्क मोड थीम, एक्सेसिबिलिटी कंट्रास्ट जाँचने के लिए HSL अधिक सहज है। एप डेवलपमेंट के लिए जहाँ फ्रेमवर्क RGB की अपेक्षा करते हैं, RGB इस्तेमाल करें।

क्या कोई एप है जो चारों कलर फॉर्मेट एक साथ दिखाता है?

हाँ। Color Picker Camera आपको वास्तविक दुनिया के किसी भी रंग पर फोन पॉइंट करने और एक ही स्क्रीन पर HEX, RGB, HSL और CMYK मान तुरंत देखने देता है। iOS और Android पर उपलब्ध।

निष्कर्ष

वेब के लिए HEX। एप्स और स्क्रीन के लिए RGB। डिज़ाइन सिस्टम और थीम के लिए HSL। प्रिंट के लिए CMYK।

अगर आप वास्तविक दुनिया के रंगों के साथ काम करते हैं — पेंट की हुई दीवार, कपड़े का नमूना, साइन पर लोगो — Color Picker Camera आपके वास्तविक दुनिया के कलर कैलकुलेटर के रूप में काम करता है। पॉइंट करें, कैप्चर करें और चारों फॉर्मेट तुरंत प्राप्त करें।

iOS के लिए डाउनलोड करें Android के लिए डाउनलोड करें