रंग और पृष्ठभूमि

docs.scrimba.com

आप चाहते हैं कि एक बटन नीले रंग का एक विशिष्ट छाया हो। आप डिज़ाइन फ़ाइल में रंग खोजते हैं, अपनी स्टाइलशीट में #1b2130 पेस्ट करते हैं, और यह काम करता है, लेकिन आपको कोई अंदाजा नहीं है कि ये वर्ण क्या मायने रखते हैं या आप छाया को हल्का करने के लिए कैसे आगे बढ़ेंगे। सीएसएस में रंग रहस्यमय कोड का एक ढेर लगता है जब तक आप इसके नीचे की कुछ प्रणालियों को नहीं सीखते। एक बार जब आप रंग को पढ़ सकते हैं और इसे पृष्ठभूमि पर पेंट कर सकते हैं, तो एक पृष्ठ के अधिकांश दृश्य चरित्र आपके हाथ में होते हैं।

रंग का नाम रखना

सीएसएस आपको कुछ अलग-अलग तरीकों से एक ही रंग लिखने देता है। सबसे सरल एक कीवर्ड है: एक सादा अंग्रेजी नाम जो ब्राउज़र पहले से जानता है।

.tag {
  color: rebeccapurple;      /* एक नाम वाला रंग, किसी कोड की आवश्यकता नहीं */
}

इन नामों के बारे में 140 हैं, जो तेजी से काम के लिए आसान है लेकिन वास्तविक डिज़ाइन के लिए बहुत कम है। अन्य तरीके आपको किसी भी रंग को वर्णित करने देते हैं। एक हेक्स कोड एक # के बाद छः वर्ण हैं, और rgb() लाल, हरे और नीले को राशि से मिलाता है। ये सभी सटीक रंगों की ओर इशारा करते हैं; कीवर्ड सामान्य वाले के लिए शॉर्टकट हैं।

.tag {
  color: #1b2130;            /* वही गहरा नीले-काला, हेक्स कोड के रूप में लिखा गया */
}

सीएसएस में एक रंग लिखने के चार तरीके हैं, और वे विभिन्न प्रणालियों के माध्यम से एक जैसे रंगों का वर्णन करते हैं। एक कीवर्ड जैसे rebeccapurple एक निश्चित नाम है। एक हेक्स कोड जैसे #1b2130 लाल, हरे और नीले को छः वर्णों में पैक करता है। rgb() फ़ंक्शन उन्हीं तीन चैनलों को 0 से 255 तक की संख्या के रूप में सेट करता है। और hsl() रंग को ह्यू, संतृप्ति और हल्केपन के द्वारा वर्णित करता है।

.badge {
  color: #1b2130;                 /* हेक्स: लाल, हरे, नीले के लिए दो वर्ण */
  color: rgb(27, 33, 48);         /* लाल, हरे, नीले की मात्रा के रूप में एक जैसा रंग */
  color: hsl(219, 28%, 15%);      /* ह्यू, संतृप्ति, हल्केपन के रूप में एक जैसा रंग */
}

उन तीनों लाइनें एक समान गहरा नीले-काला पेंट करती हैं। hsl() का उपयोग करें जब आप हाथ से रंग चुन रहे हों। यह एक विवरण की तरह पढ़ता है जिसे एक व्यक्ति समझ सकता है, जहां हेक्स और rgb ऐसी संख्याएं हैं जिन्हें आप मुख्य रूप से कॉपी और पेस्ट करते हैं।

सीएसएस एक रंग को एक कीवर्ड, एक हेक्स कोड, rgb(), या hsl() के रूप में स्वीकार करता है, और पहले तीन सभी समान sRGB स्पेस को संबोधित करते हैं (मानक रंग स्पेस जो स्क्रीन दशकों से उपयोग करते हैं) विभिन्न संकेतन के माध्यम से। एक हेक्स कोड बेस-16 है: #1b2130 लाल 1b, हरा 21, नीला 30 है, प्रत्येक जोड़ी 00 से ff (दशमलव में 0 से 255) तक एक मान है। rgb() उन्हीं तीन चैनलों को सादे दशमलव में लिखता है। कोई भी एक व्यक्ति को समझने के लिए निर्मित नहीं है, क्योंकि रंग को "थोड़ा हल्का" करना तीन संख्याओं को एक बार में कोई स्पष्ट दिशा के बिना समायोजित करने का अर्थ है।

.badge {
  color: #1b2130;               /* बेस-16: 1b लाल, 21 हरा, 30 नीला */
  color: rgb(27 33 48);         /* समान चैनल, दशमलव, आधुनिक स्पेस-अलग वाक्यविन्यास */
  color: hsl(219 28% 15%);      /* ह्यू 219deg, 28% संतृप्ति, 15% हल्केपन */
}

hsl() को प्राथमिकता दें: इसके तीनों अक्ष प्रत्येक एक चीज से मेल खाते हैं जिसे आप अलग-अलग समायोजित कर सकते हैं। ह्यू रंग पहिया पर 0 से 360 तक की स्थिति है, संतृप्ति यह है कि रंग कितना जीवंत है, और हल्केपन यह है कि कितना उज्ज्वल है। होवर स्थिति को एक छाया गहरा करना चाहते हैं? हल्केपन को कुछ प्रतिशत कम करें और अन्य दो को छोड़ दें। वह एकल पठनीय अक्ष यह है कि hsl() कस्टम प्रॉपर्टीज़ के साथ स्वच्छता से बनता है जिन्हें आप एक पैलेट बनाने के लिए उपयोग करते हैं, जहां आप एक ह्यू रख सकते हैं और छायाओं के एक सेट में केवल हल्केपन अलग-अलग करते हैं।

Junoरंग का नाम रखना एक ही रंग को एक कीवर्ड जैसे rebeccapurple, एक हेक्स कोड जैसे #1b2130, या rgb() के साथ लिखा जा सकता है। कीवर्ड तेजी से होते हैं लेकिन उनमें से केवल 140 के बारे में हैं, इसलिए अधिकांश वास्तविक काम कोड का उपयोग करता है। अभी तक हेक्स कोड को आंखों से पढ़ने की कोशिश न करें; सटीक मान कॉपी करना इस चरण में बिल्कुल सामान्य है।

Junoरंग का नाम रखना कीवर्ड, हेक्स, rgb(), और hsl() सभी विभिन्न प्रणालियों के माध्यम से एक ही रंग का नाम रखते हैं। जब आप स्वयं रंग चुन रहे हों, तो hsl() का उपयोग करें, क्योंकि ह्यू, संतृप्ति और हल्केपन ऐसी चीजें हैं जिन्हें आप वास्तव में समझ सकते हैं। हेक्स और rgb() उन मानों के लिए हैं जिन्हें आप डिजाइन से कॉपी करते हैं न कि हाथ से ट्यून करते हैं।

Junoरंग का नाम रखना कीवर्ड, हेक्स, और rgb() विभिन्न संकेतन के माध्यम से sRGB को संबोधित करते हैं; hsl() समान रंग को तीन अक्षों में फिर से तैयार करता है जिन्हें आप एक बार में स्थानांतरित कर सकते हैं। यह पूरा कारण है कि इसे प्राथमिकता दें: एक गहरा होवर एक संख्या है, हल्केपन, तीन समन्वित वाले की बजाय। जब आप कस्टम प्रॉपर्टीज़ से एक पैलेट बनाते हैं और एक पैमाने पर हल्केपन अलग-अलग करते हैं तो यह दिखाई देता है।

पारदर्शिता

कभी-कभी आप एक रंग चाहते हैं जिसके माध्यम से आप आंशिक रूप से देख सकते हैं, इसलिए जो कुछ भी इसके पीछे बैठता है वह थोड़ा दिखाता है। यह पारदर्शिता है, और आप इसे अल्फा नामक चौथे मान के साथ जोड़ते हैं: 0 पूरी तरह से देखभाल करने योग्य है, 1 पूरी तरह से ठोस है।

.overlay {
  background-color: rgb(27 33 48 / 0.5);   /* नीले-काला, लेकिन आधा देखभाल करने योग्य */
}

अंत में / 0.5 का मतलब है "आधी अपारदर्शिता"। opacity नामक एक प्रॉपर्टी भी है जो पूरे तत्व को फीका करती है, एक बार में पाठ और सभी:

.faded {
  opacity: 0.5;              /* पूरे तत्व को फीका करता है, केवल एक रंग नहीं */
}

अंतर महत्वपूर्ण है: अल्फा केवल उस एक रंग को प्रभावित करता है, जबकि opacity पूरे तत्व को फीका करता है।

आप एक रंग को देखभाल करने योग्य बनाते हैं एक अल्फा मान जोड़कर, जहां 0 अदृश्य है और 1 ठोस है। rgb() और hsl() दोनों इसे एक स्लैश के बाद लेते हैं, और एक हेक्स कोड अंत में दो अतिरिक्त वर्णों को ले जा सकता है।

.overlay {
  background-color: rgb(27 33 48 / 0.5);    /* आधा-पारदर्शी नीले-काला */
  background-color: hsl(219 28% 15% / 0.5); /* hsl के माध्यम से समान बात */
  background-color: #1b213080;              /* फिर से समान: 80 लगभग 50% अल्फा है */
}

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

अल्फा एक रंग पर एक चौथा चैनल है, 0 (पूरी तरह से पारदर्शी) से 1 (पूरी तरह से अपारदर्शी), और यह उस एक रंग मान से संबंधित है। आधुनिक rgb() और hsl() इसे एक स्लैश के बाद लेते हैं, और हेक्स इसे एक चौथे बाइट के रूप में स्वीकार करता है, इसलिए #1b213080 80/ff पर नीले-काला है, लगभग 50%। क्योंकि अल्फा रंग पर रहता है, आप पृष्ठभूमि को अनुवादपारदर्शी बना सकते हैं जबकि पाठ, सीमाएं और सब कुछ पूरी तरह से ठोस रहता है।

.overlay {
  background-color: hsl(219 28% 15% / 0.5);  /* केवल यह भरना अनुवादपारदर्शी है */
  color: white;                              /* पाठ पूरी तरह से अपारदर्शी रहता है */
}

opacity एक अलग उपकरण है जो समान दिखता है। यह पूरे तत्व की पारदर्शिता सेट करता है, और यह तत्व को कम्पोजिट करके ऐसा करता है और इसके सभी वंशजों को पृष्ठ पर एक समूह के रूप में करता है। दो परिणाम इस प्रकार हैं जो अल्फा के पास नहीं हैं। सबसे पहले, opacity 1 से कम है एक नया स्टैकिंग संदर्भ (ओवरलैपिंग तत्वों के क्रम के लिए एक स्व-निहित परत) स्थापित करता है, जो बदल सकता है कि क्या शीर्ष पर बैठता है। दूसरा, आप एक फीका माता-पिता के अंदर एक ठोस बच्चे को ठीक नहीं कर सकते, क्योंकि फीकापन समाप्त समूह पर लागू होता है। जब आप केवल एक भरना या एक सीमा को देखभाल करने योग्य चाहते हैं, तो उस रंग पर अल्फा का उपयोग करें और opacity को अकेला छोड़ दें।

Junoपारदर्शिता एक रंग को देखभाल करने योग्य बनाने के लिए चौथा मान जोड़ें: 0 अदृश्य है, 1 ठोस है, और कुछ / 0.5 जैसे आधा है। वह अल्फा केवल उस एक रंग को छूता है। अलग opacity प्रॉपर्टी पूरे तत्व को फीका करती है, पाठ सहित, इसलिए अल्फा चुनें जब आप केवल एक नरम पृष्ठभूमि चाहते हैं।

Junoपारदर्शिता अल्फा एक एकल रंग पर पारदर्शिता है, rgb() या hsl() में एक स्लैश के बाद लिखा गया है, या दो अतिरिक्त हेक्स वर्णों के रूप में। opacity प्रॉपर्टी ब्लंट संस्करण है: यह पूरे तत्व और इसके बच्चों को एक बार में फीका करता है। जब आपका पाठ अप्रत्याशित रूप से मंद हो जाता है, तो आपने opacity का उपयोग किया जहां अल्फा सही कॉल था।

Junoपारदर्शिता अल्फा रंग पर रहता है, इसलिए एक अनुवादपारदर्शी भरना ठोस पाठ और सीमाओं को अछूता छोड़ देता है। opacity पूरे तत्व और इसके वंशजों को एक समूह के रूप में कम्पोजिट करता है, यही कारण है कि एक बच्चा एक फीका माता-पिता के अंदर ठोस नहीं रह सकता, और यह quietly एक नया स्टैकिंग संदर्भ स्पिन करता है। अल्फा के लिए पहुंचें जब तक आप वास्तव में पूरे तत्व को एक साथ फीका नहीं करना चाहते।

पृष्ठभूमि रंग और छवियां

background-color प्रॉपर्टी एक तत्व के पीछे के क्षेत्र को भरती है, इसकी सीमा तक। आप कोई भी रंग उपयोग कर सकते हैं जिसका नाम आप रख सकते हैं।

.hero {
  background-color: hsl(219 28% 15%);   /* सामग्री के पीछे एक ठोस नीले-काला */
}

आप background-image के साथ एक तत्व के पीछे एक छवि भी रख सकते हैं, url(...) के साथ फ़ाइल की ओर इशारा कर सकते हैं:

.hero {
  background-image: url("mountains.jpg");
  background-size: cover;               /* पूरे क्षेत्र को भरने के लिए छवि को स्केल करें */
}

background-size: cover तस्वीर को स्केल करता है ताकि यह पूरी तरह से बॉक्स को भर दे, किसी भी ओवरफ्लो को काटता है। यह सेटिंग है जो आप अक्सर चाहते हैं इसलिए कोई खाली अंतराल नहीं हैं।

background-color सामग्री के पीछे के क्षेत्र को पेंट करता है, पैडिंग बॉक्स को सीमा के किनारे तक भर देता है। उस रंग के शीर्ष पर आप background-image और url(...) के साथ एक छवि को स्तरित कर सकते हैं। क्योंकि यह शीर्ष पर स्तरित है, एक छवि के नीचे एक पृष्ठभूमि रंग किसी भी पारदर्शी भागों के माध्यम से दिखाता है और जबकि छवि अभी भी लोड हो रही है।

.hero {
  background-color: hsl(219 28% 15%);   /* दिखाता है और पहले लोड करता है */
  background-image: url("mountains.jpg");
  background-size: cover;               /* बॉक्स को भरें, ओवरफ्लो को काटें */
  background-position: center;          /* छवि के मध्य को दृश्य में रखें */
  background-repeat: no-repeat;         /* एक प्रति, टाइल न करें */
}

तीन प्रॉपर्टीज़ नियंत्रित करती हैं कि छवि कैसे बैठती है। background-size आमतौर पर cover (बॉक्स भरें, अतिप्रवाह को काटें) या contain (पूरी छवि को अंदर फिट करें, जो अंतराल छोड़ सकता है) होता है। background-position तय करता है कि जब छवि काटी जाती है तो कौन सा हिस्सा दृश्य में रहता है, center सुरक्षित डिफ़ॉल्ट है। background-repeat: no-repeat एक छोटी छवि को बॉक्स के पार टाइल करने से रोकता है।

background-color तत्व के पृष्ठभूमि क्षेत्र को भरता है, जो डिफ़ॉल्ट रूप से पैडिंग बॉक्स है, इसलिए रंग पैडिंग के बाहरी किनारे तक पहुंचता है और सीमा पर रुकता है। background-image उस रंग के शीर्ष पर पेंट करता है, और किसी भी फोटोग्राफिक छवि के नीचे एक ठोस background-color रखना लायक है: यह छवि लोड होते समय दिखाया गया फॉलबैक है या यदि अनुरोध विफल हो जाता है, और यह पारदर्शी क्षेत्रों के माध्यम से दिखाता है, इसलिए छवि के टोन के करीब एक चुनना नंगे पृष्ठ की फ्लैश से बचाता है।

.hero {
  background-color: hsl(219 28% 15%);   /* फॉलबैक और लोड-समय भरना */
  background-image: url("mountains.jpg");
  background-size: cover;               /* cover: बॉक्स को भरें, ओवरफ्लो को काटें */
  background-position: center;          /* फसल को केंद्र पर anchor करें */
  background-repeat: no-repeat;
}

आकार चुनाव एक वास्तविक ट्रेड-ऑफ है। cover दोनों अक्षों पर बॉक्स को भरने के लिए छवि को स्केल करता है और जो भी अतिप्रवाह करता है उसे काटता है, इसलिए कुछ भी खाली नहीं है लेकिन छवि का हिस्सा खो गया है; contain तब तक स्केल करता है जब तक पूरी छवि फिट हो जाती है, इसलिए कुछ भी काटा नहीं जाता है लेकिन बॉक्स अनुपस्थित पट्टियां दिखा सकता है (background-color उन्हें भरता है)। background-position cover के तहत सबसे महत्वपूर्ण है, क्योंकि यह तय करता है कि कौन सा क्षेत्र फसल से बचता है: center सुरक्षित है, लेकिन एक चित्र एक चेहरे को फ्रेम में रखने के लिए top चाहता है। क्रिस्प गैर-फोटोग्राफिक भरने के लिए, ध्यान दें कि एक ग्रेडिएंट background-image के रूप में भी गिना जाता है, जिसका अगला खंड उपयोग करता है।

Junoपृष्ठभूमि रंग और छवियांbackground-color एक तत्व के पीछे की जगह को भरता है, और background-image: url(...) इसके बजाय एक चित्र वहां रखता है। एक छवि को background-size: cover के साथ जोड़ी करें ताकि यह अंतराल छोड़े बिना पूरे बॉक्स को भर दे। वह संयोजन अधिकांश को कवर करता है जिसे आप जल्दी में पहुंचेंगे।

Junoपृष्ठभूमि रंग और छवियां एक पृष्ठभूमि छवि पृष्ठभूमि रंग के शीर्ष पर स्तरित है, इसलिए छवि के लोड करते समय एक रंग के नीचे रखें। cover बॉक्स को भरता है और ओवरफ्लो को काटता है, contain पूरी छवि को फिट करता है और अंतराल छोड़ सकता है, और background-position तय करता है कि कौन सा हिस्सा काटते समय दृश्य में रहता है। no-repeat जोड़ें जब तक आप वास्तव में छवि को टाइल करना नहीं चाहते।

Junoपृष्ठभूमि रंग और छवियां किसी भी फोटो के तहत एक background-color रखें: यह लोड के दौरान फॉलबैक है और पारदर्शी क्षेत्रों को दिखाता है। cover बनाम contain भरना-और-फसल बनाम फिट-और-शायद-अंतराल है, और background-position केवल cover के तहत काम करता है, जहां यह फसल से बचता है। center पर डिफ़ॉल्ट रूप से anchor करें और इसे केवल तभी स्थानांतरित करें जब छवि का एक विशिष्ट हिस्सा फ्रेम में रहना हो।

ग्रेडिएंट्स

एक ग्रेडिएंट एक रंग से दूसरे रंग तक एक चिकनी मिश्रण है। सीएसएस इसे एक तरह की छवि के रूप में मानता है, इसलिए यह background-color के बजाय background-image में जाता है।

.banner {
  background-image: linear-gradient(hsl(219 28% 15%), hsl(219 40% 35%));
}

यह शीर्ष पर पहले रंग से नीचे दूसरे को मिश्रित करता है। आप दो से अधिक रंगों की सूची बना सकते हैं, और आप दिशा बदल सकते हैं:

.banner {
  background-image: linear-gradient(to right, hsl(340 80% 55%), hsl(30 90% 60%));
  /* बाएं से दाएं मिश्रण करता है ऊपर से नीचे की बजाय */
}

कोई छवि फ़ाइल की आवश्यकता नहीं है; ब्राउज़र आपके लिए मिश्रण को आकर्षित करता है।

एक ग्रेडिएंट एक उत्पन्न छवि है, यही कारण है कि linear-gradient() background-color नहीं बल्कि background-image में जाता है। इसका पहला तर्क दिशा है, फिर मिश्रण करने के लिए रंगों की एक सूची है। दिशा को छोड़ दें और यह ऊपर से नीचे चलता है।

.banner {
  background-image: linear-gradient(
    to right,                    /* दिशा: बाएं किनारे से दाएं किनारे */
    hsl(340 80% 55%),            /* प्रारंभ रंग */
    hsl(30 90% 60%)              /* अंत रंग */
  );
}

radial-gradient() समान तरीके से काम करता है लेकिन एक केंद्र बिंदु से बाहर की ओर छल्लों में मिश्रित होता है, एक सीधी रेखा के साथ नहीं। यह एक नरम चमक या स्पॉटलाइट प्रभाव के लिए उपकरण है।

.spotlight {
  background-image: radial-gradient(hsl(0 0% 100%), hsl(219 28% 15%));
  /* उज्ज्वल केंद्र गहरे किनारों को फीका करता है */
}

क्योंकि एक ग्रेडिएंट एक पृष्ठभूमि छवि है, यह वास्तविक छवियों और अन्य ग्रेडिएंट्स के साथ एक ही background-image प्रॉपर्टी के तहत स्तरित है, अल्पविराम द्वारा अलग।

एक ग्रेडिएंट एक उत्पन्न छवि है, इसलिए यह background-image में रहता है और url(...) के समान आकार और स्तरबद्ध नियमों का पालन करता है। linear-gradient() एक वैकल्पिक दिशा पहले लेता है (to right, या 135deg जैसे कोण), फिर रंग स्टॉप की एक सूची जिसमें यह मिश्रित है। एक स्टॉप को एक स्पष्ट स्थिति दें और आप बिल्कुल नियंत्रित करते हैं कि एक रंग कहां उतरता है, जो एक ग्रेडिएंट को एक कठोर पट्टी में बदल देता है जब दो स्टॉप समान बिंदु पर मिलते हैं।

.banner {
  background-image: linear-gradient(
    135deg,                      /* कोण: 0deg ऊपर है, 90deg दाएं है */
    hsl(340 80% 55%) 0%,
    hsl(30 90% 60%) 100%
  );
}

radial-gradient() एक केंद्र से बाहर की ओर मिश्रित है और इसके स्टॉप से पहले एक वैकल्पिक आकृति और आकार लेता है। दोनों प्रत्येक अर्थ में छवियां हैं, इसलिए वे एक अल्पविराम-अलग background-image के तहत स्तरित हैं, पहले ग्रेडिएंट बाद के ऊपर पेंट करते हैं, जो यह है कि एक अनुवादपारदर्शी ग्रेडिएंट एक फोटो पर टिंट कैसे बनता है:

.hero {
  background-image:
    linear-gradient(hsl(219 28% 15% / 0.6), hsl(219 28% 15% / 0.6)),  /* शीर्ष पर गहरा टिंट */
    url("mountains.jpg");                                             /* नीचे फोटो */
  background-size: cover;
}

क्योंकि hsl() सीधे हल्केपन को उजागर करता है, दो-स्टॉप ग्रेडिएंट समान ह्यू में दो हल्केपन मूल्यों के बीच एक स्वच्छ, नियंत्रणीय फीका देता है, जो hsl चुनने के लिए एक और जगह है hex से अधिक भुगतान।

Junoग्रेडिएंट्स एक ग्रेडिएंट रंगों के बीच एक चिकनी मिश्रण है, और सीएसएस इसे एक छवि के रूप में गिनता है, इसलिए यह background-image में जाता है। linear-gradient() एक सीधी रेखा के साथ मिश्रित है, डिफ़ॉल्ट रूप से ऊपर से नीचे, या दिशा बदलने के लिए to right जोड़ें। कोई फ़ाइल की आवश्यकता नहीं है, ब्राउज़र स्वयं मिश्रण को आकर्षित करता है।

Junoग्रेडिएंट्सlinear-gradient() और radial-gradient() दोनों उत्पन्न छवियां हैं, इसलिए वे background-image में संबंधित हैं। रैखिक एक लाइन के साथ मिश्रित होता है जिसे आप एक दिशा के साथ लक्ष्य करते हैं; रेडियल एक केंद्र से बाहर की ओर छल्लों में मिश्रित है, एक चमक के लिए अच्छा। क्योंकि वे छवियां हैं, आप एक अल्पविराम-अलग background-image के तहत कई स्तरित कर सकते हैं।

Junoग्रेडिएंट्स ग्रेडिएंट्स छवियां हैं, इसलिए वे स्थिति लेते हैं, एक background-image के तहत स्तरित है, और background-size का पालन करते हैं। सटीक फीके या कठोर पट्टियों के लिए रंग स्टॉप को स्पष्ट स्थिति दें, और एक url(...) पर एक अनुवादपारदर्शी ग्रेडिएंट स्तरित करें एक दूसरे तत्व के बिना एक फोटो को टिंट करने के लिए। दो-स्टॉप hsl() दो हल्केपन मूल्यों में समान ह्यू के बीच फीका सबसे स्वच्छ तरह है।

रंग जो अनुकूल है और पठनीय रहता है

एक उपयोगी कीवर्ड currentColor है। यह जो भी तत्व का पाठ रंग है उसके लिए खड़ा है, इसलिए एक सीमा या आइकन स्वचालित रूप से पाठ से मेल कर सकता है:

.chip {
  color: hsl(219 28% 15%);
  border: 2px solid currentColor;   /* सीमा पाठ रंग से मेल खाती है */
}

बाद में पाठ रंग बदलें और सीमा अपने आप का अनुसरण करती है, कोई दूसरा संपादन नहीं।

एक और बात ध्यान में रखनी है: सुनिश्चित करें कि पाठ अपनी पृष्ठभूमि से अलग दिखता है। गहरे पाठ पर गहरी पृष्ठभूमि पढ़ना मुश्किल है, और सफेद पर फीका ग्रे आंखों को दबाता है। दोनों के बीच चमक के एक स्पष्ट अंतर के लिए लक्ष्य।

currentColor एक कीवर्ड है जो तत्व के अपने color मान में हल होता है, इसलिए सीमाएं, outlines, और SVG आइकन पाठ रंग को दोहराए बिना ट्रैक कर सकते हैं। पाठ एक बार सेट करें और currentColor से जुड़ी सब कुछ इसके साथ अपडेट होती है।

.chip {
  color: hsl(219 28% 15%);
  border: 2px solid currentColor;   /* color का अनुसरण करता है, कोई डुप्लिकेट मान नहीं */
}

इसके साथ देखने के लिए संपत्ति कंट्रास्ट है: पाठ और इसकी पृष्ठभूमि के बीच चमक का अंतर। कम कंट्रास्ट पढ़ना मुश्किल है, और पहुंच दिशानिर्देश बॉडी पाठ के लिए न्यूनतम अनुपात निर्धारित करते हैं। यह है जहां hsl() अपनी जगह कमाता है: क्योंकि हल्केपन इसका अपना अक्ष है, आप एक ह्यू रख सकते हैं और पाठ और पृष्ठभूमि हल्केपन को पठनीय रहने के लिए काफी अलग कर सकते हैं, बिना एक बार में तीन चैनलों का अनुमान लगाएं।

currentColor तत्व के कम्प्यूटेड color में समाधान करता है, जो सीमाओं, outlines, बॉक्स छायाओं और SVG fill को पाठ रंग से बांधने का एक हल्का तरीका बनाता है। यह किसी भी मान की तरह inherit करता है, इसलिए एक कंटेनर पर color सेट करना एक एकल स्रोत रंग को हर वंशज तक cascade करता है जो currentColor को संदर्भित करता है, जो एक घटक को एक घोषणा से विषय देने का एक स्वच्छ पैटर्न है।

कठिन बाधा कंट्रास्ट है, अग्रभूमि और पृष्ठभूमि के बीच सापेक्ष luminance में मापा गया अंतर। पहुंच मानक, WCAG (वेब सामग्री पहुंच दिशानिर्देश), सामान्य बॉडी पाठ के लिए 4.5 से 1 और बड़े पाठ के लिए 3 से 1 का न्यूनतम अनुपात निर्धारित करता है, और उससे नीचे पाठ कई लोगों के लिए पढ़ना मुश्किल है, केवल कम दृष्टि वाले नहीं। hsl() इसे हिट करने में मदद करता है: हल्केपन एक अलग अक्ष है, इसलिए आप एक ह्यू और संतृप्ति रख सकते हैं और केवल दोनों हल्केपन मानों को अलग करते हैं जब तक जोड़ी पास न हो, बजाय छः चैनलों को अंधे में nudging। यह तर्क देने के लिए एक सहायता है, एक गारंटी नहीं, क्योंकि समान-हल्केपन रंग अभी भी सच्चे luminance गणना विफल कर सकते हैं, इसलिए एक checker के साथ अंतिम अनुपात को सत्यापित करें।

इस स्तर पर जानने के लायक दो और बातें हैं। background शॉर्टहैंड एक बार में कई पृष्ठभूमि प्रॉपर्टीज़ सेट करता है, और इसका एक नियम है कि background-size background-position के बाद आता है, एक स्लैश द्वारा अलग: background: url("bg.jpg") center / cover no-repeat। और सीएसएस में अब hsl() से परे रंग फ़ंक्शन हैं, जैसे oklch(), जो sRGB स्पेस के बाहर रंगों तक पहुंचते हैं उन प्रदर्शनों पर जो व्यापक gamut (रंगों की श्रृंखला जो एक स्क्रीन दिखा सकता है) समर्थन करते हैं। अभी आपको उनकी आवश्यकता नहीं है, लेकिन जानना कि नए फ़ंक्शन मौजूद हैं का मतलब है कि आप उन्हें पहचानेंगे जब एक डिजाइन प्रणाली एक अधिक जीवंत रंग के लिए पहुंचती है जो sRGB व्यक्त कर सकता है। इसे पठनीय टाइपोग्राफी के साथ जोड़ी करें और पाठ हर पाठक को इसका अर्थ देता है।

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

Junoरंग जो अनुकूल है और पठनीय रहता हैcurrentColor सीमाओं, outlines, और आइकन को पाठ रंग से बांधता है इसलिए आप इसे एक जगह सेट करते हैं। कंट्रास्ट पर ध्यान दें, पाठ और पृष्ठभूमि के बीच चमक का अंतर, क्योंकि पहुंच नियम बॉडी पाठ के लिए न्यूनतम सेट करते हैं। hsl() में हल्केपन मानों को अलग खींचना पठनीय रहने के लिए उस अंतराल को चौड़ा रखने का विश्वसनीय तरीका है।

Junoरंग जो अनुकूल है और पठनीय रहता हैcurrentColor inherit है, इसलिए एक कंटेनर पर एक color हर वंशज को theme करता है जो इसे संदर्भित करता है। WCAG बॉडी पाठ के लिए 4.5 से 1 चाहता है, और hsl() आपको इसे पहुंचने के लिए केवल हल्केपन स्थानांतरित करने देता है, हालांकि समान हल्केपन अभी भी वास्तविक luminance जांच विफल कर सकता है, इसलिए एक उपकरण के साथ सत्यापित करें। याद रखें background शॉर्टहैंड एक स्लैश के साथ स्थिति के बाद आकार डालता है, और oklch() जैसे नए फ़ंक्शन व्यापक gamuts के लिए मौजूद हैं जब एक डिजाइन को उनकी आवश्यकता है।