रंग कनवर्टर
HEX के बीच रंग परिवर्तित करें, आरजीबी, और एचएसएल प्रारूप
एक रंग चुनें
या नीचे मान दर्ज करें
समझ रंग प्रारूप
डिजिटल रंगों को कई प्रारूपों में प्रस्तुत किया जा सकता है, जिनमें से प्रत्येक के अलग-अलग फायदे हैं। यह उपकरण तीन सबसे आम वेब रंग प्रारूपों के बीच सहजता से परिवर्तित होता है: HEX, RGB, और HSL। सब प्रसंस्करण आपके ब्राउज़र में होता है—आपके रंग विकल्पों को कभी भी ट्रैक या संग्रहीत नहीं किया जाता है।
#️⃣ हेक्स (हेक्साडेसिमल)
प्रारूप: #RRGGBB (6
अक्षर) या #RGB
(3-अक्षर आशुलिपि)
उदाहरण: #2563EB या
#F00
(लाल)
इसके लिए सर्वोत्तम: सीएसएस, HTML विशेषताएँ, डिज़ाइन उपकरण। के लिए सबसे कॉम्पैक्ट प्रारूप
वेब विकास.
🔴🟢🔵 आरजीबी (लाल, हरा, नीला)
प्रारूप: rgb(R, G, B)
जहां प्रत्येक मान 0-255 है
उदाहरण: rgb(37, 99, 235)
इसके लिए सर्वोत्तम: सीएसएस फ़ंक्शन, जावास्क्रिप्ट रंग हेरफेर, प्रोग्रामेटिक
रंग पीढ़ी. हल्के मिश्रण के रूप में समझना आसान है।
🌈 एचएसएल (रंग, संतृप्ति, हल्कापन)
प्रारूप: hsl(H, S%, L%)
जहां H 0-360° है, S और L 0-100% हैं
उदाहरण: hsl(221, 83%, 53%)
इसके लिए सर्वोत्तम: रंग योजनाएं बनाना, चमक/संतृप्ति समायोजित करना। अधिकांश
मानवीय धारणा के लिए सहज।
सामान्य उपयोग के मामले
- सीएसएस स्टाइलिंग: प्रारूपों के बीच कनवर्ट करें विभिन्न सीएसएस गुणों और ब्राउज़र संगतता के लिए
- डिज़ाइन हैंडऑफ़: से रंगों का अनुवाद करें कोड-अनुकूल प्रारूपों के लिए उपकरण (अक्सर HEX) डिज़ाइन करें
- रंग योजना: बनाने के लिए HSL का उपयोग करें विविधताएँ (होवर स्थितियों के लिए हल्कापन समायोजित करें)
- अभिगम्यता: कंट्रास्ट की गणना करें आरजीबी मूल्यों का उपयोग कर अनुपात
- ब्रांड दिशानिर्देश: दस्तावेज़ में रंग विभिन्न उपयोग के मामलों के लिए एकाधिक प्रारूप
रंग सिद्धांत त्वरित सुझाव
बनाना होवर स्टेट्स
एचएसएल का उपयोग करें: गहरे होवर प्रभावों के लिए रोशनी को 10-15% तक कम करें, या हल्के के लिए बढ़ाएँ वाले. आरजीबी परिवर्तनों की गणना करने से कहीं अधिक आसान है।
सुनिश्चित करना कंट्रास्ट
WCAG AA अनुपालन के लिए, टेक्स्ट को 4.5:1 कंट्रास्ट अनुपात की आवश्यकता है। एचएसएल लाइटनेस के अंतर 40%+ आमतौर पर इस आवश्यकता को पूरा करते हैं।
अक्सर पूछे जाने वाले प्रश्नों
मुझे कौन सा प्रारूप उपयोग करना चाहिए सीएसएस में?
ये तीनों आधुनिक ब्राउज़र में काम करते हैं। HEX सबसे आम और कॉम्पैक्ट है। जब आपको आवश्यकता हो तब RGB/HSL का उपयोग करें
पारदर्शिता (rgba() या
hsla()) या
गतिशील रंग हेरफेर.
HEX में # का क्या अर्थ है? मतलब?
# प्रतीक हेक्साडेसिमल रंग मान को इंगित करता है। सीएसएस में यह आवश्यक है लेकिन अक्सर वैकल्पिक होता है डिज़ाइन उपकरण. निम्नलिखित 6 अक्षर बेस-16 (00-एफएफ =) में लाल, हरे और नीले रंग का प्रतिनिधित्व करते हैं 0-255).
एचएसएल ह्यू कैसे काम करता है?
रंग चक्र पर रंग एक डिग्री है: 0° = लाल, 60° = पीला, 120° = हरा, 180° = सियान, 240° = नीला, 300° = मैजेंटा, 360° = वापस लाल पर। यह पूरक रंगों (180°) का चयन करता है अलग) सहज ज्ञान युक्त।
क्या मैं पारदर्शिता जोड़ सकता हूँ?
हाँ! उपयोग rgba(R, G, B, A)
या hsla(H, S%, L%, A)
जहां A 0-1 है. आधुनिक CSS 8-वर्ण HEX का भी समर्थन करता है: #RRGGBBAA.
सीएसएस रंग संदर्भ
/* HEX */
color: #2563EB;
/* RGB */
color: rgb(37, 99, 235);
/* HSL */
color: hsl(221, 83%, 53%);
/* With transparency */
color: rgba(37, 99, 235, 0.5);
color: hsla(221, 83%, 53%, 0.5);