संख्या में रंग सिद्धांत

अलग-अलग लोग एक ही रंग को अलग-अलग नाम से दर्शा सकते हैं। उदाहरण के लिए, नीला रंग वास्तव में एक्वामरीन या स्वर्गीय हो सकता है। बहुत अधिक सटीक रूप से, रंग हेक्साडेसिमल कोड द्वारा निर्धारित किया जाता है, कुल में 16777216 संयोजन हैं। इसलिए, यह एक डिजाइनर के लिए उपयोगी हो सकता है कि वह अपने हेक्स कोड को देखकर रंग पहचान ले।

मूल बातें

आइए एक सरल के साथ शुरू करें: एक नियमित हेक्स कोड पर विचार करें, जहां संख्याओं के तीन जोड़े में से प्रत्येक आरजीबी रंगों में से एक को नियंत्रित करता है - लाल, हरा, नीला। नंबर 0 से 9 तक के नंबर और A से F तक के अक्षर ले सकते हैं।



रंग संतृप्ति इस बात पर निर्भर करती है कि जोड़े में संख्याएँ कितनी भिन्न हैं। जोड़े का मूल्य जितना अधिक होगा, रंग उतना ही उज्ज्वल होगा। प्रत्येक जोड़ी का दूसरा अंक छाया को स्पष्ट करता है:



यही है, जोड़े में संख्याओं के मूल्य का अर्थ रंग की मात्रा है, दूसरे शब्दों में, यदि सभी संख्याएं अधिकतम हैं, तो परिणाम सफेद होगा - # FFFFFFF, यदि संख्याएं न्यूनतम हैं, शून्य हैं, तो कोई रंग नहीं है, यह काला हो जाता है - # 000000 यदि आप प्रत्येक जोड़ी को बदलते हैं, तो यह पता चलता है: # FF0000 सबसे चमकदार लाल है, # 00FF00 सबसे चमकीला हरा है और # 0000FF सबसे चमकदार नीला है। तदनुसार, # 00FFFF सबसे चमकदार सियान है, # FF00FF सबसे चमकीला मैजेंटा है और # FFFF00 सबसे चमकीला पीला है।

रंग पहचान

हेक्साडेसिमल कोड को छह वर्णों से तीन तक छोटा किया जा सकता है। उदाहरण के लिए, रंग #FAE का अर्थ #FFAAEE है। यह सुविधा कभी-कभी कोड को सरल बनाने में मदद करती है, और इससे भी महत्वपूर्ण बात यह है कि यदि आवश्यक हो तो रंगों की संख्या को कम करना आसान है।

ज्यादातर मामलों में, रंग को हेक्स कोड द्वारा पहचाना जा सकता है, केवल जोड़े के पहले अंक दिए गए हैं। नीचे दिए गए उदाहरण में, यह स्पष्ट है कि रंग बहुत अधिक लाल, थोड़ा नीला और हरे रंग में मिश्रित है।



हेक्स कोड के रंग को समझना वेब डिजाइनर को पेज कोड को जल्दी से नेविगेट करने की अनुमति देता है, इसके अलावा, आप हमेशा यह कहकर सहयोगियों या ग्राहकों को प्रभावित कर सकते हैं, "आह, क्या बरगंडी की एक अद्भुत छाया है।"

आप केवल इसके हेक्स कोड को संपादित करके आसानी से चमक, रंग या रंग संतृप्ति को बदल सकते हैं। नीचे दिए गए पहले उदाहरण में, जोड़े में से एक 10% की वृद्धि में बदल जाता है, जबकि रंग चमक बढ़ जाती है। दूसरे उदाहरण में, चमक बढ़ जाती है, लेकिन संतृप्ति गिरती है:

रेखांकन लिंक

डिफ़ॉल्ट रूप से, ब्राउज़र वेब पृष्ठों पर हाइपरलिंक को रेखांकित करते हैं। बहुत बड़े फोंट का उपयोग नहीं करते समय, अंडरलाइन को लिंक के अक्षरों के साथ मिलाया जा सकता है, और यह डिज़ाइन बहुत अच्छा नहीं लगता है। लेकिन आप कम संतृप्त को रेखांकित कर सकते हैं:

• एक प्रकाश पृष्ठभूमि पर अंधेरे पाठ के लिए, लिंक को उज्जवल बनाएं।
• एक अंधेरे पृष्ठभूमि पर उज्ज्वल पाठ के लिए, लिंक को गहरा करें।

इस काम के लिए, आपको प्रत्येक टैग के अंदर स्पैन टैग का उपयोग करना होगा, उदाहरण के लिए:

a { text-decoration:underline;color:#aaaaff; } a span { text-decoration:none;color:#0000ff; } 

परिणामस्वरूप लिंक पढ़ना आसान है क्योंकि अंडरस्कोर वर्णों के साथ मिश्रण नहीं करता है। हालांकि, प्रत्येक लिंक में स्पैन जोड़ना बहुत तर्कसंगत नहीं है। इसलिए, आप लिंक के अंडरलाइन को हटा सकते हैं, लेकिन सीमा-नीचे जोड़ें:

 a { text-decoration: none; border-bottom: 1px solid #aaaaff; } 

सामग्री रंग

अक्सर साइटें हेडिंग और बॉडी टेक्स्ट के लिए एक ही रंग का उपयोग करती हैं। लेकिन इस दृष्टिकोण के साथ, सामग्री की पठनीयता कम हो जाती है: फ़ॉन्ट जितना छोटा होगा, उतना ही इसके विपरीत होना चाहिए। एक उदाहरण:

 h1, p { color: #797979; } 

हेक्स कोड के जोड़े में पहले अंकों को कम करने से पाठ के विपरीत वृद्धि होगी, जिसका अर्थ है कि पठनीयता में सुधार होगा:

 h1 { color: #797979; } p { color: #393939; } 

पृष्ठभूमि का संपादन

हेक्स कोड रंग बदलकर पृष्ठभूमि को आसानी से नियंत्रित करें:

• # 404040 - तटस्थ
• # 504030 - गर्म
• # 304050 - ठंडा

पृष्ठ की पृष्ठभूमि सामग्री की तुलना में रंग परिवर्तनों के लिए अधिक संवेदनशील है। इसलिए, आप हेक्स कोड के जोड़े में दूसरे अंक को समायोजित करके इसे आसानी से गर्म या ठंडा कर सकते हैं। उदाहरण के लिए:

• # 404040 - तटस्थ
• # 594039 - गर्म
• # 394059 - ठंडा

रंगों का मिलान और संयोजन

हेक्साडेसिमल कलर कोड की संरचना को समझने से डिज़ाइनर को कलर कॉम्बिनेशन का सही मिलान करने और रंग योजनाओं का चयन करने की सुविधा मिलती है। सबसे सरल तकनीक कोड में विभिन्न स्थानों में एक जोड़ी को पुनर्व्यवस्थित करना है। दूसरा तरीका यह है कि पहली जोड़ी में पहले अंक को दोगुना करें और इसे दूसरे दो पहले अंकों में विभाजित करें। आप तस्वीरों से लिए गए रंगों को भी मिला सकते हैं। नीचे बताए गए तरीके स्पष्ट रूप से दर्शाए गए हैं:

प्रयुक्त सामग्री और उपयोगी पठन

• स्मैशिंग मैगज़ीन पर कलर साइड का कोड साइड
• W3C पर HTML रंग
• रंग के साथ काम करें: हैबे पर वेब डिजाइनरों के लिए उपयोगी उपकरण, किताबें, लेख
• html-color-codes.com