रंग कोड जनरेटर और पिकर

रंग कोड, विविधताएं, सामंजस्य उत्पन्न करें और कंट्रास्ट अनुपात की जांच करें।

रंग-रूपांतरण

HEX

#ff0000

Red

HEX
#ff0000
HSL
0, 100, 50
RGB
255, 0, 0
XYZ
41, 21, 2
CMYK
0, 100, 100, 0
LUV
53,190,36,
LAB
53, 80, 67
HWB
0, 0, 0

बदलाव

इस अनुभाग का उद्देश्य आपके चयनित रंग के टिंट (शुद्ध सफेद मिलाया गया) और शेड (शुद्ध काला मिलाया गया) को 10% वृद्धि में सटीक रूप से तैयार करना है।

प्रो टिप: हॉवर स्थिति और छाया के लिए शेड्स का उपयोग करें, तथा हाइलाइट्स और पृष्ठभूमि के लिए टिंट्स का उपयोग करें।

रंगों

आपके आधार रंग में काला रंग मिलाकर गहरे रंग की विविधताएं बनाई जाती हैं।

टिंट करता

आपके आधार रंग में सफेद रंग मिलाकर हल्के बदलाव बनाए जाते हैं।

सामान्य उपयोग के मामले

  • UI घटक स्थितियाँ (हॉवर, सक्रिय, अक्षम)
  • छाया और हाइलाइट के साथ गहराई बनाना
  • सुसंगत रंग प्रणालियों का निर्माण

डिज़ाइन सिस्टम टिप

ये विविधताएँ एक सुसंगत रंग पैलेट का आधार बनती हैं। अपने पूरे प्रोजेक्ट में एकरूपता बनाए रखने के लिए इन्हें निर्यात करें।

रंग संयोजन

हर सामंजस्य का अपना एक अलग मूड होता है। सामंजस्य का इस्तेमाल करके ऐसे रंग संयोजनों पर विचार करें जो एक साथ अच्छे से काम करें।

का उपयोग कैसे करें

किसी भी रंग पर क्लिक करके उसका हेक्स मान कॉपी करें। ये संयोजन गणितीय रूप से दृश्य सामंजस्य बनाने में सिद्ध होते हैं।

यह क्यों मायने रखती है

रंगों का सामंजस्य आपके डिजाइनों में संतुलन पैदा करता है और विशिष्ट भावनाएं उत्पन्न करता है।

पूरक

रंग चक्र पर एक रंग और उसका विपरीत, +180 डिग्री का रंग। उच्च कंट्रास्ट।

#ff0000
इसके लिए सर्वश्रेष्ठ: उच्च प्रभाव वाले डिज़ाइन, CTA, लोगो

विभाजित-पूरक

एक रंग और उसके पूरक के दो आसन्न रंग, मुख्य रंग के विपरीत मान से +/-30 डिग्री की रंगत। सीधे पूरक की तरह बोल्ड, लेकिन ज़्यादा बहुमुखी।

इसके लिए सर्वश्रेष्ठ: जीवंत किन्तु संतुलित लेआउट

त्रिआधारी

रंग चक्र पर तीन रंग समान रूप से फैले हुए हैं, प्रत्येक रंग में 120 डिग्री का अंतर है। एक रंग को हावी होने देना और बाकी रंगों को आकर्षक रंगों के रूप में इस्तेमाल करना सबसे अच्छा है।

इसके लिए सर्वश्रेष्ठ: चंचल, ऊर्जावान डिजाइन

अनुरूप

समान चमक और संतृप्ति वाले तीन रंग, जिनके रंग चक्र पर एक-दूसरे से सटे हुए हैं, 30 डिग्री की दूरी पर। सहज संक्रमण।

इसके लिए सर्वश्रेष्ठ: प्रकृति से प्रेरित, शांत इंटरफेस

एकरंगा

एक ही रंग के तीन रंग, चमक मान +/-50%। सूक्ष्म और परिष्कृत।

इसके लिए सर्वश्रेष्ठ: न्यूनतम, परिष्कृत डिजाइन

टेट्राडिक

पूरक रंगों के दो सेट, 60 डिग्री के अंतर से अलग।

इसके लिए सर्वश्रेष्ठ: समृद्ध, विविध रंग योजनाएँ

रंग सिद्धांत के सिद्धांत

संतुलन

एक प्रमुख रंग का प्रयोग करें, द्वितीयक रंग से समर्थन करें, तथा संयम से उच्चारण करें।

अंतर

पठनीयता और सुगमता के लिए पर्याप्त कंट्रास्ट सुनिश्चित करें।

सद्भाव

रंगों को एक साथ मिलकर एकीकृत दृश्य अनुभव का सृजन करना चाहिए।

रंग कंट्रास्ट चेकर

यह सुनिश्चित करने के लिए रंग संयोजनों का परीक्षण करें कि वे पाठ पठनीयता के लिए WCAG सुगम्यता मानकों को पूरा करते हैं।

टेक्स्ट का रंग
बैकग्राउंड का रंग
कंट्रास्ट
1.00
Fail
बहुत खराब
छोटा टेक्स्ट
✖︎
बड़ा टेक्स्ट
✖︎
WCAG मानक
AA:सामान्य टेक्स्ट के लिए न्यूनतम कंट्रास्ट अनुपात 4.5:1 और बड़े टेक्स्ट के लिए 3:1 होना चाहिए। अधिकांश वेबसाइटों के लिए आवश्यक।
AAA:सामान्य पाठ के लिए 7:1 और बड़े पाठ के लिए 4.5:1 का उन्नत कंट्रास्ट अनुपात। इष्टतम पहुँच के लिए अनुशंसित।
सभी टेक्स्ट आकारों के लिए खराब कंट्रास्ट।

उन्नत कंट्रास्ट परीक्षक

स्लाइडर्स, एकाधिक पूर्वावलोकन और अधिक के साथ फ़ाइन-ट्यून करें

हर कोई प्रतिभाशाली है। लेकिन अगर आप किसी मछली को उसके पेड़ पर चढ़ने की क्षमता के आधार पर आंकेंगे, तो वह जीवन भर यह मानकर जीएगी कि वह मूर्ख है।

- Albert Einstein

तकनीकी प्रारूप

व्यावहारिक प्रारूप

रंग विश्लेषण

अंधापन सिम्युलेटर

रचनात्मक पहलू