रंग परिवर्तक (HEX, RGB, HSL — तत्काल)
एक hex कोड, RGB ट्रिपलेट, या HSL मान टाइप करें — अन्य प्रारूप तुरंत दृश्यमान प्रीव्यू स्वॉच के साथ अपडेट होते हैं। डिजाइनरों, वेब डेवलपर्स के लिए उपयोगी।
hex: #0ea5e9
rgb(14, 165, 233)
hsl(199, 89%, 48%)कैसे काम करता है
एक ही रंग को वर्णित करने के तीन तरीके
HEX, RGB और HSL sRGB रंग के लिए तीन नोटेशन हैं। HEX RGB का शॉर्टहैंड है: #FF6B35 का अर्थ है red=255, green=107, blue=53। RGB वर्णन करता है कि कितना लाल, हरा और नीला प्रकाश मिलाया जाए (प्रत्येक 0-255)। HSL एक ही RGB रंग को hue (कौन सा रंग), saturation (कितना जीवंत), और lightness (कितना चमकीला) के रूप में फिर से एनकोड करता है।
तीनों समकक्ष हैं — आप बिना नुकसान के राउंड-ट्रिप कर सकते हैं। डिजाइनर टोन समायोजित करने के लिए HSL पसंद करते हैं, जबकि डेवलपर आमतौर पर डिज़ाइन टूल से सीधे CSS में HEX पेस्ट करते हैं।
प्रत्येक का उपयोग कब करें
HEX: डिज़ाइन, Figma एक्सपोर्ट, ब्रांड गाइडलाइन, CSS रंग लिटरल से कॉपी-पेस्ट करना।
RGB: प्रोग्रामेटिक रंग काम (canvas, इमेज मैनिपुलेशन), एक्सेसिबिलिटी जाँच।
HSL: रंगों को महसूस से बदलना — 'थोड़ा अधिक saturated संस्करण', 'hover states के लिए गहरा वेरिएंट' बनाना।
इस टूल में क्या नहीं है
हम अभी alpha चैनल (पारदर्शिता) छोड़ते हैं — लेकिन #RRGGBBAA सभी आधुनिक ब्राउज़र में काम करता है।
हम व्यापक रंग गैमट (P3, Rec.2020, OKLCH) भी कवर नहीं करते। अधिकांश वेब काम के लिए sRGB-आधारित HEX/RGB/HSL सही विकल्प हैं।
अक्सर पूछे जाने वाले प्रश्न
›क्या मैं HSL से HEX राउंड-ट्रिप बिना सटीकता खोए कर सकता हूँ?
अधिकतर। HSL पूर्णांक डिग्री और प्रतिशत के रूप में संग्रहीत है, इसलिए कोनों पर थोड़ी गोलाई हो सकती है।
›क्या यह 3-अंक HEX कोड का समर्थन करता है?
हाँ। #f60 को #ff6600 के रूप में माना जाता है।
›HSL में saturation/lightness 360 क्यों नहीं जाती?
Hue डिग्री में है (0-360 रंग चक्र के आसपास)। Saturation और lightness प्रतिशत हैं (0-100)।
›क्या HSL HSB या HSV के समान है?
नहीं। HSV 'lightness' की जगह 'value' का उपयोग करता है। हम HSL का उपयोग करते हैं क्योंकि यह CSS से मेल खाता है।
›क्या यह पारदर्शिता का समर्थन करता है?
अभी नहीं। अभी के लिए, HEX में दो-अंक alpha जोड़ें (उदाहरण: #00000080 50% काले के लिए)।
›RGB 0-1 फ्लोट क्यों नहीं दिखाता?
क्योंकि अधिकांश संदर्भ (CSS, डिज़ाइन टूल) 0-255 पूर्णांक का उपयोग करते हैं।
›डिजाइनर सही रंग कहाँ से पाते हैं?
ब्रांड गाइडलाइन, डिज़ाइन टोकन, या पैलेट जनरेटर से।
›क्या कैलकुलेटर सटीक है?
हाँ। यह मानक sRGB रूपांतरण गणित का उपयोग करता है।
संबंधित टूल्स
अंतिम अपडेट: