DevToolPal
हि

कलर कन्वर्टर (HEX, RGB, HSL)

रंगों को HEX, RGB, HSL, HSV और CMYK के बीच बदलें, लाइव प्रीव्यू और सफ़ेद व काले पर कंट्रास्ट के साथ।

लोकल रूप से चलता है, कभी अपलोड नहीं होता

विकल्प

रंग

परिणाम

परिणाम यहाँ दिखेगा

यह क्या करता है

कलर कन्वर्टर किसी भी आम CSS नोटेशन में दिया गया रंग लेता है और उसे एक साथ बाकी सभी में दिखाता है: HEX, RGB, HSL, HSV और CMYK। यह एक प्रीव्यू स्वैच भी दिखाता है, सटीक मेल होने पर CSS कलर नाम, और सफ़ेद व काले के मुक़ाबले कंट्रास्ट रेशियो, ताकि आप पढ़ने में आसानी जाँच सकें।

कैसे इस्तेमाल करें

  1. रंग बॉक्स में कोई रंग टाइप या पेस्ट करें, या उसके पास वाला कलर पिकर इस्तेमाल करें।
  2. टाइप करते ही सभी नोटेशन अपडेट हो जाते हैं। जिसकी ज़रूरत हो, उसके पास कॉपी पर क्लिक करें।
  3. अगर आपकी स्टाइल गाइड hex को कैपिटल में लिखती है तो अपरकेस hex चालू करें।
  4. रंग को टेक्स्ट के लिए इस्तेमाल करने से पहले कंट्रास्ट वाली पंक्तियाँ देखें: हरा बैज मतलब यह WCAG AA पास करता है।

उदाहरण

#1e90ff CSS कलर dodgerblue है। यह बदलकर बनता है:

  • RGB: rgb(30, 144, 255)
  • HSL: hsl(210, 100%, 55.9%)
  • HSV: hsv(210, 88.2%, 100%)
  • CMYK: cmyk(88%, 44%, 0%, 0%)

सफ़ेद पर इसका कंट्रास्ट 3.24:1 है, जो बड़े हेडिंग के लिए काफ़ी है लेकिन बॉडी टेक्स्ट के लिए नहीं।

कलर मॉडल संक्षेप में

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

पारदर्शिता वाले रंग, जैसे #1e90ff80 या rgb(30 144 255 / 50%), HEX, RGB और HSL में alpha चैनल के साथ दिखाए जाते हैं।

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

› HEX को RGB में कैसे बदलें?

छह hex अंकों को तीन जोड़ों में बाँटें और हर जोड़े को 0 से 255 तक की संख्या के रूप में पढ़ें। #1e90ff के लिए यह 1e = 30, 90 = 144 और ff = 255 है, यानी rgb(30, 144, 255)। यह टूल टाइप करते ही यह काम आपके लिए कर देता है।

› मैं कौन-से फ़ॉर्मैट पेस्ट कर सकता हूँ?

# के साथ या बिना hex (3, 4, 6 या 8 अंक), rgb() और rgba(), hsl() और hsla() कॉमा और स्पेस दोनों सिंटैक्स में, प्रतिशत, deg और turn जैसी कोण इकाइयाँ, और सभी 148 CSS कलर नाम।

› कंट्रास्ट रेशियो का क्या मतलब है?

यह रंग और सफ़ेद या काले बैकग्राउंड के बीच WCAG 2 कंट्रास्ट है। AA लेवल के लिए बॉडी टेक्स्ट को कम से कम 4.5:1 चाहिए; बड़े टेक्स्ट (लगभग 24px, या 19px बोल्ड) को 3:1।

› CMYK सिर्फ़ अनुमानित क्यों है?

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