मुफ़्त रंग टूल्स

हमारे रंग टूल्स के बारे में

Absolutool में डिज़ाइनरों, डेवलपरों और एक्सेसिबिलिटी पेशेवरों के लिए 7 विशेष रंग टूल्स शामिल हैं। HEX, RGB, HSL और HSB प्रारूपों के बीच परिवर्तित करें। रंग सिद्धांत का उपयोग करके सामंजस्यपूर्ण पैलेट बनाएँ। यह सुनिश्चित करने के लिए कि आपके डिज़ाइन सभी के लिए सुलभ हैं, WCAG कंट्रास्ट अनुपात की जाँच करें।

कलर ब्लाइंडनेस सिम्युलेटर 8 प्रकार की रंग दृष्टि कमी को सटीक रूप से मॉडल करने के लिए Brettel/Viénot शोध मैट्रिक्स का उपयोग करता है · एक इमेज अपलोड करें या व्यक्तिगत रंगों का परीक्षण करें। डिज़ाइन सिस्टम टोकन के लिए कलर शेड्स जनरेटर, सटीक मिश्रण के लिए कलर मिक्सर, और किसी भी फ़ोटो से रंग निकालने के लिए इमेज कलर पिकर का उपयोग करें। सभी टूल पूरी तरह आपके ब्राउज़र में चलते हैं।

वेब पर रंग मॉडल

एक आधुनिक वेब पेज पर हर पिक्सेल को एक रंग मान से वर्णित किया जाता है जिसे ब्राउज़र व्याख्यायित करता है और GPU से प्रस्तुत करने को कहता है। दो प्रारूप जो आप सबसे अधिक देखेंगे वे हैं HEX (छह-अंकीय हेक्साडेसिमल त्रिक जैसे #3b82f6) और RGB (दशमलव मान जैसे rgb(59 130 246))। दोनों एक ही बात का वर्णन करते हैं: योगात्मक रंग का उपयोग करने वाली स्क्रीन पर कितना लाल, हरा और नीला प्रकाश मिलाना है। एक मानक 24-बिट डिस्प्ले प्रति चैनल 256 स्तर देता है, जिसका अर्थ है कि लगभग 1.678 करोड़ अद्वितीय रंग संबोधित किए जा सकते हैं। HEX अधिक छोटा है, RGB पर गणना करना अधिक आसान है, और दोनों आपस में बदले जा सकते हैं।

HSL (रंगत, संतृप्ति, चमक) और HSB (रंगत, संतृप्ति, उज्ज्वलता) उसी स्क्रीन रंग का वर्णन करते हैं, पर ऐसे निर्देशांकों में जो इस बात के अधिक निकट हैं कि हम मनुष्य इसे कैसे महसूस करते हैं। रंगत रंग-चक्र पर रंग की स्थिति है, 0° (लाल) से 360° तक। संतृप्ति बताती है कि रंग कितना सजीव है, धूसर से पूर्ण शुद्ध तक। चमक नियंत्रित करती है कि कितना सफ़ेद या काला मिलाया गया है। HSL वह प्रारूप है जिसे डिज़ाइनर डिज़ाइन सिस्टम बनाते समय आमतौर पर चुनते हैं, क्योंकि एक अकेले चैनल को समायोजित करने से एक पूर्वानुमेय बदलाव होता है, जैसे होवर अवस्था के लिए किसी बटन को 10% गहरा करना। CSS मूल रूप से HEX, RGB, HSL, और नए LCH तथा OKLCH का समर्थन करता है।

इन सभी प्रारूपों के पीछे एक रंग स्थान होता है, जो ठीक-ठीक परिभाषित करता है कि भौतिक रूप में “लाल 255” का क्या अर्थ है। वेब का डिफ़ॉल्ट sRGB है, जिसे 1996 में IEC द्वारा मानकीकृत किया गया और यह वही गैमट है जिसे लगभग हर डेस्कटॉप और फ़ोन डिस्प्ले कवर करता है। नए Apple, OLED और उच्च-स्तरीय डिवाइस Display P3 का समर्थन करते हैं, जो एक व्यापक गैमट है और लगभग 25% अधिक संतृप्त लाल और हरे रंग जोड़ता है। CSS अब आपको इसका लाभ उठाने के लिए color(display-p3 1 0 0) लिखने देता है। इस साइट के अधिकांश रंग उपकरण sRGB में काम करते हैं और हर ब्राउज़र तक पहुँचते हैं; P3 कार्यप्रवाह बदले बिना उपलब्ध दायरे को बढ़ाता है।

WCAG रंग कंट्रास्ट को समझना

वेब कंटेंट एक्सेसिबिलिटी दिशानिर्देश (WCAG 2.1) टेक्स्ट और उसकी पृष्ठभूमि के बीच कंट्रास्ट के लिए संख्यात्मक सीमाएँ तय करते हैं। स्तर AA, वह स्तर जिसे अधिकांश एक्सेसिबिलिटी ऑडिट लक्ष्य बनाते हैं, सामान्य टेक्स्ट के लिए कम-से-कम 4.5:1 और बड़े टेक्स्ट के लिए 3:1 (18 pt सामान्य या 14 pt बोल्ड और उससे ऊपर) की माँग करता है। स्तर AAA इन्हें 7:1 और 4.5:1 तक कसता है। यह अनुपात हर रंग की सापेक्ष चमक से गणित किया जाता है, जो एक अवधारणात्मक चमक मान है, जिसे IEC 61966-2-1 सूत्र द्वारा sRGB प्राथमिक रंगों से निकाला जाता है। दो रंग जो “लगभग एक जैसे” दिखते हैं फिर भी पास हो सकते हैं, और दो रंग जो पूरी तरह भिन्न दिखते हैं असफल हो सकते हैं यदि एक धूसर पर धूसर हो।

ये आँकड़े मायने रखते हैं क्योंकि विश्व की लगभग 5% वयस्क आबादी में मोतियाबिंद, ग्लूकोमा, मधुमेह संबंधी रेटिनोपैथी, या उम्र से जुड़े मैक्युलर बदलावों के कारण मापने योग्य रूप से घटी हुई कंट्रास्ट संवेदनशीलता होती है। बाहर का तेज़ धूप सबके लिए प्रभावी कंट्रास्ट को घटाता है। तिरछे कोण से देखी गई मोबाइल स्क्रीन कंट्रास्ट को और घटाती हैं। WCAG की सीमाएँ इन वास्तविक परिस्थितियों में टेक्स्ट को पठनीय रखने के लिए बनाई गई हैं, न कि किसी मंद रोशनी वाले दफ़्तर में रंग-कैलिब्रेटेड मॉनिटर पर। APCA नामक एक नया एल्गोरिथम (WCAG 3.0 में आने वाला प्रतिस्थापन उम्मीदवार) उन चीज़ों को ध्यान में रखता है जिन्हें WCAG 2.x अनदेखा करता है, जैसे टेक्स्ट की मोटाई और ध्रुवता। फ़िलहाल, 4.5:1 AA वह मानक बना हुआ है जिसका संदर्भ अधिकांश नियामक देते हैं।

वर्णांधता और समावेशी डिज़ाइन

उत्तरी यूरोपीय वंश के लगभग 8% पुरुषों और 0.5% महिलाओं में किसी-न-किसी रूप की लाल-हरी वर्ण-दृष्टि की कमी होती है, और विश्व के आँकड़े भी पैमाने में समान हैं। तीन सबसे सामान्य प्रकार इस बात को प्रभावित करते हैं कि रेटिना की शंकु कोशिकाएँ विशिष्ट तरंगदैर्ध्यों पर कैसे प्रतिक्रिया करती हैं। ड्यूटेरानोमली (सबसे आम, लगभग 5% पुरुष) मध्यम-तरंगदैर्ध्य हरे प्रकाश के प्रति संवेदनशीलता को घटाती है। प्रोटानोमली लंबी-तरंगदैर्ध्य लाल प्रकाश के प्रति संवेदनशीलता को घटाती है। ट्रिटानोमली नीले-पीले की धारणा को प्रभावित करती है और कहीं अधिक दुर्लभ है। इस साइट के सिम्युलेटर Brettel, Viénot और Mollon (1997) के रंग-मैट्रिक्स व्युत्पादन का उपयोग करते हैं, जो रंग विज्ञान में इन रूपांतरणों के लिए मानक संदर्भ है।

व्यावहारिक डिज़ाइन नियम है “केवल रंग पर निर्भर न रहें”। एक लाल त्रुटि आइकन और एक हरा सफलता आइकन ड्यूटेरानोमली वाले कई उपयोगकर्ताओं को बिल्कुल एक जैसे दिखते हैं। एक भिन्न आकृति (चेकमार्क के बजाय एक क्रॉस), एक लेबल (“त्रुटि” या “सफलता”), या एक पैटर्न जोड़ना इसे अन्य उपयोगकर्ताओं के लिए बिना किसी लागत के ठीक कर देता है। ग्राफ़ और डैशबोर्ड के डिज़ाइन सबसे अधिक बार दोषी होते हैं, क्योंकि लेजेंड आमतौर पर एक रंग के नमूने पर निर्भर होते हैं। इस साइट का वर्णांधता सिम्युलेटर आपको प्रकाशित करने से पहले हर सामान्य कमी के माध्यम से एक वास्तविक स्क्रीनशॉट का पूर्वावलोकन करने देता है, ताकि आप उन तत्वों को पकड़ सकें जो उत्पादन में असफल हो जाते।

पैलेट के लिए रंग सिद्धांत

रंग-चक्र रंगतों को वृत्त के चारों ओर उनके कोण के अनुसार व्यवस्थित करता है: लाल 0° पर, पीला 60° पर, हरा 120° पर, सियान 180° पर, नीला 240° पर, मैजेंटा 300° पर। पूरक रंग एक-दूसरे के ठीक सामने स्थित होते हैं (लाल और सियान, नीला और नारंगी) और सबसे तीव्र कंट्रास्ट पैदा करते हैं। सादृश्य पैलेट चक्र पर सटे हुए दो से चार रंगतों का उपयोग करते हैं और शांत तथा एकीकृत लगते हैं, जो पृष्ठभूमियों और ग्रेडिएंट के लिए अच्छी तरह उपयुक्त हैं। त्रिकोणीय पैलेट 120° पर समान रूप से दूरी पर रखी तीन रंगतों का उपयोग करते हैं, जो विविधता के साथ संतुलन देते हैं। चतुष्कोणीय पैलेट एक आयत बनाती चार रंगतों का उपयोग करते हैं। ये नियम 19वीं सदी की कलाकारों की पुस्तिकाओं से उभरे, पर उससे मेल खाते हैं जिसकी अवधारणात्मक शोध ने तब से पुष्टि की है।

एक विशिष्ट ब्रांड सिस्टम को लगभग पाँच रंगों की आवश्यकता होती है: एक प्राथमिक ब्रांड रंग, एक एक्सेंट (अक्सर पूरक), एक तटस्थ धूसर, साथ ही एक सफलता-हरा और एक त्रुटि-लाल। इस साइट का पैलेट जनरेटर पहले सामंजस्य चुनता है फिर हर चुने गए रंग के लिए 10-चरणीय रंगत और छाया के पैमाने देता है, वही संरचना जिसे Tailwind, Material और Carbon जैसे डिज़ाइन सिस्टम उपयोग करते हैं। सुलभ पैलेट उपकरण जनरेशन को उन संयोजनों तक सीमित करता है जो सफ़ेद या गहरी पृष्ठभूमि पर WCAG AA कंट्रास्ट को पूरा करते हैं। दोनों उपकरण पूरी तरह आपके ब्राउज़र में चलते हैं, इसलिए किसी अप्रकाशित ब्रांड के लिए चुने गए रंग कभी कहीं नहीं भेजे जाते।

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