कलर कोड जनरेटर और पिकर

कलर कोड, वेरिएशन्स, हार्मोनीज जनरेट करें और कंट्रास्ट रेशियो चेक करें।

रंग रूपांतरण

HEX

#ff00ff

Magenta / Fuchsia

HEX
#ff00ff
HSL
300, 100, 50
RGB
255, 0, 255
XYZ
59, 28, 97
CMYK
0, 100, 0, 0
LUV
60,103,-102
LAB
60, 98, -61
HWB
300, 0, 0

विविधताएँ

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

प्रो टिप: हॉवर स्टेट्स और शैडोज़ के लिए शेड्स का उपयोग करें, हाइलाइट्स और बैकग्राउंड्स के लिए टिंट्स का उपयोग करें।

शेड्स

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

टिंट्स

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

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

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

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

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

रंग संयोजन

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

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

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

यह क्यों महत्वपूर्ण है

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

पूरक

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

#ff00ff
के लिए सबसे अच्छा: उच्च-प्रभाव डिज़ाइन, CTA, लोगो

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

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

के लिए सबसे अच्छा: उज्ज्वल लेकिन संतुलित लेआउट

त्रिक

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

के लिए सबसे अच्छा: खिलवाड़, ऊर्जावान डिज़ाइन

समानार्थी

समान चमक और संतृप्ति के तीन रंग जिनके ह्यू रंग पहिया पर एक दूसरे के पास होते हैं, 30 डिग्री के अंतर पर। चिकनी संक्रमण।

के लिए सबसे अच्छा: प्रकृति-प्रेरित, शांत इंटरफेस

एकरंगी

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

के लिए सबसे अच्छा: मिनिमलिस्ट, परिष्कृत डिज़ाइन

चतुष्क

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

के लिए सबसे अच्छा: समृद्ध, विविध रंग योजनाएँ

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

संतुलन

एक प्रमुख रंग का उपयोग करें, सहायक रंग के साथ समर्थन करें, और हल्के से उच्चारण करें।

विपरीत

पढ़ने की क्षमता और पहुंच के लिए पर्याप्त विपरीत सुनिश्चित करें।

सामंजस्य

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

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

पाठ की पठनीयता के लिए WCAG एक्सेसिबिलिटी मानकों को पूरा करने के लिए रंग संयोजनों का परीक्षण करें।

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

उन्नत कंट्रास्ट चेकर

स्लाइडर्स, कई पूर्वावलोकन और अधिक के साथ बारीकी से समायोजित करें

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

- Albert Einstein

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

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

रंग विश्लेषण

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

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