रंग रूपांतरण
#878d91
Oslo Gray
विविधताएँ
इस अनुभाग का उद्देश्य आपके चयनित रंग के टिंट्स (शुद्ध सफेद जोड़ा गया) और शेड्स (शुद्ध काला जोड़ा गया) को 10% वृद्धि में सटीक रूप से उत्पन्न करना है।
प्रो टिप: हॉवर स्टेट्स और शैडोज़ के लिए शेड्स का उपयोग करें, हाइलाइट्स और बैकग्राउंड्स के लिए टिंट्स का उपयोग करें।
शेड्स
गहरे विविधताएँ जो आपके बेस रंग में काला जोड़कर बनाई जाती हैं।
टिंट्स
हल्की विविधताएँ जो आपके बेस रंग में सफेद जोड़कर बनाई जाती हैं।
सामान्य उपयोग के मामले
- • UI घटक स्टेट्स (हॉवर, सक्रिय, अक्षम)
- • शैडोज़ और हाइलाइट्स के साथ गहराई बनाना
- • सुसंगत रंग प्रणालियाँ बनाना
डिज़ाइन सिस्टम टिप
ये विविधताएँ एक सुसंगत रंग पैलेट की नींव बनाती हैं। अपने पूरे प्रोजेक्ट में सुसंगतता बनाए रखने के लिए इन्हें निर्यात करें।
रंग संयोजन
प्रत्येक हार्मनी का अपना मूड होता है। ऐसे रंग संयोजनों को सोचने के लिए हार्मनी का उपयोग करें जो एक साथ अच्छी तरह से काम करते हैं।
कैसे उपयोग करें
किसी भी रंग पर क्लिक करें उसके hex मान को कॉपी करने के लिए। ये संयोजन दृश्य सामंजस्य बनाने के लिए गणितीय रूप से सिद्ध हैं।
यह क्यों महत्वपूर्ण है
रंग हार्मनी संतुलन बनाते हैं और आपके डिज़ाइनों में विशिष्ट भावनाओं को उत्पन्न करते हैं।
पूरक
एक रंग और रंग पहिया पर इसका विपरीत, +180 डिग्री का ह्यू। उच्च विपरीत।
विभाजित-पूरक
एक रंग और इसके पूरक के पास के दो रंग, मुख्य रंग के विपरीत मान से +/-30 डिग्री का ह्यू। सीधे पूरक की तरह बोल्ड, लेकिन अधिक बहुमुखी।
त्रिक
रंग पहिया के साथ समान रूप से फैले तीन रंग, प्रत्येक 120 डिग्री के ह्यू के अंतर पर। सबसे अच्छा है कि एक रंग को हावी होने दें और अन्य को उच्चारण के रूप में उपयोग करें।
समानार्थी
समान चमक और संतृप्ति के तीन रंग जिनके ह्यू रंग पहिया पर एक दूसरे के पास होते हैं, 30 डिग्री के अंतर पर। चिकनी संक्रमण।
एकरंगी
समान ह्यू के तीन रंग जिनके चमक मान +/-50% होते हैं। सूक्ष्म और परिष्कृत।
चतुष्क
दो सेट के पूरक रंग, जो 60 डिग्री के ह्यू से अलग होते हैं।
रंग सिद्धांत के सिद्धांत
संतुलन
एक प्रमुख रंग का उपयोग करें, सहायक रंग के साथ समर्थन करें, और हल्के से उच्चारण करें।
विपरीत
पढ़ने की क्षमता और पहुंच के लिए पर्याप्त विपरीत सुनिश्चित करें।
सामंजस्य
रंगों को एकीकृत दृश्य अनुभव बनाने के लिए एक साथ काम करना चाहिए।
रंग कंट्रास्ट चेकर
पाठ की पठनीयता के लिए WCAG एक्सेसिबिलिटी मानकों को पूरा करने के लिए रंग संयोजनों का परीक्षण करें।
पाठ का रंग
पृष्ठभूमि का रंग
कंट्रास्ट
WCAG मानक
उन्नत कंट्रास्ट चेकर
स्लाइडर्स, कई पूर्वावलोकन और अधिक के साथ बारीकी से समायोजित करें
हर कोई एक जीनियस है। लेकिन अगर आप एक मछली को उसके पेड़ पर चढ़ने की क्षमता से आंकते हैं, तो वह अपना पूरा जीवन यह मानते हुए बिताएगी कि वह मूर्ख है।