रंग कोड कन्वर्टर
किसी भी CSS फ़ॉर्मेट में रंग पेस्ट करें और बाकी सभी फ़ॉर्मेट, साथ में उसका कंट्रास्ट पाएँ।
HEX, rgb(), hsl(), hwb() या CSS रंग का नाम पेस्ट करें, या कोई रंग चुनें
हल्के और गहरे शेड
वैल्यू
- HEX
- #3a5bd9
- RGB
- rgb(58, 91, 217)
- HSL
- hsl(227.5, 67.7%, 53.9%)
- HSV / HSB
- hsv(227.5, 73.3%, 85.1%)
- HWB
- hwb(227.5 22.7% 14.9%)
- CMYK
- cmyk(73%, 58%, 0%, 15%)
- यह एक अनुमान है। प्रिंट का रंग इंक और कागज़ पर निर्भर करता है, इसलिए सटीक वैल्यू अपने प्रिंटर से पूछें।
- OKLCH
- oklch(52.35% 0.1965 267.75)
- सबसे नज़दीकी CSS नाम
- royalblue
कंट्रास्ट (WCAG)
हर बैकग्राउंड पर इस रंग का टेक्स्ट। सामान्य टेक्स्ट को AA के लिए 4.5:1 और AAA के लिए 7:1 चाहिए; बड़े टेक्स्ट (18pt, या 14pt बोल्ड) को 3:1 और 4.5:1 चाहिए।
सफ़ेद पर
बड़ा टेक्स्ट
यह वाक्य दिखाता है कि इस रंग में टेक्स्ट कितना पढ़ने योग्य है
5.71:1
- AA सामान्य पास
- AAA सामान्य फेल
- AA बड़ा पास
- AAA बड़ा पास
काले पर
बड़ा टेक्स्ट
यह वाक्य दिखाता है कि इस रंग में टेक्स्ट कितना पढ़ने योग्य है
3.68:1
- AA सामान्य फेल
- AAA सामान्य फेल
- AA बड़ा पास
- AAA बड़ा फेल
#ffffff पर
बड़ा टेक्स्ट
यह वाक्य दिखाता है कि इस रंग में टेक्स्ट कितना पढ़ने योग्य है
5.71:1
- AA सामान्य पास
- AAA सामान्य फेल
- AA बड़ा पास
- AAA बड़ा पास
अगला: बैकग्राउंड पारदर्शी बनाएं · चार्ट मेकर
इस टूल में समस्या की रिपोर्ट करें
कलर कन्वर्टर का उपयोग कैसे करें
रंग डालें
HEX कोड, rgb(), hsl(), hwb() या tomato जैसा नाम पेस्ट करें, या कलर पिकर से रंग चुनें।
ज़रूरी फ़ॉर्मेट कॉपी करें
टाइप करते ही हर फ़ॉर्मेट अपडेट होता है। किसी को भी उसके बटन से कॉपी करें, या बड़े कॉपी बटन के लिए अपना पसंदीदा फ़ॉर्मेट चुनें।
कंट्रास्ट जाँचें
सफ़ेद, काले और अपनी पसंद के बैकग्राउंड पर WCAG कंट्रास्ट अनुपात देखें, सामान्य और बड़े टेक्स्ट के AA और AAA परिणामों के साथ।
Utils365 का उपयोग क्यों करें
कोई भी CSS रंग पढ़ता है
3, 4, 6 और 8 अंकों का HEX, पुराने कॉमा या नए स्पेस सिंटैक्स में rgb() और hsl(), hwb(), प्रतिशत, ह्यू यूनिट और सभी 148 रंग नाम।
मॉडर्न फ़ॉर्मेट भी
डिज़ाइन सिस्टम और वाइड-गैमट CSS के लिए OKLCH, कलर पिकर के लिए HWB और HSV, और पारदर्शी रंगों के लिए अल्फ़ा के साथ HEX पाएँ।
एक्सेसिबिलिटी साथ में
कंट्रास्ट अनुपात बिल्कुल WCAG 2 के अनुसार होते हैं और पास करने के लिए कभी राउंड अप नहीं किए जाते, इसलिए 4.49:1 को 4.5:1 नहीं माना जाता।
हल्के और गहरे शेड
स्वैच के नीचे पाँच हल्के और पाँच गहरे स्टेप होते हैं। किसी पर क्लिक करके उसे मौजूदा रंग बनाएँ।
अक्सर पूछे जाने वाले प्रश्न
HEX और RGB में क्या अंतर है?
रंग में कोई अंतर नहीं। दोनों लाल, हरे और नीले को 0 से 255 तक बताते हैं। HEX हर एक को दो हेक्स अंकों में लिखता है, इसलिए rgb(58, 91, 217) का मतलब #3a5bd9 है। HEX छोटा होता है, जबकि rgb() पढ़ना और हाथ से बदलना आसान है।
HSL क्या है?
ह्यू, सैचुरेशन और लाइटनेस। ह्यू डिग्री में कलर व्हील पर जगह है (0 लाल, 120 हरा, 240 नीला), सैचुरेशन बताता है कि रंग कितना चटकीला है, और लाइटनेस 0% पर काले से 100% पर सफ़ेद तक जाती है। इससे किसी रंग के हल्के, गहरे या फीके वर्ज़न लिखना आसान होता है।
CMYK मेरे प्रिंट किए रंग से मेल क्यों नहीं खाता?
स्क्रीन रोशनी मिलाती है और प्रिंटर इंक, और परिणाम इंक, कागज़ और प्रिंटर प्रोफ़ाइल पर निर्भर करता है। दिखाया गया CMYK सादे स्टैंडर्ड फ़ॉर्मूले से बनता है, इसलिए इसे शुरुआती बिंदु मानें और सटीक वैल्यू अपने प्रिंटर से पूछें।
WCAG कंट्रास्ट अनुपात क्या है?
यह मापता है कि दो रंग चमक में कितने अलग हैं, 1:1 (एक जैसे) से 21:1 (सफ़ेद पर काला) तक। WCAG AA सामान्य टेक्स्ट के लिए कम से कम 4.5:1 और बड़े टेक्स्ट के लिए 3:1 माँगता है; AAA 7:1 और 4.5:1 माँगता है।
OKLCH क्या है?
CSS में रंग लिखने का एक नया तरीका, लाइटनेस, क्रोमा और ह्यू के ज़रिए, जो इस पर आधारित है कि लोग रंग कैसे देखते हैं। लाइटनेस बदलने पर ह्यू वैसा ही दिखता है, इसलिए यह डिज़ाइन सिस्टम और कलर स्केल में लोकप्रिय है।
रंग का नाम कैसे काम करता है?
अगर रंग 148 CSS रंग नामों में से किसी से बिल्कुल मेल खाता है, तो वह नाम दिखता है। वरना आपको दिखने में सबसे मिलता-जुलता नाम मिलता है, जो किसी रंग को शब्दों में बताने के लिए काम आता है।