रंग कन्वर्टर
किसी भी आम रूप में एक रंग टाइप करें — या चुनें — और उसे HEX, RGB, HSL, HWB, HSV, CMYK और OKLCH में देखें, निकटतम CSS रंग नाम के साथ, और कॉपी करने के लिए CSS कस्टम प्रॉपर्टी का एक ब्लॉक। रूपांतरण CSS Color Module Level 4 के सूत्रों का पालन करते हैं और पूरी तरह आपके ब्राउज़र में चलते हैं। निःशुल्क, साइन-अप की ज़रूरत नहीं।
उदाहरण: #336699, rgb(51 102 153), hsl(210 50% 40%), hwb(210 20% 40%), cmyk(67%, 33%, 0%, 40%), rebeccapurple। #rrggbbaa या “/ 50%” से अल्फ़ा जोड़ें।
रूपांतरित मान
HEX
#336699
RGB
rgb(51 102 153)
HSL
hsl(210 50% 40%)
HWB
hwb(210 20% 40%)
HSV
hsv(210, 66.7%, 60%)
CMYK (सरल)
cmyk(66.7%, 33.3%, 0%, 40%)
OKLCH
oklch(49.93% 0.0987 250.43)
CSS नाम
steelblue (निकटतम)
CSS कस्टम प्रॉपर्टी
:root {
--color-hex: #336699;
--color-rgb: rgb(51 102 153);
--color-hsl: hsl(210 50% 40%);
--color-oklch: oklch(49.93% 0.0987 250.43);
}यहाँ CMYK RGB से सरल डिवाइस रूपांतरण है — इसमें कोई स्याही, कागज़ या ICC प्रोफ़ाइल शामिल नहीं है — इसलिए यह छपे रंग से मेल नहीं खाएगा। आर्टवर्क भेजने से पहले अपने प्रिंटर से उनकी प्रोफ़ाइल माँगें।
HSV और CMYK CSS रंग फ़ंक्शन नहीं हैं; पेज इन्हें डिज़ाइन और प्रिंट टूल के लिए दिखाता है।
रंग कन्वर्टर का उपयोग कैसे करें
- 1. रंग डालें। बॉक्स जो भी नोटेशन स्वीकार करता है उसमें चिपकाएँ या टाइप करें —
#336699,rgb(51 102 153),hsl(210 50% 40%),hwb(210 20% 40%),cmyk(67%, 33%, 0%, 40%)याrebeccapurpleजैसा CSS नाम। केवल51 102 153को RGB माना जाता है। - 2. या पिकर का उपयोग करें। पिकर रंग सेट करता है और जो पारदर्शिता आपने पहले टाइप की थी उसे बनाए रखता है।
- 3. जो चाहिए वह कॉपी करें। हर नोटेशन का अपना कॉपी बटन है, और CSS कॉपी करें आपको स्टाइलशीट के लिए HEX, RGB, HSL और OKLCH मान कस्टम प्रॉपर्टी के रूप में देता है।
- 4. नाम जाँचें। जब आपका रंग बिल्कुल CSS कीवर्ड हो, तो टूल वह कीवर्ड दिखाता है (
rebeccapurple#663399 है), और न होने पर निकटतम कीवर्ड।
रूपांतरण कैसे काम करते हैं
सब कुछ sRGB के माध्यम से बदला जाता है, वह रंग-स्थान जिसमें ब्राउज़र रंग बनाता है। HEX कोड बस base 16 में RGB है: #336699 में लाल 0x33 = 51, हरा 0x66 = 102, और नीला 0x99 = 153। बाकी नोटेशन उन्हीं तीन संख्याओं को अलग तरह से व्यवस्थित करते हैं।
- HSL रंग को ह्यू (रंग-चक्र पर एक कोण, 0–360°), सैचुरेशन और लाइटनेस से बताता है। सबसे बड़े चैनल max और सबसे छोटे min (दोनों को 255 से भाग देकर), लाइटनेस है (max + min) ÷ 2, और सैचुरेशन है (max − min) ÷ (1 − |2L − 1|)। ह्यू इस पर निर्भर करता है कि कौन-सा चैनल सबसे बड़ा है।
- HSV (जिसे HSB भी कहते हैं) वही ह्यू रखता है, पर वैल्यू को max और सैचुरेशन को (max − min) ÷ max के रूप में मापता है। यह वह मॉडल है जिसे अधिकांश रंग-पिकर दिखाते हैं।
- HWB किसी शुद्ध ह्यू के ऊपर सफ़ेदी (min) और कालापन (1 − max) है; टिंट या शेड के बारे में सोचते समय यह HSL से समझने में आसान है। यदि सफ़ेदी और कालापन मिलकर 100% तक पहुँचें, तो परिणाम ग्रे होता है।
- CMYK को सरल डिवाइस रूपांतरण के रूप में दिखाया जाता है: K = 1 − max, फिर C, M और Y में से हर एक (1 − चैनल − K) ÷ (1 − K)। इसमें कोई स्याही, कागज़ या प्रोफ़ाइल शामिल नहीं है।
- OKLCH Björn Ottosson के OKLab स्थान में लाइटनेस, क्रोमा और ह्यू है, जिसे CSS Color 4
oklch()के रूप में समर्थन देता है। L में बराबर चरण RGB या HSL की तुलना में चमक में बराबर चरणों के कहीं अधिक निकट दिखते हैं।
एक रंग, हर नोटेशन में
HEX: #336699
RGB: rgb(51 102 153)
HSL: hsl(210 50% 40%)
HWB: hwb(210 20% 40%)
HSV: hsv(210, 66.7%, 60%)
CMYK: cmyk(66.7%, 33.3%, 0%, 40%)
OKLCH: oklch(49.93% 0.0987 250.43)
CMYK यहाँ छपाई का रंग क्यों नहीं है
स्क्रीन लाल, हरे और नीले प्रकाश को जोड़ते हैं; प्रिंटर कागज़ पर सियान, मैजेंटा, पीली और काली स्याही लगाते हैं। दोनों गैमट अलग हैं, और कागज़ पर स्याही कैसी दिखेगी यह कागज़, प्रेस और उन्हें वर्णित करने वाली ICC प्रोफ़ाइल पर निर्भर करता है। केवल RGB से काम करने वाला सूत्र इनमें से कुछ भी नहीं जान सकता, इसलिए ऊपर का CMYK एक नोटेशन है, भविष्यवाणी नहीं: शुद्ध स्क्रीन नीला #0000ff 100% सियान और 100% मैजेंटा बन जाता है, जो एक फीका बैंगनी छपता है। किसी पोस्टर या छपी आकृति के लिए अपने प्रिंटर को RGB में आर्टवर्क दें और उनकी प्रोफ़ाइल माँगें, या किसी डिज़ाइन एप्लिकेशन में उस प्रोफ़ाइल के साथ बदलें।
राउंडिंग, सीमित करना और पारदर्शिता
- राउंडिंग। HEX और
rgb()0 से 255 तक पूर्ण संख्याएँ रखते हैं, इसलिएhsl(210 50% 41%)के रूप में टाइप किया गया रंग निकटतम 8-बिट मान तक गोल हो जाता है। उस मान को वापस बदलने पर थोड़ा अलग HSL मिलता है — 8-बिट ग्रिड HSL से मोटा है। - सीमा से बाहर के चैनल। सीमा से बाहर के मानों को ब्राउज़र की तरह सीमित किया जाता है:
rgb(300 0 0)#ff0000है, और ऋणात्मक चैनल 0 बन जाता है। - ह्यू की इकाइयाँ।
deg,grad,radऔरturnस्वीकार्य हैं, और ह्यू घूमकर लौटता है: −150° वही है जो 210° है। - अल्फ़ा।
#rrggbbaa,#rgbaऔर/ 50%सभी काम करते हैं। अल्फ़ा 8-अंकों वाले HEX में 8 बिट तक संग्रहीत होता है, इसलिए 50%80बन जाता है और 50.2% के रूप में वापस पढ़ा जाता है।
अक्सर पूछे जाने वाले प्रश्न
- HEX को RGB में कैसे बदलें?
- HEX के छह अंकों को तीन जोड़ों में बाँटें और हर जोड़े को base 16 संख्या की तरह पढ़ें:
#336699में 33, 66 और 99 हैं, जो 51, 102 और 153 हैं। HEX कोड बॉक्स में चिपकाएँ और RGB मान तुरंत HSL, HWB, HSV, CMYK और OKLCH के साथ दिख जाएगा। - HSL और HSV में क्या अंतर है?
- दोनों एक ही ह्यू कोण का उपयोग करते हैं। HSL सैचुरेशन चाहे जो हो, सफ़ेद को पूर्ण लाइटनेस पर रखता है, इसलिए उसका मध्य शुद्ध रंग है; HSV शुद्ध रंग को पूर्ण वैल्यू और सैचुरेशन पर रखता है, और सफ़ेद को शून्य सैचुरेशन पर। HSL वह है जिसे CSS
hsl()के रूप में समर्थन देता है, जबकि HSV (या HSB) वह है जो अधिकांश रंग-पिकर दिखाते हैं। - क्या CMYK मान प्रिंट के लिए सटीक है?
- नहीं। यह RGB से बिना स्याही, कागज़ या ICC प्रोफ़ाइल वाला सरल रूपांतरण है, इसलिए यह वही संख्याएँ अलग तरह से लिखता है, न कि यह बताता है कि प्रेस क्या छापेगा। प्रिंटर के गैमट से बाहर के रंग, जैसे चमकीले स्क्रीन नीले और हरे, फीके छपेंगे। जो चीज़ मायने रखती है उसके लिए अपने प्रिंटर की प्रोफ़ाइल उपयोग करें।
- निकटतम CSS नाम का क्या अर्थ है?
- CSS 148 रंग कीवर्ड परिभाषित करता है। यदि आपका रंग ठीक उनमें से एक है, तो टूल उसे बिना किसी शर्त के दिखाता है। अन्यथा वह OKLab में निकटतम कीवर्ड दिखाता है, वह स्थान जो इस तरह बना है कि दूरी अनुभूत अंतर से मेल खाए। यह किसी रंग को टिप्पणी में नाम देने के लिए उपयोगी है, कोड के विकल्प के रूप में नहीं।
- राउंड-ट्रिप के बाद मेरा HSL मान थोड़ा क्यों बदल जाता है?
- HEX और RGB हर चैनल को 256 मानों में से एक के रूप में संग्रहीत करते हैं, और HSL उस ग्रिड पर एक-से-एक नहीं बैठता। HSL में टाइप किया गया रंग निकटतम RGB मान तक गोल होता है, और दिखाया गया HSL गोल किए गए मान से गणना होता है। HEX कोड से शुरू करने पर हर रूपांतरण दिखाए गए स्तर तक सटीक रहता है।
- क्या मेरा रंग डेटा कहीं भेजा जाता है?
- नहीं। रूपांतरण आपके ब्राउज़र में सादा गणित है; आप जो टाइप करते हैं वह न अपलोड होता है, न संग्रहीत।