कलर पिकर
कोई भी कलर चुनें और उसका कोड हर आम फॉर्मेट में पाएँ, कॉपी करने के लिए तैयार। मेल खाते पैलेट बनाएँ, फोटो अपलोड किए बिना उसके मुख्य कलर निकालें, और जाँचें कि टेक्स्ट और बैकग्राउंड की जोड़ी WCAG कंट्रास्ट पर खरी उतरती है या नहीं।
कलर पिकर
हर फ़ॉर्मैट में कलर कोड
- HEX#2F6FED
- RGB47, 111, 237
- HSL220°, 84%, 56%
- HSB / HSV220°, 80%, 93%
- CMYK (लगभग)80%, 53%, 0%, 7%
- CSS rgb()rgb(47 111 237)
- CSS hsl()hsl(220 84% 56%)
इस रंग से पैलेट
कॉम्प्लिमेंट्री
एनालॉगस
ट्रायडिक
टिंट (सफ़ेद मिलाकर)
शेड (काला मिलाकर)
इमेज से पैलेट
आपकी इमेज आपका अपना ब्राउज़र पढ़ता है और कभी अपलोड नहीं होती: पिक्सल इसी डिवाइस पर कैनवस में सैंपल किए जाते हैं और कुछ भी कहीं नहीं भेजा जाता।
यहाँ फ़ोटो, स्क्रीनशॉट या लोगो डालें
आपकी इमेज के छह प्रमुख रंग यहाँ दिखेंगे। पिकर में लोड करने के लिए किसी स्वैच पर क्लिक करें।
कॉन्ट्रास्ट चेकर (WCAG 2.1)
बड़े टेक्स्ट का नमूना
The quick brown fox jumps over the lazy dog. 0123456789
- AA · सामान्य टेक्स्टपास
- AAA · सामान्य टेक्स्टपास
- AA · बड़ा टेक्स्टपास
- AAA · बड़ा टेक्स्टपास
बड़े टेक्स्ट का मतलब है कम से कम 18 pt (24 px) सामान्य या 14 pt (लगभग 18.7 px) बोल्ड। AA के लिए सामान्य टेक्स्ट में 4.5:1 और बड़े टेक्स्ट में 3:1 चाहिए; AAA के लिए 7:1 और 4.5:1।
आम CSS नामित रंग
बीस कीवर्ड जिन्हें हर ब्राउज़र समझता है, उनके सटीक HEX, RGB और HSL मान के साथ।
| नाम | HEX | RGB | HSL |
|---|---|---|---|
black | #000000 | 0, 0, 0 | 0°, 0%, 0% |
white | #ffffff | 255, 255, 255 | 0°, 0%, 100% |
gray | #808080 | 128, 128, 128 | 0°, 0%, 50% |
silver | #c0c0c0 | 192, 192, 192 | 0°, 0%, 75% |
red | #ff0000 | 255, 0, 0 | 0°, 100%, 50% |
crimson | #dc143c | 220, 20, 60 | 348°, 83%, 47% |
maroon | #800000 | 128, 0, 0 | 0°, 100%, 25% |
tomato | #ff6347 | 255, 99, 71 | 9°, 100%, 64% |
coral | #ff7f50 | 255, 127, 80 | 16°, 100%, 66% |
orange | #ffa500 | 255, 165, 0 | 39°, 100%, 50% |
gold | #ffd700 | 255, 215, 0 | 51°, 100%, 50% |
yellow | #ffff00 | 255, 255, 0 | 60°, 100%, 50% |
olive | #808000 | 128, 128, 0 | 60°, 100%, 25% |
green | #008000 | 0, 128, 0 | 120°, 100%, 25% |
teal | #008080 | 0, 128, 128 | 180°, 100%, 25% |
aqua | #00ffff | 0, 255, 255 | 180°, 100%, 50% |
blue | #0000ff | 0, 0, 255 | 240°, 100%, 50% |
navy | #000080 | 0, 0, 128 | 240°, 100%, 25% |
purple | #800080 | 128, 0, 128 | 300°, 100%, 25% |
rebeccapurple | #663399 | 102, 51, 153 | 270°, 50%, 40% |
HEX, RGB, HSL और HSB असल में क्या बताते हैं
इस पेज का हर रंग sRGB में है, जो 1990 के दशक के आख़िर में ब्राउज़रों के अपनाने के बाद से वेब का डिफ़ॉल्ट कलर स्पेस है। स्क्रीन लाल, हरी और नीली रोशनी मिलाती है, और हर चैनल के 256 लेवल (0–255) होते हैं, जिनसे कुल 16,777,216 रंग बनते हैं। RGB इन तीन संख्याओं को सीधे लिखता है; HEX वही तीन संख्याएँ 16 के आधार पर लिखता है, हर एक के दो अंक, इसलिए #FF6600 का मतलब है लाल 255, हरा 102, नीला 0। तीन अंकों वाला छोटा रूप हर अंक को दोहराता है: #F60 यानी #FF6600।
HSL और HSB (जिसे HSV भी कहते हैं) उन्हीं रंगों को इस तरह बताते हैं कि उन्हें हाथ से एडजस्ट करना आसान हो। ह्यू कलर व्हील पर एक कोण है: 0° लाल, 120° हरा, 240° नीला। फ़र्क आख़िरी संख्या में है। HSL में लाइटनेस 100% हमेशा सफ़ेद होती है और 50% उस ह्यू का सबसे शुद्ध रूप; HSB में ब्राइटनेस 100% शुद्ध ह्यू है और सफ़ेद के लिए सैचुरेशन 0% चाहिए। Photoshop और Figma जैसे डिज़ाइन ऐप अपने पिकर में HSB इस्तेमाल करते हैं, जबकि CSS hsl() को सीधे समझता है, इसीलिए ऊपर दोनों दिए गए हैं।
CMYK वैल्यू सिर्फ़ अनुमान क्यों है
स्क्रीन रोशनी जोड़ती है; प्रिंटर सियान, मैजेंटा, पीली और काली स्याही से उसे घटाते हैं। दोनों सिस्टम रंगों की अलग-अलग रेंज कवर करते हैं, जिन्हें गैमट कहते हैं। बहुत सैचुरेटेड स्क्रीन रंग, जैसे चटक RGB हरा, इलेक्ट्रिक नीला या नियॉन नारंगी, प्रोसेस स्याही की पहुँच से बाहर होते हैं, इसलिए प्रिंट में वे मॉनिटर से फीके दिखते हैं।
यहाँ की CMYK संख्याएँ ICC प्रोफ़ाइल के बिना सादे गणितीय कन्वर्शन से बनी हैं, जो मोटे अंदाज़े के लिए ठीक है, प्रेस के लिए नहीं। प्रिंटर अपने कागज़ और प्रेस की प्रोफ़ाइल से कन्वर्ट करता है, जैसे यूरोप में FOGRA39 या अमेरिका में GRACoL, और एक ही RGB रंग हर प्रोफ़ाइल में अलग स्याही प्रतिशत दे सकता है। प्रिंट के काम के लिए RGB या HEX वैल्यू के साथ वही प्रोफ़ाइल बताएँ जो आपका प्रिंटर माँगे।
कंट्रास्ट रेशियो कैसे निकाला जाता है
WCAG 2.1 दो रंगों की रिलेटिव ल्यूमिनेंस की तुलना करता है: हल्के रंग में 0.05 जोड़कर गहरे रंग में 0.05 जोड़ने से भाग दिया जाता है। नतीजा 1:1 (एक जैसे रंग) से 21:1 (सफ़ेद पर काला) तक होता है। लेवल AA में सामान्य टेक्स्ट के लिए कम से कम 4.5:1 और बड़े टेक्स्ट के लिए 3:1 चाहिए, यानी 18 पॉइंट या 14 पॉइंट बोल्ड; लेवल AAA में यह 7:1 और 4.5:1 हो जाता है। इनपुट बॉर्डर और आइकन जैसे यूज़र-इंटरफ़ेस हिस्सों को सक्सेस क्राइटेरियन 1.4.11 के तहत आसपास के मुक़ाबले 3:1 चाहिए।
ल्यूमिनेंस में हरे को नीले से कहीं ज़्यादा वज़न मिलता है, क्योंकि आँख उसके प्रति सबसे संवेदनशील है। इसीलिए सफ़ेद पर पीला टेक्स्ट बुरी तरह फ़ेल होता है जबकि सफ़ेद पर गहरा नीला आसानी से पास, भले दोनों रंग पूरी तरह सैचुरेटेड दिखें। लोगो और केवल सजावटी टेक्स्ट इस नियम से बाहर हैं।
फोटो या लोगो से कलर पैलेट कैसे निकालें
इमेज पैलेट आपकी फ़ाइल को ब्राउज़र के कैनवस से पढ़ता है, लंबी तरफ़ से ज़्यादा से ज़्यादा 200 पिक्सल तक छोटा करता है और 1982 में Paul Heckbert के बताए मीडियन-कट तरीक़े से मिलते-जुलते पिक्सल के ग्रुप बनाता है: रंग की रेंज को उसके सबसे चौड़े चैनल पर बार-बार बाँटा जाता है जब तक छह ग्रुप न बचें, और हर ग्रुप का औसत एक स्वैच बनता है। पारदर्शी पिक्सल अनदेखे किए जाते हैं, इसलिए पारदर्शी बैकग्राउंड वाले लोगो से लोगो के ही रंग मिलते हैं।
रंग मिल जाने के बाद फ़्लैट लोगो अक्सर वेक्टर के रूप में बेहतर रहता है। इमेज से SVG कन्वर्टर उसे इन्हीं सटीक रंगों वाली आकृतियों में ट्रेस करता है, और अगर आप चैनल हेडर डिज़ाइन कर रहे हैं तो YouTube बैनर रीसाइज़र आर्टवर्क को सेफ़ एरिया का ध्यान रखते हुए 2560 × 1440 में फ़िट करता है।
अक्सर पूछे जाने वाले सवाल
- CSS का "green" RGB पिकर वाले हरे से गहरा क्यों है?
- कीवर्ड green का मान #008000 है, जो पुराने 16-रंग वाले HTML पैलेट से आया मध्यम हरा रंग है। पूरी तरह सैचुरेटेड #00FF00 को lime कहते हैं। CSS की पूरी सूची में ऐसे और चौंकाने वाले मामले हैं: gray (#808080) darkgray (#A9A9A9) से ज़्यादा गहरा है।
- पैलेट निकालते समय क्या मेरी इमेज अपलोड होती है?
- नहीं। फ़ाइल आपके ब्राउज़र में खुलती है, मेमोरी में कैनवस पर बनाई जाती है और वहीं विश्लेषित होती है। इमेज के साथ कोई रिक्वेस्ट नहीं भेजी जाती, और टैब बंद करते ही वह हट जाती है।
- बॉडी टेक्स्ट के लिए कितना कंट्रास्ट रेशियो चाहिए?
- WCAG 2.1 लेवल AA के लिए कम से कम 4.5:1, और लेवल AAA के लिए 7:1। 18 पॉइंट या उससे बड़े, या 14 पॉइंट बोल्ड हेडिंग AA के लिए 3:1 रख सकते हैं। कई डिज़ाइन सिस्टम हर जगह 4.5:1 रखते हैं ताकि मद्धम स्क्रीन और धूप में भी टेक्स्ट पढ़ने लायक रहे।
- क्या मैं ट्रांसपेरेंसी वाला 8 अंकों का HEX कोड इस्तेमाल कर सकता हूँ?
- हाँ, CSS में। आख़िरी दो अंक अल्फ़ा चैनल हैं, इसलिए #2F6FED80 वही नीला रंग लगभग 50% अपारदर्शिता पर है। यह पिकर अपारदर्शी रंगों के साथ काम करता है, इसलिए छह अंक दिखाता है; ज़रूरत हो तो अल्फ़ा की जोड़ी खुद जोड़ लें।
- CSS में कितने नाम वाले कलर हैं?
- CSS Color Module Level 4 में 148 कलर कीवर्ड हैं, जिनमें gray और grey जैसी दोहरी स्पेलिंग भी गिनी गई हैं। सबसे नया rebeccapurple (#663399) है, जिसे 2014 में CSS लेखक Eric Meyer की बेटी Rebecca Meyer की याद में जोड़ा गया।