🔣 👨‍🎤 🦄 आरजीबी और हेक्स के बारे में भूल जाओ 💪🏻 👨🏽‍🏭 💪🏼

CSS में रंगों का प्रतिनिधित्व करने के कई तरीके हैं। उनमें से एक एचएसएल प्रणाली है। इस लेख में मैं आपको दिखाऊंगा कि लेआउट डिजाइनर के लिए कौन सी संभावनाएं खुलती हैं।

HSL क्या है?

एचएसएल प्रारूप का नाम पहले अक्षर ह्यू (ह्यू), सैचुरेट (संतृप्ति) और लाइटनेस (लपट या चमक) के संयोजन से लिया गया है।

ह्यू रंग पहिया पर रंग मूल्य है और डिग्री में सेट है। 0 ° लाल से मेल खाती है, 120 ° से हरा और 240 ° से नीला है। ह्यू का मान 0 से 359 तक भिन्न हो सकता है।

संतृप्ति रंग की तीव्रता है, जिसे 0% से 100% तक मापा जाता है। निर्धारित करता है कि एक ही चमक के ग्रे से रंग कितना दूर है।

चमक यह दर्शाता है कि रंग कितना उज्ज्वल है और इसे 0% से 100% तक प्रतिशत के रूप में इंगित किया गया है। छोटे मान रंग को गहरा बनाते हैं और उच्च मान हल्का, चरम मान 0% और श्वेत-श्याम के 100% अनुरूप होते हैं।

HSL लाभ ()

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

कुछ उदाहरण

एक ही रंग के व्युत्पन्न रंग

सबसे आम कार्यों में से एक: एक घटक बनाने के लिए जो एक एकल मूल छाया लेगा, लेकिन इसमें कई विविधताएं शामिल हैं। मेरे उदाहरण में, यह एक विशिष्ट चेतावनी है जिसमें पाठ का रंग, पृष्ठभूमि और स्ट्रोक में एक ही रंग और संतृप्ति होती है लेकिन अलग-अलग चमक होती है:

.success {  
  border-color:     hsl(120, 50%, 40%);
  color:            hsl(120, 50%, 20%);
  background-color: hsl(120, 50%, 90%);
}

देखो कितना सुंदर और स्पष्ट है? यह तुरंत स्पष्ट है कि यह फूलों का एक "परिवार" है। अन्य स्वरूपों में, यह कुछ इस तरह दिखेगा:

/* rgb */
.alert {
  border-color:     rgb(51, 153, 51);
  color:            rgb(25, 77, 25);
  background-color: rgb(217, 242, 217);
}

/* hex */
.alert {
  border-color:     #339933;
  color:            #194d19;
  background-color: #d9f2d9;
}

मुझे आपके बारे में पता नहीं है, लेकिन मेरे लिए इस तरह के कोड को देखना मुश्किल है, यह कहना कि ये रंग किसी तरह जुड़े हैं या नहीं।

लेकिन ये ट्राइफल्स हैं। सीएसएस कस्टम गुणों का उपयोग करते समय सच्ची शक्ति का पता चलता है।

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

.alert {
  border-color:     hsl(var(--hue), 50%, 40%);
  color:            hsl(var(--hue), 50%, 20%);
  background-color: hsl(var(--hue), 50%, 90%);
}

विरंजन

इस उदाहरण में, ऑफ बटन में कम संतृप्ति है। इसमें अभी भी सूक्ष्म नीले रंग का टिंट है, लेकिन यह लगभग ग्रे है। और जब आप हॉवर करते हैं तो बटन ह्यू और संतृप्ति को बनाए रखता है, लेकिन यह गहरा हो जाता है।

इस समस्या को हल करने के लिए, व्युत्पन्न, लेकिन समान रंग पाने के लिए केवल तीन मापदंडों में से एक को बदलना पर्याप्त है। आरजीबी या हेक्स का उपयोग करते समय क्या करना इतना आसान नहीं है।

पहले उदाहरण के रूप में, आप अपने घटक में अन्य सभी रंग विशेषताओं को प्रभावित किए बिना आसानी से रंग बदल सकते हैं।

रंग विरासत

सबसे अच्छी तकनीकों में से एक: एक छाया बनाना, दूसरे से शुरू करना। यह कैल्क () में सरल जोड़ द्वारा प्राप्त किया जाता है।

:root{
  --hue: 120;
}

header {
  background-color: hsl(var(--hue), 30%, 20%)
}

header button {
  background-color: hsl(calc(var(--hue) + 130), 80%, 50%)
}

इस उदाहरण में, बटन का रंग कंटेनर के रंग पर निर्भर करता है (रंग पहिया पर 130 °)।

तो एक सरल तरीके से, आप अपनी साइटों के लिए पूर्ण लचीला रंग पट्टियाँ बना सकते हैं, केवल एक मूल शेड सेट कर सकते हैं और उससे शुरू कर सकते हैं।

और आपके सभी घटक संतृप्ति और चमक को बनाए रखेंगे, जैसा कि पिछले उदाहरणों में दिखाया गया है।

भविष्य

सीएसएस रंग मॉड्यूल स्तर 4 विनिर्देश में , नए कार्यों का वर्णन किया गया था: एक ही नाम के स्वरूपों में रंग निर्दिष्ट करने के लिए प्रयोगशाला () और lch ()। एलसीएच में एचएसएल के समान लचीलापन है, लेकिन आधुनिक उपकरणों के लिए एक आंख के साथ कई सुधार लाता है। आप इस बारे में अधिक लेख " सीएसएस में LCH रंग: क्या, क्यों, और कैसे पढ़ सकते हैं ?" "।

संपूर्ण

मेरी राय में, एचएसएल प्रारूप में विकल्पों की तुलना में शानदार लचीलापन है। चर के साथ संयोजन में, आप व्यावहारिक रूप से पूर्वप्रक्रमकों से देशी सीएसएस के रंगों के साथ काम करने की सभी संभावनाओं को लाते हैं।

PS जोर से शीर्षक के लिए क्षमा करें :)

आरजीबी और हेक्स के बारे में भूल जाओ