डेवलपर टूल · 16 टूल

कलर कोड कन्वर्टर

HEX, RGB, HSL, HWB या OKLCH में कोई रंग टाइप करें, या चुनें, और उसे बाकी हर फ़ॉर्मैट में पाएँ। कंट्रास्ट जाँच बताती है कि उस पर लिखा टेक्स्ट WCAG के स्तरों पर खरा उतरता है या नहीं।

इनपुट

HEX, rgb(), hsl(), hwb() या oklch(), पारदर्शिता के साथ या बिना

HEX के रूप में पढ़ा गया

परिणाम

  • HEX#2445D6
  • RGBrgb(36, 69, 214)
  • HSLhsl(229, 71%, 49%)
  • HWBhwb(229 14% 16%)
  • OKLCHoklch(47.27% 0.2232 266.62)

कंट्रास्ट (WCAG 2)

  • सफ़ेद के साथ

    7.24:1

    • AA: पास
    • AA बड़ा टेक्स्ट: पास
    • AAA: पास
    • AAA बड़ा टेक्स्ट: पास

  • काले के साथ

    2.89:1

    • AA: फ़ेल
    • AA बड़ा टेक्स्ट: फ़ेल
    • AAA: फ़ेल
    • AAA बड़ा टेक्स्ट: फ़ेल

  • #F5F6F8 के साथ

    6.70:1

    • AA: पास
    • AA बड़ा टेक्स्ट: पास
    • AAA: फ़ेल
    • AAA बड़ा टेक्स्ट: पास

पूरी तरह आपके ब्राउज़र में चलता है। आप जो भी डालते हैं, वह किसी सर्वर पर नहीं भेजा जाता।

कलर कोड कैसे बदलें

  1. रंग डालें

    #2445D6, rgb(36, 69, 214) या oklch(47% 0.22 267) जैसी वैल्यू टाइप या पेस्ट करें, या कलर पिकर इस्तेमाल करें।

  2. जो फ़ॉर्मैट चाहिए, उसे कॉपी करें

    HEX, RGB, HSL, HWB और OKLCH एक साथ दिखते हैं, हर एक के अपने कॉपी बटन के साथ।

  3. कंट्रास्ट जाँचें

    सफ़ेद, काले और अपनी पसंद के रंग के साथ कंट्रास्ट अनुपात देखें, WCAG AA और AAA के नतीजों के साथ।

एक रंग, पाँच तरीके

HEX और RGB रंग के लाल, हरे और नीले हिस्से बताते हैं। HSL और HWB उसे ह्यू (रंगत) से बताते हैं, जिसे हाथ से बदलना आसान है। OKLCH एक नया CSS फ़ॉर्मैट है जिसकी लाइटनेस इस बात से मेल खाती है कि रंग कितने चमकीले दिखते हैं, इसलिए इससे बने पैलेट एक जैसे संतुलित रहते हैं। पारदर्शिता हर फ़ॉर्मैट में बनी रहती है।

कंट्रास्ट और WCAG

WCAG सामान्य टेक्स्ट के लिए कम से कम 4.5:1 (AA) और AAA के लिए 7:1 का कंट्रास्ट अनुपात माँगता है। बड़े टेक्स्ट (लगभग 24px से, या बोल्ड में 19px से) के लिए AA में 3:1 और AAA में 4.5:1 चाहिए। अनुपात नीचे की ओर राउंड किए जाते हैं, इसलिए जो रंग पास दिखता है, वह सच में पास होता है।

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

मेरा OKLCH रंग अलग क्यों दिखता है?

OKLCH ऐसे रंग भी बता सकता है जिन्हें sRGB रेंज वाली स्क्रीन नहीं दिखा सकतीं। ऐसे रंगों को लाइटनेस और ह्यू बनाए रखते हुए क्रोमा घटाकर रेंज में लाया जाता है, और ऐसा होने पर एक नोट आपको बताता है।

पारदर्शी रंगों का कंट्रास्ट कैसे जाँचा जाता है?

पारदर्शी रंग को पहले सफ़ेद पर रखा जाता है, जैसा वह सफ़ेद पेज पर दिखेगा, और उसी नतीजे की तुलना की जाती है।

क्या कुछ सर्वर पर भेजा जाता है?

नहीं। सभी कन्वर्ज़न और कंट्रास्ट जाँच आपके ब्राउज़र में होती हैं।