रंग कनवर्टर

एक ही पिक्सेल को नाम देने के पाँच अलग तरीके

एक कनवर्टर जो HEX, RGB, HSL, HSV और CMYK को संभालता है, उसी अवधारणात्मक घटना का वर्णन करने के पाँच काफ़ी अलग तरीकों को छूता है। उन्हें अलग-अलग लोगों ने, अलग-अलग दशकों में, अलग-अलग मशीनों के लिए, और अलग-अलग प्राथमिकताओं के साथ आविष्कार किया था। एक मूल्य को एक संकेतन से दूसरे में स्लाइड करना तुच्छ अंकगणित जैसा दिखता है, और सतह पर यह आमतौर पर ऐसा ही है, लेकिन इतिहास समझाते हैं कि प्रत्येक संकेतन क्यों मौजूद है, और गणित समझाता है कि उनके बीच राउंड-ट्रिप हमेशा हानिरहित क्यों नहीं है।

HEX, sRGB तिकड़ी के लिए बेस-16 आशुलिपि

हेक्साडेसिमल रंग संकेतन वर्कस्टेशन और ग्राफिक्स फ़ाइल प्रारूपों पर CSS से कुछ वर्षों पहले का है, लेकिन वेब पर इसका सार्वभौमिक अर्थ 17 दिसंबर 1996 को W3C द्वारा प्रकाशित CSS1 अनुशंसा द्वारा तय किया गया था। CSS1 Håkon Wium Lie और Bert Bos का काम था: Lie ने अक्टूबर 1994 में CERN में होते हुए Cascading Style Sheets का प्रस्ताव दिया था, और Bos जुलाई 1995 में INRIA में परियोजना में शामिल हुए। CSS से पहले, HTML 1.0 में रंग की कोई धारणा नहीं थी, इसके 18 टैगों का प्रारंभिक सेट कड़ाई से संरचनात्मक था। एक हेक्स रंग तीन-बाइट (या चार-बाइट, अल्फ़ा के साथ) पूर्णांक है जिसे ब्राउज़र लाल, हरे और नीले चैनलों में विभाजित करता है। 6-अंकीय रूप #RRGGBB प्रत्येक चैनल को 8-बिट मान, 0-255, दो हेक्स अंकों में एन्कोड करता है। 3-अंकीय आशुलिपि #RGB 6-अंकीय रूप के बराबर है जिसमें प्रत्येक अंक दोगुना होता है, इसलिए #F0A और #FF00AA समान रंग हैं। CSS Color Module Level 4 ने औपचारिक रूप से अल्फ़ा चैनल के साथ 4-अंकीय (#RGBA) और 8-अंकीय (#RRGGBBAA) रूप जोड़े, जहाँ 00 पूरी तरह पारदर्शी और FF पूरी तरह अपारदर्शी है। ब्राउज़र समर्थन Chrome 62, Firefox 49, Safari 10 और Edge 79 में आया, इसलिए 2026 तक यह अनिवार्य रूप से सार्वभौमिक है। हेक्स लोकप्रिय है क्योंकि यह छोटा, कॉपी-पेस्ट करने योग्य और स्पष्ट है, background: #1e90ff Figma, VS Code, Slack और ईमेल के बीच कॉपी/पेस्ट से बच जाता है, बिना किसी को व्हाइटस्पेस या कॉमा के बारे में सोचने की ज़रूरत के।

RGB, Maxwell का त्रिवर्णीय सिद्धांत, डिजिटल बनाया गया

"RGB" का विचार, कि आँख जो भी रंग देखती है उसे तीन प्राथमिक रोशनियों की नियंत्रित मात्रा मिलाकर मिलाया जा सकता है, रंगीन फोटोग्राफी से पहले का है। James Clerk Maxwell ने पहली बार अपने 1855 के पेपर "Experiments on Colour, as Perceived by the Eye, with Remarks on Colour Blindness" में प्रस्तावित किया, जो रॉयल सोसाइटी ऑफ़ एडिनबर्ग को प्रस्तुत किया गया था। छह साल बाद, 17 मई 1861 को, Maxwell ने सिद्धांत को सार्वजनिक रूप से प्रदर्शित किया: उन्होंने फोटोग्राफर Thomas Sutton से एक टार्टन रिबन की तीन काली-सफ़ेद प्लेटें बनवाईं, प्रत्येक लाल, हरे या नीले फ़िल्टर के माध्यम से ली गई, और फिर तीनों प्लेटों को उन्हीं फ़िल्टरों के माध्यम से एक स्क्रीन पर वापस प्रोजेक्ट किया। सुपरइम्पोज़्ड प्रोजेक्शन ने एक पहचानने योग्य रंगीन छवि बनाई, एडिटिव सिंथेसिस द्वारा दुनिया की पहली रंगीन तस्वीर। Maxwell का एडिटिव RGB तब से हर इलेक्ट्रॉनिक डिस्प्ले की नींव बन गया है। आधुनिक वेब RGB का विशेष रूप से अर्थ है sRGB, 1996 में Hewlett-Packard और Microsoft द्वारा प्रस्तावित "standard RGB" रंग स्थान (HP के लेखक Michael Stokes और Ricardo Motta, Microsoft के Matthew Anderson और Srinivasan Chandrasekar) और IEC 61966-2-1:1999 के रूप में मानकीकृत। प्रेरणा साधारण थी: प्रारंभिक वेब को एक रंग स्थान की आवश्यकता थी जो डिफ़ॉल्ट रूप से मानने के लिए पर्याप्त सरल हो, सस्ते CRT पर स्वीकार्य दिखने के लिए पर्याप्त मज़बूत हो, और छवि फ़ाइलों को फूलने न दे, इतना छोटा हो। पच्चीस साल बाद यह अभी भी हर ब्राउज़र, हर JPEG और हर PNG का डिफ़ॉल्ट कार्यक्षेत्र है जो एम्बेडेड ICC प्रोफ़ाइल नहीं ले जाता है। CSS में, RGB को rgb(255, 0, 153) (लीगेसी कॉमा सिंटैक्स) या rgb(255 0 153) (आधुनिक स्पेस-अलग, CSS Color Level 4 के अनुसार) लिखा जाता है।

HSL और HSV, Alvy Ray Smith के अवधारणात्मक अक्ष

RGB हार्डवेयर के लिए उत्कृष्ट है (एक डिस्प्ले में वस्तुतः लाल, हरे और नीले सब-पिक्सेल होते हैं) और मानवीय अंतर्ज्ञान के लिए बेकार है। कोई भी यह तर्क देकर वेब डिज़ाइन को नहीं ट्वीक करता कि वे "बारह यूनिट अधिक हरा और सात कम लाल" चाहते हैं। डिज़ाइनर रंग (कौन सा रंग), संतृप्ति (कितना जीवंत), और हल्कापन (कितना चमकीला) के संदर्भ में सोचते हैं। यह रूपांतरण Alvy Ray Smith ने अपने SIGGRAPH 1978 के पेपर "Color Gamut Transform Pairs" में औपचारिक किया, जो अगस्त 1978 के Computer Graphics के अंक, पृष्ठ 12-19 में प्रकाशित हुआ। Smith न्यू यॉर्क इंस्टीट्यूट ऑफ़ टेक्नोलॉजी कंप्यूटर ग्राफ़िक्स लैब में थे, पहले Xerox PARC में काम कर चुके थे। पेपर ने नोट किया कि RGB-से-HSV परिवर्तन को प्रकाशन के समय तक फ़्रेम-बफ़र पेंटिंग प्रोग्राम में "लगभग चार वर्षों तक सफलतापूर्वक उपयोग किया गया" था, Smith कार्य अभ्यास का दस्तावेज़ीकरण कर रहे थे, शून्य से आविष्कार नहीं कर रहे थे। उन्हें 1990 में अन्य चीज़ों के साथ "HSV (उर्फ HSB) रंग स्थान मॉडल" के लिए SIGGRAPH कंप्यूटर ग्राफ़िक्स अचीवमेंट अवार्ड से सह-सम्मानित किया गया था। HSL और HSV एक रंग अक्ष (एक कोण, 0°-360°, एक रंग चक्र के चारों ओर: 0° लाल, 120° हरा, 240° नीला) और एक संतृप्ति अक्ष (0% ग्रे से 100% शुद्ध तक) साझा करते हैं, लेकिन वे अपने तीसरे अक्ष में भिन्न हैं। HSV (Hue, Saturation, Value) V को RGB चैनलों के अधिकतम के रूप में मानता है, शुद्ध सफ़ेद के लिए V=100% और S=0% की आवश्यकता है, शुद्ध लाल V=100%, S=100% है; सफ़ेद और लाल दोनों सिलेंडर के शीर्ष पर रहते हैं। HSL (Hue, Saturation, Lightness) L को सबसे चमकदार और सबसे गहरे चैनलों के मध्य बिंदु के रूप में मानता है, शुद्ध सफ़ेद S की परवाह किए बिना L=100% है, शुद्ध लाल L=50%, S=100% है; सफ़ेद सिलेंडर के शीर्ष पर रहता है, सबसे जीवंत रंग भूमध्य रेखा पर रहते हैं। HSL को विशेष रूप से CSS के लिए चुना गया क्योंकि L=50% के आसपास इसकी समरूपता डिज़ाइनरों के टिंट और शेड के बारे में सोचने के तरीक़े से मेल खाती है।

CMYK, प्रिंटर का घटाव मॉडल

जबकि मॉनिटर प्रकाश का उत्सर्जन करते हैं (योगात्मक: अधिक उज्जवल है, सभी तीन पूर्ण = सफ़ेद), स्याही प्रकाश को अवशोषित करती है (घटाव: अधिक गहरा है, सभी तीन पूर्ण = काला, सिद्धांत रूप में)। चार-रंग प्रक्रिया मुद्रण, सियान, मैजेंटा, पीला, साथ ही एक काली "key" प्लेट, पहली बार 1890 के दशक में रंगीन समाचार पत्र चित्रण के लिए वाणिज्यिक रूप से उपयोग की गई थी। Eagle Printing Ink Company को आम तौर पर 1906 में पहली सच्ची चार-रंग गीली-स्याही प्रक्रिया का श्रेय दिया जाता है। "K" "key" (वह प्लेट जो अन्य सभी को पंजीकृत करती है, पारंपरिक रूप से काली विस्तार प्लेट) से आता है, "black" से नहीं, यही कारण है कि मॉडल CMYK है और CMYB नहीं। key प्लेट चार व्यावहारिक कारणों से मौजूद है: वास्तविक स्याही में 100% C, M और Y को मिलाने से मटमैला गहरा भूरा होता है, सच्चा काला नहीं, क्योंकि वास्तविक रंगद्रव्य पूरी तरह से शुद्ध नहीं होते हैं; तीन-रंग के काले स्याही बर्बाद करते हैं और सूखने को धीमा करते हैं; गीले तीन-रंग के काले काग़ज़ को मरोड़ते और फाड़ते हैं; और टाइप और बारीक रूपरेखाओं को कुरकुरापन के लिए एक एकल उच्च-कंट्रास्ट प्लेट की आवश्यकता होती है।

रूपांतरण गणित, संक्षेप में

HEX ↔ RGB तुच्छ है, हेक्स स्ट्रिंग को तीन दो-वर्ण उपस्ट्रिंग में विभाजित करें और प्रत्येक को parseInt(hex, 16) के साथ बेस-16 पूर्णांक के रूप में पार्स करें; n.toString(16).padStart(2, '0') के साथ उलट करें। RGB → HSL max/min गणित है: क्रोमा = max(R,G,B) − min(R,G,B); हल्कापन = (max + min) / 2; संतृप्ति = क्रोमा / (1 − |2L − 1|); रंग एक टुकड़ावार सूत्र के माध्यम से गणना की जाती है जो प्रमुख चैनल चुनता है और इसकी स्थिति को रंग वृत्त के छह 60° क्षेत्रों में से एक के कोण में अनुवाद करता है। (कुछ कार्यान्वयन atan2 का उपयोग करते हैं, लेकिन Smith के 1978 के पेपर ने प्रदर्शन कारणों से जानबूझकर त्रिकोणमिति से बचा, atan2 1970 के दशक के फ़्रेम बफ़र पर एक महंगा निर्देश था, और टुकड़ावार सूत्र इसलिए रहा है क्योंकि यह वही उत्तर तेज़ी से देता है।) HSL → RGB क्रोमा और एक ऑफ़सेट के साथ एक टुकड़ावार रैखिक मानचित्रण के माध्यम से प्रक्रिया को उलटता है जो क्रोमा तिकड़ी को हल्कापन अक्ष के सही बिंदु पर अनुवादित करता है। RGB ↔ HSV समान ढाँचे का उपयोग करता है लेकिन एक अलग ऊर्ध्वाधर अक्ष के साथ: L = (M+m)/2 के बजाय V = M, और हल्कापन-जागरूक भाजक के बजाय S = Δ/M। RGB ↔ CMYK सरल सूत्र K = 1 − max(R,G,B) का उपयोग करता है, फिर C, M, Y (1 − चैनल − K) / (1 − K) के रूप में। यह गणितीय रूप से आत्म-संगत है लेकिन यह वर्णन नहीं करता है कि कोई भी वास्तविक प्रिंटिंग प्रेस रंग को कैसे पुनरुत्पादित करेगी, नीचे प्रिंट चेतावनी देखें।

राउंड-ट्रिप समस्या

#7A3D5C (HEX) → HSL → HEX परिवर्तित करें। आपको आवश्यक रूप से #7A3D5C वापस नहीं मिलेगा। कारण पूरी तरह से सांसारिक हैं। पूर्णांक छटन: HEX चैनल पूर्णांक 0-255 हैं; HSL रूपांतरण फ़्लोट उत्पन्न करते हैं; (1, 121.987, 47.512) को पूर्णांक में गोल करने से सब-पिक्सेल जानकारी खो जाती है जिसे राउंड-ट्रिप पुनर्प्राप्त नहीं कर सकती है। Float64 अशुद्धता: JavaScript का एकमात्र संख्यात्मक प्रकार IEEE 754 डबल-परिशुद्धता बाइनरी फ़्लोट है, 52-बिट मंटिसा के साथ लगभग 15-17 महत्वपूर्ण दशमलव अंक देता है, एकल रूपांतरण के लिए भरपूर लेकिन अगर आप कई संचालन को श्रृंखलाबद्ध करते हैं तो जमा होता है। असममित मानचित्र: जब क्रोमा शून्य होता है तो कई अलग (R,G,B) तिकड़ी समान (H,S,L) तिकड़ी पर मैप कर सकती हैं (किसी भी ग्रे का रंग अपरिभाषित होता है; सम्मेलन H = 0 चुनते हैं या पिछले H को संरक्षित करते हैं)। एक व्यावहारिक ब्राउज़र उपकरण के लिए, यह ठीक है, उपयोगकर्ता ने #7A3D5C टाइप किया, HSL में (322°, 32%, 36%) देखता है, और #7A3D5C (या #7A3E5D, एक से दूर) वापस पाता है। जब तक प्रदर्शित स्वैच आँख की अपेक्षा से मेल खाता है, यात्रा अच्छी है। लेकिन ईमानदार होने के लायक है: हानिरहित राउंड-ट्रिप की गारंटी नहीं है।

sRGB से परे आधुनिक CSS रंग स्थान

दशकों तक, "वेब रंग" का अर्थ sRGB था, और केवल sRGB। यह धारणा 2015 में टूट गई, जब Apple ने 2015 के अंत के iMac को "बिल्ट-इन वाइड-गैमट डिस्प्ले के साथ पहला उपभोक्ता कंप्यूटर" के रूप में भेजा जो Apple के Display P3 रंग स्थान का समर्थन करता है। P3 की उत्पत्ति DCI-P3 के रूप में हुई, जिसे 2005 में डिजिटल सिनेमा पहल द्वारा थिएटर प्रोजेक्शन के लिए परिभाषित किया गया था। Apple के Display P3 वेरिएंट ने DCI के प्राइमरीज़ को बनाए रखा लेकिन सफ़ेद बिंदु को D65 (sRGB के साथ मेल खाते) में बदल दिया और sRGB के टोन-पुनरुत्पादन वक्र को अपनाया ताकि इसे अंधेरे थिएटर के बजाय डेस्कटॉप/मोबाइल देखने के लिए उपयुक्त बनाया जा सके। Display P3 का गैमट sRGB की तुलना में सतह क्षेत्र में लगभग 25% बड़ा है और फ़ोन और लैपटॉप को मापने योग्य रूप से अधिक जीवंत लाल और हरे दिखाने देता है। CSS को sRGB के बाहर रंगों का वर्णन करने देने के लिए, W3C के CSS Color Module Level 4 ने एक स्पष्ट रंग-स्थान पैरामीटर के साथ color() फ़ंक्शन पेश किया: color(srgb 1 0.5 0.2), color(display-p3 1 0.5 0.2), color(rec2020 1 0.5 0.2)। पूर्वनिर्धारित रंग स्थानों में srgb, srgb-linear, display-p3, a98-rgb (Adobe RGB), prophoto-rgb, rec2020, xyz, xyz-d50 और xyz-d65 शामिल हैं। सामान्य sRGB डिस्प्ले पर, गैमट के बाहर का P3 रंग डिस्प्ले द्वारा दिखाए जा सकने वाले निकटतम sRGB समकक्ष पर गैमट-मैप किया जाता है।

CSS Color Level 4 ने lab(), lch(), oklab(), और oklch() प्रथम श्रेणी के फ़ंक्शन भी जोड़े। lab() और lch() CIE 1976 L*a*b* रंग स्थान का उपयोग करते हैं, 1976 में अंतर्राष्ट्रीय प्रकाश आयोग द्वारा मानकीकृत, पहला व्यापक रूप से तैनात अवधारणात्मक रूप से एक समान रंग स्थान, a* और b* अक्षों के साथ जो लाल-हरे और नीले-पीले प्रतिद्वंद्वी जोड़ों के अनुरूप होते हैं जो मानव दृश्य प्रणाली वास्तव में रंग कोड करने के तरीक़े से मेल खाते हैं। दिसंबर 2020 में, स्वीडिश डेवलपर Björn Ottosson ने अपने ब्लॉग पर "A perceptual color space for image processing" प्रकाशित किया और Oklab पेश किया। Ottosson ने गेम उद्योग में सरल रंग जोड़तोड़ करते हुए कई साल बिताए और निष्कर्ष निकाला कि प्रत्येक मौजूदा रंग स्थान किसी न किसी तरीक़े से इसमें विफल रहा। Oklab विशेष रूप से छवि-प्रसंस्करण संचालन के लिए ट्यून किया गया है: दो Oklab रंगों के बीच के ढाल अवधारणात्मक रूप से चिकने रहते हैं, और Oklab में हल्कापन समायोजन मानव आँख के लिए हल्कापन समायोजन की तरह महसूस होते हैं। बेलनाकार रूप, OKLCH, वह है जो अधिकांश डिज़ाइनर वास्तव में लिखते हैं। Oklab को ब्लॉग पोस्ट के एक साल बाद, दिसंबर 2021 में, CSS Color Level 4 में जोड़ा गया, और अब यह Color Level 4 लागू करने वाले ब्राउज़रों में CSS ग्रेडिएंट्स के लिए डिफ़ॉल्ट इंटरपोलेशन स्थान है। Tailwind CSS v4 रंग पैलेट OKLCH निर्देशांक से उत्पन्न होता है। color-mix() फ़ंक्शन (CSS Color Module Level 5) Safari 16.2 (दिसंबर 2022), Chrome 111 (मार्च 2023) और Firefox 113 (मई 2023) में भेजा गया, जिसने इसे मई 2023 से ब्राउज़रों में बेसलाइन-उपलब्ध बनाया।

रंग सिद्धांत की मिनी-इतिहास

वेब रंग कनवर्टर रंग को व्यवस्थित रूप से समझने के 360-वर्ष चाप के अंत में बैठते हैं। उल्लेखनीय मील के पत्थर: Newton (1665-66) ने सूर्य के प्रकाश को दृश्यमान स्पेक्ट्रम में विभाजित करने के लिए ग्लास प्रिज़्म का उपयोग किया और अपने Opticks में सात रंगों की पहचान की। Goethe (1810) ने Theory of Colours प्रकाशित किया, एक न्यूटन-विरोधी ग्रंथ जो रंग के भौतिकी की तुलना में रंग के अवधारणात्मक और भावनात्मक आयामों में अधिक रुचि रखता था, विज्ञान पर ग़लत लेकिन इस मामले में सही कि धारणा मायने रखती है। Maxwell (1855/1861) जैसा कि ऊपर कवर किया गया है। Itten (1961) ने Bauhaus में The Art of Color प्रकाशित किया, जिसमें 12-रंग रंग चक्र और रंग कंट्रास्ट के सात प्रकार संहिताबद्ध किए गए जो आज भी डिज़ाइन स्कूलों में पढ़ाए जाते हैं। Pantone (1963) ने Pantone Matching System (PMS) पेश किया, जिसने डिज़ाइनरों और प्रिंटरों के बीच रंग संचार को क्रमांकित कैटलॉग में बदल दिया, एक Pantone नंबर का मतलब था सिस्टम की सदस्यता लेने वाले दुनिया के किसी भी प्रिंटर पर बिल्कुल वही रंग। वेब रंग स्टैक इन सभी परंपराओं से विरासत में मिलता है: Newton हमें दृश्यमान स्पेक्ट्रम देता है, Maxwell योगात्मक प्राइमरीज़, Itten पूरक और सादृश्य योजनाओं की डिज़ाइन-स्कूल शब्दावली, Pantone यह व्यावहारिक तथ्य कि एक संख्या एक अवधारणात्मक अनुभव के लिए खड़ी हो सकती है।

पहुँच: आप जो भी चुनें उस पर WCAG कंट्रास्ट

एक बार जब आपके पास रंग होता है, तो आपको जानना होगा कि क्या आप उसके ऊपर टेक्स्ट रख सकते हैं। WCAG 2.1 सफलता मानदंड 1.4.3 (कंट्रास्ट, न्यूनतम) सामान्य टेक्स्ट के लिए 4.5:1 कंट्रास्ट अनुपात और बड़े टेक्स्ट के लिए 3:1 की आवश्यकता है (18pt / 24 CSS पिक्सेल नियमित, या 14pt / 19 CSS पिक्सेल बोल्ड के रूप में परिभाषित)। कंट्रास्ट अनुपात सापेक्ष चमक से गणना की जाती है: (L1 + 0.05) / (L2 + 0.05), जहाँ L1 चमकदार रंग की चमक है और L2 गहरा है, और चमक गामा-डिकोडेड R, G, B चैनलों का भारित योग है जिसमें वज़न 0.2126, 0.7152 और 0.0722 हैं (उन तरंगदैर्ध्य के लिए मानव आँख की संवेदनशीलता से मेल खाते हुए)। WCAG 2.1 SC 1.4.6 (बढ़ाया) AAA अनुरूपता के लिए बार को 7:1 सामान्य / 4.5:1 बड़े तक बढ़ाता है। WCAG 2.1 SC 1.4.11 ग़ैर-टेक्स्ट कंट्रास्ट (UI घटक, फ़ोकस संकेतक, समझ के लिए आवश्यक ग्राफ़िकल ऑब्जेक्ट) को 3:1 पर कवर करता है। नया APCA (Advanced Perceptual Contrast Algorithm) एक शोध-चरण प्रतिस्थापन है जो बॉडी टेक्स्ट के लिए कथित कंट्रास्ट से बेहतर मेल खाता है और WCAG 3 के लिए मूल्यांकन किया जा रहा है, यह एक दिशात्मक Lc मान देता है जहाँ ±60 WCAG के 4.5:1 का मोटा समकक्ष है। हमेशा वास्तविक कंट्रास्ट सूत्र के विरुद्ध रंग जोड़े जाँचें, अपनी आँख नहीं; डिज़ाइनर लगातार अधिक अनुमान लगाते हैं कि कम-कंट्रास्ट जोड़ी कितनी पठनीय है।

ईमानदार प्रिंट चेतावनी: भोला CMYK वास्तविक CMYK नहीं है

प्रत्येक ब्राउज़र कनवर्टर द्वारा उपयोग किया जाने वाला सरल सूत्र K = 1 − max(R,G,B) गणितीय रूप से आत्म-संगत है, राउंड-ट्रिप RGB → CMYK → RGB सटीक रूप से वही RGB लौटाता है, मॉड्यूलो फ़्लोटिंग-पॉइंट। लेकिन यह वर्णन नहीं करता है कि कोई वास्तविक प्रिंटिंग प्रेस उस रंग को काग़ज़ पर कैसे पुनरुत्पादित करेगी। एक वास्तविक RGB-से-CMYK रूपांतरण के लिए तीन चीज़ों की आवश्यकता है जो यह उपकरण भेज नहीं सकता है: एक लक्ष्य ICC प्रोफ़ाइल (प्रिंटर + काग़ज़ संयोजन को परिभाषित करना, लेपित काग़ज़ बिना लेप के काग़ज़ की तुलना में अलग तरह से स्याही अवशोषित करता है, और उच्च-अंत वाणिज्यिक प्रेस डेस्कटॉप इंकजेट से अलग प्रोफ़ाइल चलाते हैं), एक रेंडरिंग इरादा (अवधारणात्मक, सापेक्ष वर्णमिति, संतृप्ति, पूर्ण वर्णमिति, वे व्यापार करते हैं कि गैमट के बाहर के रंग कैसे निचोड़े जाते हैं), और एक वास्तविक वर्णमितीय मॉडल (CIE Lab डिवाइस-स्वतंत्र मध्य परत के रूप में, प्रत्येक तरफ पूर्ण ICC प्रोफ़ाइल लुकअप तालिकाओं के साथ)। यह वह है जो Adobe Photoshop अपने CMYK रूपांतरण मेनू के पीछे करता है और जो पेशेवर प्रीप्रेस सॉफ़्टवेयर (Esko, Heidelberg Prinect, Caldera) उत्पादन काम के लिए करता है। भोला सूत्र योगात्मक और घटाव रंग मॉडल के बीच संबंध को समझने के लिए ठीक है, और पहले-पास रंग अन्वेषण के लिए उपयोगी है, लेकिन यदि आप वाणिज्यिक प्रिंटर को फ़ाइलें भेज रहे हैं, तो सही ICC प्रोफ़ाइल लोडेड के साथ Photoshop (या अपने प्रिंटर के पसंदीदा उपकरण) में रूपांतरण करें, दृश्यमान अंतर पर्याप्त हो सकता है।

नामित रंग और Rebeccapurple की कहानी

CSS3 147 नामित रंग भेजता है (148 यदि आप उपनाम aqua = cyan को गिनते हैं), मूल 16 HTML 4 नामित रंगों और X11 विंडो सिस्टम की लंबी सूची के मिश्रण से विरासत में मिले हैं। सबसे हाल ही में जोड़े गए नामित रंग की एक कहानी है। 7 जून 2014 को, वेब मानक अधिवक्ता Eric Meyer की बेटी Rebecca अपने छठे जन्मदिन के अगले दिन ब्रेन कैंसर के एक आक्रामक रूप से मर गई। Rebecca का पसंदीदा रंग बैंगनी था। कुछ ही दिनों के भीतर, संपादक Tab Atkins Jr. के नेतृत्व में CSS कार्य समूह के सदस्यों ने उनकी स्मृति में rebeccapurple (#663399) को CSS Color Level 4 स्पेक में नामित रंग के रूप में जोड़ने का प्रस्ताव रखा। रंग जून 2014 में जोड़ा गया और थोड़ी देर बाद ब्राउज़रों में भेजा गया। हेक्स मान विशेष रूप से उस मान के रूप में चुना गया था जिसका Eric Meyer ने स्वयं अपनी वेबसाइट पर उपयोग किया था। rebeccapurple अब हर ब्राउज़र की नामित-रंग तालिका में है, CSS विनिर्देश में एकमात्र स्मारक रंग, और एक अनुस्मारक कि वेब के सूखे तकनीकी विनिर्देश उन लोगों द्वारा लिखे जाते हैं जो ध्यान देते हैं जब उनमें से एक शोक में होता है।

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

मुझे CSS में किस प्रारूप का उपयोग करना चाहिए?

तीनों प्राथमिक प्रारूप आधुनिक CSS में काम करते हैं। HEX सबसे कॉम्पैक्ट और व्यापक रूप से उपयोग किया जाता है, स्थिर रंगों के लिए बढ़िया है जहाँ आपने एक बार मान चुना है और इसे हर जगह कॉपी करना चाहते हैं। RGB सहायक है जब आपको प्रोग्रामेटिक रूप से मानों की गणना करने या छवि डेटा के साथ काम करने की आवश्यकता होती है (canvas API मूल रूप से RGB बोलता है)। HSL तब सबसे अच्छा है जब आप डिज़ाइन-सिस्टम रंग विविधताएँ बनाना चाहते हैं, रंग को बंद रखते हुए हल्कापन या संतृप्ति को समायोजित करें, यह वह तरीक़ा है जिससे Tailwind का रंग पैलेट अपने पूर्ण रैम्प बनाता है। 2026 डिज़ाइन सिस्टमों के लिए, OKLCH (CSS Color Level 4 में) नए काम के लिए तेज़ी से सही उत्तर है, यह किन्हीं दो रंगों के बीच अवधारणात्मक रूप से सुचारू रूप से इंटरपोलेट करता है, जो ग्रेडिएंट्स और चिकनी रैम्प पीढ़ी के लिए मायने रखता है।

#FFF और #FFFFFF में क्या अंतर है?

तीन-अंकीय हेक्स आशुलिपि है जहाँ प्रत्येक अंक दोगुना होता है: #FFF = #FFFFFF, #09C = #0099CC, #F0A = #FF00AA। दोनों मान्य CSS हैं लेकिन छह-अंकीय रूप सभी 16,777,216 sRGB रंगों का समर्थन करता है जबकि तीन-अंकीय रूप केवल 4,096 का समर्थन करता है (प्रत्येक चैनल 16 अलग मानों तक सीमित है)। तीन-अंकीय हेक्स संक्षिप्त है लेकिन थोड़ा सीमित है; छह-अंकीय पूर्ण sRGB पैलेट है। CSS Color Module Level 4 चार और आठ-अंकीय रूपों को भी परिभाषित करता है (अल्फ़ा के साथ), जहाँ #F008 #FF000088 तक विस्तारित होता है और #F00 #FF0000 तक विस्तारित होता है।

क्या मैं पारदर्शिता (अल्फ़ा) के साथ रंग परिवर्तित कर सकता हूँ?

यह उपकरण वर्तमान में अपारदर्शी रंगों पर केंद्रित है। अल्फ़ा के लिए, CSS rgba(r, g, b, a), hsla(h, s%, l%, a), और 8-अंकीय हेक्स (#RRGGBBAA) का अलग-अलग संकेतन के रूप में समर्थन करता है; CSS Color Level 4 आपको स्लैश-अलग अल्फ़ा के साथ rgb(r g b / a%) और hsl(h s% l% / a%) लिखने देता है। 8-अंकीय हेक्स रूप लगभग 2017 से बेसलाइन-उपलब्ध है (Chrome 62, Firefox 49, Safari 10)।

क्या मेरा CMYK रूपांतरण प्रिंटर से जो निकलता है उससे मेल खाएगा?

शायद ठीक नहीं। यह उपकरण जो सरल गणित का उपयोग करता है वह वर्णमितीय रूप से आत्म-संगत है (RGB → CMYK → RGB समान RGB लौटाता है) लेकिन आपके विशिष्ट प्रिंटर + काग़ज़ संयोजन के ICC प्रोफ़ाइल, रेंडरिंग इरादे (अवधारणात्मक, सापेक्ष वर्णमिति, आदि) या प्रेस की डॉट-गेन विशेषता के लिए ज़िम्मेदार नहीं है। प्रिंट-बाध्य काम के लिए, सही ICC प्रोफ़ाइल लोडेड के साथ Photoshop या अपने प्रिंटर के पसंदीदा उपकरण में अंतिम CMYK रूपांतरण करें, भोले रूपांतरण और प्रोफ़ाइल-जागरूक के बीच दृश्यमान अंतर पर्याप्त हो सकता है, विशेष रूप से CMYK गैमट के किनारे पर संतृप्त लाल और नीले रंग के लिए।

OKLCH और आधुनिक CSS रंग स्थान के बारे में क्या?

आधुनिक CSS व्यापक-गैमट और अवधारणात्मक रूप से समान रंग काम के लिए oklab(), oklch(), lab(), lch() और color(display-p3 ...) का समर्थन करता है। उनके लिए ब्राउज़र समर्थन लगभग 2023 से बेसलाइन है (oklch() के लिए Safari 16.4, Chrome 111, Firefox 113; नामित स्थानों के साथ color() Safari में थोड़ा पहले भेजा गया)। वे अभी तक इस कनवर्टर में दिखाए नहीं गए हैं, आंशिक रूप से क्योंकि गणित कॉम्पैक्ट रूप में प्रदर्शित करना कठिन है (Lab में हस्ताक्षरित अक्ष हैं जो 0-100% स्लाइडर पर मैप नहीं होते हैं) और आंशिक रूप से क्योंकि अधिकांश वर्तमान उत्पादन वर्कफ़्लो अभी भी sRGB को लक्ष्य बनाते हैं। यदि आप एक आधुनिक डिज़ाइन सिस्टम में काम कर रहे हैं जो OKLCH का उपयोग करता है (उदाहरण के लिए Tailwind CSS v4), तो रंग पीढ़ी के लिए उस सिस्टम के टूलिंग का उपयोग करें; यह कनवर्टर विरासत sRGB काम के लिए सही उत्तर है।

क्या मेरा डेटा कहीं भेजा जाता है?

नहीं। रंग रूपांतरण शुद्ध अंकगणित है, सर्वर कुछ भी नहीं कर सकता जो आपका ब्राउज़र नहीं कर सकता। प्रत्येक रूपांतरण JavaScript में स्थानीय रूप से चलता है। आप रंग बदलते समय DevTools के नेटवर्क टैब में सत्यापित कर सकते हैं: कोई आउटबाउंड अनुरोध नहीं हैं। लोड होने के बाद पेज को ऑफ़लाइन (हवाई जहाज मोड) ले जाएँ और कनवर्टर अभी भी काम करेगा।

संबंधित टूल