किसी दूसरे रंग के चैनल और वैल्यू के आधार पर नए रंग बनाएं.
Chrome 119 में, सीएसएस कलर लेवल 5 से मिलने वाली रंग की एक बेहद असरदार सुविधा है. रिलेटिव कलर सिंटैक्स सीएसएस में, रंग में बदलाव करने के लिए एक आसान पाथ बनाता है. लेखकों और डिज़ाइनरों को:
- Lighten
- गहरे रंग वाली थीम
- सैचुरेट करें
- सैचुरेट करें
- क्रोमा बूस्ट
- ओपैसिटी को कम या ज़्यादा करना
- इनवर्ट
- अनुपूरक
- बदलें
- कंट्रास्ट
- रंग पटल
रिलेटिव कलर सिंटैक्स से पहले, किसी रंग की ओपैसिटी में बदलाव करने के लिए आपको कलर के चैनलों, आम तौर पर एचएसएल, और असेंबल प्रॉपर्टी को जोड़ने के लिए कस्टम प्रॉपर्टी बनाएं उन्हें फ़ाइनल रंग और फ़ाइनल वैरिएंट के तौर पर पेश करते हैं. इसका मतलब है कि बहुत सारे प्लैटफ़ॉर्म मैनेज करना रंग के टुकड़े, जो जल्द ही बोझिल हो सकते हैं.
:root {
--brand-hue: 300deg;
--brand-saturation: 75%;
--brand-lightness: 50%;
--brand-hsl:
var(--brand-hue)
var(--brand-saturation)
var(--brand-lightness);
--brand-color: hsl(var(--brand-hsl));
/* all this work just so I can set the opacity to 50% in a variant */
--brand-color-variant: hsl(var(--brand-hsl) / 50%);
}
मिलते-जुलते कलर सिंटैक्स के बाद, किसी भी कलर स्पेस के साथ ब्रैंड का रंग बनाया जा सकता है किया जा सकता है, और बहुत कम कोड के साथ आधा ओपैसिटी वैरिएंट बनाया जा सकता है. यह समय है स्टाइल और सिस्टम के इंटेंट को पढ़ना भी आसान हो जाता है.
:root {
--brand-color: hsl(300deg 75% 50%);
--brand-color-variant: hsl(from var(--brand-color) h s l / 50%);
}
यह पोस्ट आपको सिंटैक्स के बारे में जानने और रंगों में होने वाले सामान्य बदलाव दिखाने में मदद करेगी.
अगर आपको वीडियो पसंद है, तो इस जीयूआई चैलेंज में आपका करीब-करीब पूरा लेख शामिल है.
सिंटैक्स की खास जानकारी
रिलेटिव कलर सिंटैक्स का मकसद है दूसरे से रंग निकालना
रंग. बेस रंग को मूल रंग कहा जाता है. यह वह रंग है जो
नए from कीवर्ड के बाद आने वाला है. ब्राउज़र ये काम करेगा
रूपांतरित करके इस मूल रंग को अलग-अलग करके ऑफ़र करें
रंग की नई परिभाषा में इस्तेमाल करने के लिए, वैरिएबल के रूप में हिस्से.
पिछले डायग्राम में दिखाया गया है कि मूल रंग green को
नए रंग का कलर स्पेस,
अलग-अलग नंबर में बदल गया है. इस नंबर को r, g, b, और alpha के तौर पर दिखाया गया है
वैरिएबल, जिन्हें फिर सीधे नए rgb() रंग की वैल्यू के तौर पर इस्तेमाल किया जाता है.
इस इमेज में ब्रेकडाउन, प्रोसेस, और वैरिएबल दिखाए गए हैं, लेकिन यह भी नहीं है रंग बदल रहा है. वैरिएबल के रंग में कोई बदलाव नहीं होता, इसलिए उन्हें वापस पहले जैसा कर दिया जाता है. जिससे एक हरा रंग स्थिर हो जाए.
from कीवर्ड
सिंटैक्स के पहले हिस्से में, इसके अतिरिक्त from <color> का हिस्सा शामिल है
रंग तय करते हुए. यह वैल्यू, वैल्यू तय करने से ठीक पहले चलती है. यह रहा कोड
उदाहरण जहां जोड़ा गया सभी जोड़ा गया है, मान से ठीक पहले from green है
rgb() के लिए तय किए गए हैं.
.syntax-introduction_same-colors {
color: green;
color: rgb(0 128 0);
color: rgb(from green r g b); /* result = rgb(0 128 0) */
}
फ़ंक्शनल नोटेशन में पहले पैरामीटर के रूप में देखे जाने पर, वह from कीवर्ड,
कलर डेफ़िनिशन को रिलेटिव कलर में बदल देता है! from कीवर्ड के बाद, सीएसएस
एक रंग की उम्मीद है, ऐसा रंग जो अगले रंग को प्रेरित करेगा.
कलर कन्वर्ज़न
आसान शब्दों में कहें, तो यह हरे रंग के चैनलों को r g और b में बदल देता है, ताकि उन्हें नए रंग.
rgb(from green r g b) /* r=0 g=128 b=0 */
rgb(from rgb(0 128 0) r g b); /* r=0 g=128 b=0 */
कस्टम प्रॉपर्टी के रंग
rgb from green को पढ़ना बहुत आसान है. यही वजह है
कस्टम प्रॉपर्टी और रिलेटिव कलर सिंटैक्स इतने अच्छे मैच बनाते हैं, क्योंकि
from रंग से रहस्य को सुलझाने में मदद कर सकती है. आम तौर पर, आपको यह भी करने की ज़रूरत नहीं होती है कि
कस्टम प्रॉपर्टी के रंग का रंग प्रारूप जानें, क्योंकि आप नई प्रॉपर्टी
अपनी पसंद के फ़ॉर्मैट में रंग भरें.
rgb(from rgb(255 105 180) r g b) /* ????? */
rgb(from var(--hotpink) r g b) /* clear */
अपनी पसंद के कलर स्पेस में काम करें
अपनी पसंद के फ़ंक्शनल कलर नोटेशन से कलर स्पेस चुना जा सकता है.
rgb(from hsl(120 100% 25%) r g b) /* r=0 g=128 b=0 */
hsl(from hsl(120 100% 25%) h s l) /* h=120 s=100% l=25% */
hwb(from hsl(120 100% 25%) h w b) /* h=120 w=0% b=50% */
lch(from hsl(120 100% 25%) l c h) /* l=46 c=68 h=134 */
रिलेटिव कलर सिंटैक्स में वह कन्वर्ज़न चरण होता है; from के बाद का रंग यह है
कलर स्पेस में बदला जाना चाहिए, जैसा कि रिलेटिव की शुरुआत में बताया गया है
रंग. इनपुट और आउटपुट का मेल खाना ज़रूरी नहीं है, क्योंकि इससे लोगों को फ़ायदा मिलता है.
कलर स्पेस चुनने की सुविधा, रंग चुनने में सशक्त बनाती है स्पेस, रंग के विकल्प पर ज़्यादा फ़ोकस करता है प्राथमिकता चुनें. आपकी प्राथमिकता नतीजों में होती है, न कि रंग के फ़ॉर्मैट या चैनल में प्रकार. इस्तेमाल के उदाहरण दिखाने वाले सेक्शन में, यह साफ़ होगा, क्योंकि अलग-अलग कलर स्पेस का इस्तेमाल कर सकते हैं.
वैरिएबल को मिलाएं, मैच करें, हटाएं, और दोहराएं
इस सिंटैक्स के बारे में कुछ अनोखा, लेकिन दिलचस्प बात यह है कि वैरिएबल का उन्हें क्रम से लगाया जा सकता है और बार-बार इस्तेमाल किया जा सकता है.
rgb(from green g g g) /* rgb(128 128 128) */
rgb(from green b r g) /* rgb(0 0 128) */
rgb(from green 0 0 g) /* rgb(0 0 128) */
वैरिएबल के तौर पर अपारदर्शिता (ओपैसिटी)
सिंटैक्स alpha नाम वाले वैरिएबल के तौर पर ओपैसिटी भी उपलब्ध कराता है. यह ज़रूरी नहीं है,
और फ़ंक्शनल कलर नोटेशन में / के बाद चला जाता है.
rgb(from #00800080 r g b / alpha) /* alpha=50% */
rgb(from rgba(0,128,0,.5) r g b / alpha) /* alpha=50% */
rgb(from rgb(0 128 0 / 50%) r g b / alpha) /* alpha=50% */
वैरिएबल पर calc() या दूसरे सीएसएस फ़ंक्शन का इस्तेमाल करना
अब तक हम बार-बार हरे रंग को बना रहे हैं. यह जानना कि सिंटैक्स, कन्वर्ज़न और स्ट्रक्चर करने के चरणों के बारे में जानना. अब है वैरिएबल को बदलने के समय को बदलें, तो आउटपुट को बदलें, ताकि वह इनपुट.
green /* h=120 s=100% l=25% */
hsl(from green calc(h * 2) s l) /* h=240 s=100% l=25% */
अब यह नेवी है! इस रंग को दोगुना कर दिया गया है, जो 120 का रंग लेकर, इसे
240, रंग को पूरी तरह से बदल रहा है. इससे रंग के साथ-साथ रंग भी बदल गया
व्हील, सिलिंडरिकल कलर स्पेस की मदद से बहुत आसानी से बनाई गई एक साफ़ ट्रिक
जैसे कि HSL,
HWB,
LCH, और
OKLCH.
चैनलों की वैल्यू विज़ुअल तौर पर देखने के लिए, इस रिलेटिव कलर सिंटैक्स चैनल वैल्यू टूल को आज़माएं, ताकि आप अनुमान लगाए बिना या ज़रूरी जानकारी को याद रखे बिना सही हिसाब से आंकड़े देख पाएं. यह आपके तय किए गए सिंटैक्स के आधार पर हर चैनल की वैल्यू दिखाता है. इससे, आपको यह जानने में मदद मिलती है कि आपके पास कौनसी वैल्यू उपलब्ध हैं.
देखें कि यह ब्राउज़र काम करता है या नहीं
@supports (color: rgb(from white r g b)) {
/* safe to use relative color syntax */
}
इस्तेमाल के उदाहरण और इस्तेमाल करने के तरीके
नीचे दिए गए उदाहरणों और इस्तेमाल के उदाहरणों में, अलग-अलग सिंटैक्स का इस्तेमाल किया जा सकता है मिलते-जुलते या एक जैसे नतीजे. ये वैरिएशन कलर स्पेस और कौनसे चैनल, ये काम करते हैं.
इसके अलावा, कई उदाहरणों में by और
to. रंग बदला गया by, रंग में तुलनात्मक रूप से बदलाव है; ऐसा बदलाव जो
वैरिएबल का मान सेट करता है और उसकी मौजूदा वैल्यू के आधार पर अडजस्टमेंट करता है. ऐप्लिकेशन
रंग बदला गया to पूरी तरह से रंग में हुआ बदलाव है; ऐसा बदलाव जो
वैरिएबल का मान सेट करता है और इसके बजाय पूरी तरह से नया मान दर्ज करता है.
सभी डेमो इस कोडपेन कलेक्शन में देखे जा सकते हैं.
रंग को हल्का करें
ओकेएलसीएच, ओकेलैब, XYZ या sRGB वाले कलर स्पेस से सबसे ज़्यादा रंग चमकने पर पूर्वानुमान लगाने योग्य परिणाम.
इतना हल्का करें
नीचे दिए गए उदाहरण .lighten-by-25, blue रंग को लेकर उसे इसमें बदल देता है
OKLCH, फिर l (हल्कापन) चैनल को गुणा करके नीले रंग को हल्का कर देता है
1.25 की मौजूदा वैल्यू. ऐसा करने से, नीले रंग की लाइट को सफ़ेद रंग की ओर 25% तक बढ़ा दिया जाता है.
.lighten-by-25 {
background: oklch(from blue calc(l * 1.25) c h);
}
किसी खास वैल्यू के लिए लाइट करें
नीचे दिए गए उदाहरण .lighten-to-75 में, l चैनल का इस्तेमाल इन कामों के लिए नहीं किया गया है
blue को हल्का करने के बजाय, यह वैल्यू को 75% से पूरी तरह बदल देता है.
.lighten-to-75 {
background: oklch(from blue 75% c h);
}
गहरा रंग
रंग को चमकाने के लिए एक जैसे कलर स्पेस भी अच्छे होते हैं. गहरा रंग.
ज़्यादा गहरा करें
नीचे दिए गए उदाहरण में .darken-by-25, नीला रंग लेकर उसे इसमें बदल देता है
OKLCH, फिर l (हल्कापन) चैनल को 25% तक कम करके नीले रंग को गहरा कर देता है
वैल्यू को .75 से गुणा करना. इससे नीले रंग को 25% तक काले रंग की ओर धकेल दिया जाता है.
.darken-by-25 {
background: oklch(from blue calc(l * .75) c h);
}
किसी खास वैल्यू तक गहरा करें
नीचे दिए गए उदाहरण .darken-to-25 में, l चैनल का इस्तेमाल गहरे रंग को गहरा करने के लिए नहीं किया गया है
blue है, तो यह वैल्यू को 25% से पूरी तरह बदल देता है.
.darken-to-25 {
background: oklch(from blue 25% c h);
}
रंग को फीका करें
इतनी मात्रा में संतृप्त करें
इस उदाहरण में, .saturate-by-50 में hsl() के s का इस्तेमाल करके, कन्वर्ज़न को बढ़ाया गया है
किसी रिश्तेदार 50% की मदद से orchid का वाइब्रेशन.
.saturate-by-50 {
background: hsl(from orchid h calc(s * 1.5) l);
}
किसी खास मात्रा में गाढ़ा करें
नीचे दिया गया उदाहरण .saturate-to-100, इसके s चैनल का इस्तेमाल नहीं करता
hsl() है, तो यह इसके बजाय मनमुताबिक सैचुरेशन वैल्यू को सेट करता है. इस उदाहरण में,
संतृप्ति को 100% तक बढ़ाया जाता है.
.saturate-to-100 {
background: hsl(from orchid h 100% l);
}
रंग को फीका करें
इतना ज़्यादा फीका करें
इस उदाहरण में, .desaturate-by-half फ़ंक्शन को घटाने के लिए, hsl() के s का इस्तेमाल किया गया है
indigo की संतृप्ति को आधा कर सकती है.
.desaturate-by-half {
background: hsl(from indigo h calc(s / 2) l);
}
कोई खास वैल्यू हटाएं
एक राशि से उदासीन करने के बजाय, आप एक विशिष्ट
वैल्यू. नीचे दिया गया उदाहरण .desaturate-to-25, इसके आधार पर नया रंग बनाता है
indigo लेकिन सैचुरेशन को 25% पर सेट करता है.
.desaturate-to-25 {
background: hsl(from indigo h 25% l);
}
क्रोमा बूस्ट कलर
यह इफ़ेक्ट किसी रंग को गहरा या फीका करने जैसा ही है, लेकिन कुछ मामलों में यह अलग होता है
तरीके. सबसे पहले, यह saturation बदलाव नहीं, बल्कि chroma का बदलाव है और यह है
क्योंकि हाई डाइनैमिक रेंज में बूस्ट हो सकने वाले कलर स्पेस का इस्तेमाल नहीं किया जाता
गहरा या फीका करें. chroma वाले कलर स्पेस में हाई डाइनैमिक रेंज है
इससे लेखकों को गहरा या फीका रंग
यहां तक कि संभव है.
.increase-chroma {
background: oklch(from orange l calc(c + .1) h);
}
अपारदर्शिता को रंग में बदलाव करें
किसी रंग का सेमी-ट्रांसपैरंट वैरिएंट बनाना, आम तौर पर इस्तेमाल किए जाने वाले रंगों में से एक है किए गए हैं. इसके बारे में बुनियादी जानकारी में यह उदाहरण देखें अगर आपने इस लेख को नहीं देखा है, तो यह समस्या की जगह के बारे में अच्छी तरह से बताता है.
ओपैसिटी को रकम के हिसाब से अडजस्ट करें
.decrease-opacity-by-25 {
background: rgb(from lime r g b / calc(alpha / 2));
}
ओपैसिटी को किसी खास वैल्यू पर अडजस्ट करना
.decrease-opacity-to-25 {
background: rgb(from lime r g b / 25%);
}
रंग उलटना
रंग बदलने की सुविधा, कलर लाइब्रेरी में मौजूद एक सामान्य सुविधा है, जो रंग को कम या ज़्यादा करने की सुविधा देती है. ऐसा करने का एक तरीका यह है कि एक रंग को RGB में बदला जाए और फिर हर एक को घटा दिया जाए चैनल की वैल्यू 1 से.
.invert-each-rgb-channel {
background: rgb(from yellow calc(255 - r) calc(255 - g) calc(255 - b));
}
कोई रंग जोड़ें
अगर आपका लक्ष्य किसी रंग को उलटना नहीं, बल्कि उसे बेहतर बनाना नहीं है, तो रंग
रोटेशन आपकी खोज के अनुसार है. वह कलर स्पेस चुनें जो
रंग को कोण की तरह बदलें, फिर रंग को अपनी पसंद के हिसाब से घुमाने के लिए, calc() का इस्तेमाल करें.
किसी रंग का पूरक ढूंढने के लिए, उसे आधे से घुमाना होता है. इस मामले में ऐसा है
बेहतर नतीजा पाने के लिए, h चैनल को 180 से कम या ज़्यादा किया जा सकता है.
.complementary-color {
background: hsl(from blue calc(h + 180) s l);
}
किसी रंग के बीच में कंट्रास्ट जोड़ना
आसानी से ऐक्सेस किए जा सकने वाले कलर कंट्रास्ट रेशियो को सेट करने के तरीके के तौर पर, L&Medst; (Lstar).
यह अनुमान के हिसाब से, एक समान रोशनी (L) चैनल का इस्तेमाल करता है:
calc() में, LCH और OKLCH. कम, मध्यम या ज़्यादा को टारगेट करने के आधार पर
इसके कंट्रास्ट, L&Midast; डेल्टा करीब ~40, ~50 या ~60 है.
यह तकनीक LCH या OKLCH में किसी भी रंग में बढ़िया काम करती है.
ज़्यादा गहरे रंग के कंट्रास्ट को अडजस्ट करना
.well-contrasting-darker-color क्लास, 60 के डेल्टा के साथ L* को दिखाती है.
मूल रंग गहरा रंग (कम वैल्यू वाला हल्कापन) है, इसलिए 60% (.6) जोड़ा गया
को लाइटनेस चैनल में बदल सकें. इस तकनीक का इस्तेमाल एक अच्छा कंट्रास्ट ढूंढने के लिए किया जाता है
हल्के रंग के बैकग्राउंड पर एक जैसा रंग और गहरे रंग वाला टेक्स्ट.
.well-contrasting-darker-color {
background: darkred;
color: oklch(from darkred calc(l + .60) c h);
}
हल्के रंग से कंट्रास्ट करना
.well-contrasting-lighter-color क्लास, 60% के डेल्टा के साथ L* दिखाती है
भी. मूल रंग एक हल्का रंग (ज़्यादा अहमियत वाला हल्कापन) है, इसलिए .60 है
को लाइटनेस चैनल से घटा दिया जाता है.
.well-contrasting-lighter-color {
background: lightpink;
color: oklch(from lightpink calc(l - .60) c h);
}
रंग पैलेट
रंग पटल बनाने में संबंधित रंग सिंटैक्स बहुत अच्छा है. यह खास तौर पर यह बेहद उपयोगी और असरदार है, क्योंकि इसमें ढेर सारे कलर स्पेस मौजूद हैं. नीचे दिए गए उदाहरण सभी में OKLCH का इस्तेमाल किया गया है, क्योंकि लाइटनेस चैनल भरोसेमंद और आकर्षक है बिना खराब असर के चैनल को घुमाया जा सकता है. आखिरी उदाहरण दिखाता है कि और ज़्यादा दिलचस्प बनाने के लिए, हल्के और ह्यू रोटेशन अडजस्टमेंट का मिला-जुला रूप इस्तेमाल किया जाता है नतीजा!
इनके लिए उदाहरण के तौर पर दिया गया सोर्स कोड खोलें और --base-color को बदलकर देखें
देखें कि ये पैलेट कितने डाइनैमिक हैं. यह मज़ेदार है!
अगर आपको वीडियो पसंद है, तो हम YouTube पर OKLCH की मदद से सीएसएस में रंग पटल बनाने के बारे में ज़्यादा जानकारी देते हैं.
मोनोक्रोमैटिक पैलेट
मोनोक्रोमैटिक पैलेट बनाने के लिए, एक ही रंग से पैलेट बनाना है, लेकिन साथ ही, वह भी रोशनी और अंधेरे में अलग-अलग तरह से. बीच का रंग, सोर्स का रंग होता है पैलेट के लिए, जिसमें दो हल्के और दो गहरे वैरिएंट दोनों में से किसी एक को की ओर.
:root {
--base-color: deeppink;
--color-0: oklch(from var(--base-color) calc(l + .20) c h); /* lightest */
--color-1: oklch(from var(--base-color) calc(l + .10) c h);
--color-2: var(--base-color);
--color-3: oklch(from var(--base-color) calc(l - .10) c h);
--color-4: oklch(from var(--base-color) calc(l - .20) c h); /* darkest */
}
रिलेटिव कलर सिंटैक्स और ओकेएलसीएच का इस्तेमाल करके बनाए गए पैलेट आज़माएं
Open Props, मुफ़्त सीएसएस वैरिएबल की एक लाइब्रेरी, ऑफ़र इस रणनीति के साथ बनाए गए रंग पटल और उन्हें एक आयात करें. ये सारे रंग एक ऐसे रंग से तैयार किए गए हैं जिसे अपनी पसंद के मुताबिक बनाया जा सकता है, इसमें एक कलर और पैलेट आता है!
मिलते-जुलते पैलेट
OKLCH और HSL के साथ रंग घुमाना बहुत आसान है, इसलिए अपने एनालॉग रंग पटल. रंग को अपनी पसंद के हिसाब से बदलें और बेस का रंग बदलें, और देखें कि ब्राउज़र की मदद से नए पैलेट कैसे बनाए जाते हैं.
:root {
--base-color: blue;
--primary: var(--base-color);
--secondary: oklch(from var(--base-color) l c calc(h - 45));
--tertiary: oklch(from var(--base-color) l c calc(h + 45));
}
ट्रायडिक पैलेट
पूरक रंगों से मिलते-जुलते ट्रायडिक रंग पटल
आधार रंग दिए गए हैं. इनका विरोध किया जा रहा है, लेकिन इनके रंगों के बीच घूर्णन बनाया गया है. जहां
कॉम्पलेमेंट्री कलर, कलर के उलटा होता है, जैसे कि सीधी लाइन
कलर व्हील के बीच में बने हुए, ट्रायडिक पैलेट
रेखाओं का त्रिभुज, जिसमें 2 रंग आधार रंग से बराबर घुमाए गए हैं.
120deg कलर को घुमाकर, इसे पूरा करें.
यह रंग सिद्धांत का एक छोटा सा आसान उदाहरण है, लेकिन अगर आपकी दिलचस्पी हो, तो ज़्यादा जटिल ट्रायडिक पैलेट से शुरुआत करें.
:root {
--base-color: yellow;
--triad-1: oklch(from var(--base-color) l c calc(h - 120));
--triad-2: oklch(from var(--base-color) l c calc(h + 120));
}
टेट्रैडिक पैलेट
टेट्राडिक पैलेट में चार रंग होते हैं. इन्हें कलर व्हील के चारों ओर समान रूप से बांटा गया है. इससे एक-दूसरे को ऐसा पैलेट जिसमें कोई मुख्य वैल्यू साफ़ तौर पर नहीं दिखती है. आप भी इसके बारे में सोच सकते हैं, जैसे दो एक-दूसरे से मिलते-जुलते रंगों का इस्तेमाल करते हैं. समझदारी से इस्तेमाल किया जाए, तो यह बहुत मददगार हो सकता है.
यह रंग सिद्धांत का एक छोटा सा आसान उदाहरण है, लेकिन इसमें आपको टेट्राडिक पैलेट का इस्तेमाल करने में दिलचस्पी होगी.
:root {
--base-color: lime;
--color-1: var(--base-color);
--color-2: oklch(from var(--base-color) l c calc(h + 90));
--color-3: oklch(from var(--base-color) l c calc(h + 180));
--color-4: oklch(from var(--base-color) l c calc(h + 270));
}
थोड़े रंग में घुमाया गया मोनोक्रोमैटिक
रंग के बारे में कई जानकार लोग इस बात को अपने अंदाज़ में पेश करते हैं. समस्या यह है कि एक ही रंग का कलर स्केल काफ़ी उबाऊ हो सकता है. समाधान यह है कि किसी एक हल्का या गहरा होने पर, हर नए रंग को हल्के या मेजर रंग में घुमाना.
इस उदाहरण में, हर स्वैच के लिए लाइटनेस को 10% तक कम किया गया है. साथ ही, स्वैच भी घुमाया गया है रंग को 10 डिग्री तक करो. नतीजा, हॉटपिंक से गहरे नीले रंग का पैलेट है, जो ग्रेडिएंट की तरह आसानी से मिक्स हो जाते हैं.
:root {
--base-color: deeppink;
--color-1: var(--base-color);
--color-2: oklch(from var(--base-color) calc(l - .10) c calc(h - 10));
--color-3: oklch(from var(--base-color) calc(l - .20) c calc(h - 20));
--color-4: oklch(from var(--base-color) calc(l - .30) c calc(h - 30));
--color-5: oklch(from var(--base-color) calc(l - .40) c calc(h - 40));
}
OKLCH और ह्यू रोटेशन के साथ बने इस लीडरबोर्ड को आज़माएं
नीचे दिया गया लीडरबोर्ड इंटरफ़ेस, ह्यू रोटेशन रणनीति का इस्तेमाल करता है. हर सूची
आइटम, दस्तावेज़ में अपने इंडेक्स को --i वैरिएबल के तौर पर ट्रैक करता है. यह इंडेक्स
इसे क्रोमा, लाइटनेस, और कलर को अडजस्ट करने के लिए इस्तेमाल किया जाता है. अडजस्टमेंट सिर्फ़ 5% है या
5deg, डीपपिंक के साथ ऊपर दिए गए उदाहरण की तुलना में बहुत बेहतर है. इसलिए, इसे
हम आपको बताना चाहते हैं कि यह लीडरबोर्ड कैसा भी हो सकता है
आकर्षक.
लीडरबोर्ड के नीचे मौजूद स्लाइडर का रंग बदलना न भूलें. इसके बाद, रिलेटिव कलर सिंटैक्स से खूबसूरत कलर मोमेंट बनते हैं.
li {
--_bg: oklch(
/* decrease lightness as list grows */
calc(75% - (var(--i) * 5%))
/* decrease chroma as list grows */
calc(.2 - (var(--i) * .01))
/* lightly rotate the hue as the list grows */
calc(var(--hue) - (var(--i) + 5))
);
}