किसी दूसरे रंग के चैनल और वैल्यू के आधार पर नए रंग बनाएं.
Chrome 119 में, सीएसएस कलर लेवल 5 की कलर सुविधा बहुत ही दमदार है. रिलेटिव कलर सिंटैक्स सीएसएस में कलर में बदलाव करने के लिए एक आसान पाथ बनाता है. इससे लेखकों और डिज़ाइनर को ये काम करने के तरीके मिलते हैं:
- हल्की नींद
- ज़्यादा गहरा
- सैचुरेट करें
- सैचुरेटेड
- क्रोमा बूस्ट
- अपारदर्शिता को अडजस्ट करना
- इनवर्ट करें
- ज़्यादा जानकारी
- बदलें
- कंट्रास्ट
- रंग पटल
रिलेटिव कलर सिंटैक्स से पहले, किसी रंग की ओपैसिटी में बदलाव करने के लिए, आपको उस कलर वाले चैनलों के लिए कस्टम प्रॉपर्टी बनानी होगी जो आम तौर पर एचएसएल होती है. इसके बाद, उन्हें फ़ाइनल कलर और फ़ाइनल वैरिएंट कलर में इकट्ठा करना होगा. इसका मतलब है कि रंगों के बहुत सारे हिस्सों को मैनेज करना, जो तेज़ी से मुश्किल हो सकता है.
: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> वाला हिस्सा है. यह वैल्यू, आपके तय करने से ठीक पहले तय होती है. यहां एक कोड का उदाहरण दिया गया है, जिसमें rgb() के लिए वैल्यू तय करने से ठीक पहले from green जोड़ा गया है.
.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 में बदल दिया गया. इससे रंग पूरी तरह से बदल गया. इससे कलर व्हील में रंग बदल गया, एक बढ़िया ट्रिक जो सिलिंड्रिकल कलर स्पेस, जैसे कि एचएसएल, एचडब्ल्यूबी, एलसीएच, और OKLCH की मदद से बहुत आसान हो गई.
चैनल की वैल्यू को विज़ुअल तौर पर देखने के लिए, ताकि आप अनुमान लगाए बिना या तय किए गए निर्देशों के बिना ही सही गणित को समझ सकें, रिलेटिव कलर सिंटैक्स चैनल वैल्यू वाला यह टूल आज़माएं. यह आपके तय किए गए सिंटैक्स के आधार पर, हर चैनल की वैल्यू दिखाता है. इससे आपको यह जानने में मदद मिलती है कि आपके पास कौनसी वैल्यू उपलब्ध हैं.
देखें कि यह ब्राउज़र पर काम करता है या नहीं
@supports (color: rgb(from white r g b)) {
/* safe to use relative color syntax */
}
इस्तेमाल के उदाहरण और जानकारी
नीचे दिए गए उदाहरणों और इस्तेमाल के उदाहरणों में, एक जैसे या एक जैसे नतीजे पाने के लिए कई वैकल्पिक सिंटैक्स हैं. ये वैरिएशन, कलर स्पेस और उनके ऑफ़र किए जाने वाले चैनलों पर आधारित होते हैं.
साथ ही, कई उदाहरणों में, by और
to की वर्बीज के साथ रंग में बदलाव करना दिखाया जाएगा. बदला गया रंग by, रंग में मिलता-जुलता बदलाव है; ऐसा बदलाव जो वैरिएबल की वैल्यू का इस्तेमाल करता है और उसकी मौजूदा वैल्यू के आधार पर बदलाव करता है. बदला गया
रंग to, रंग में होने वाला एक पूरा बदलाव है. यह बदलाव, वैरिएबल की वैल्यू का इस्तेमाल नहीं करता है. इसकी जगह, इसमें पूरी तरह से नई वैल्यू तय की जाती है.
सभी डेमो, इस कोडपेन कलेक्शन में देखे जा सकते हैं.
रंग हल्का करें
OKLCH, OKLAB, XYZ या sRGB कलर स्पेस, रंगों को हल्का करते समय सबसे सटीक नतीजे देते हैं.
इतना हल्का
नीचे दिए गए उदाहरण में, .lighten-by-25 रंग blue को चुनकर उसे OKLCH में बदल देता है. इसके बाद, मौजूदा वैल्यू को 1.25 से गुणा करके l (रोशनी) चैनल को बढ़ाकर नीले रंग को हल्का कर देता है. इससे सफ़ेद रंग की नीली रोशनी 25% बढ़ जाती है.
.lighten-by-25 {
background: oklch(from blue calc(l * 1.25) c h);
}
किसी खास वैल्यू तक लाइट करें
यहां दिया गया उदाहरण .lighten-to-75, blue को लाइट करने के लिए l चैनल का इस्तेमाल नहीं करता. इसके बजाय, यह वैल्यू को 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 में, blue को गहरा करने के लिए l चैनल का इस्तेमाल नहीं किया गया है. इसके बजाय, यह वैल्यू को 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, hsl() के s चैनल का इस्तेमाल नहीं करता. इसके बजाय, यह पसंद के मुताबिक सेचुरेशन वैल्यू के बारे में बताता है. इस उदाहरण में, संतृप्ति को बढ़ाकर 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);
}
क्रोमा रंग को बूस्ट करता है
यह इफ़ेक्ट किसी रंग को फीका करने जैसा होता है, लेकिन यह कई मायनों में अलग होता है. सबसे पहले, यह chroma बदलाव है, न कि saturation में. ऐसा इसलिए है, क्योंकि जिन कलर स्पेस को हाई डाइनैमिक रेंज में बूस्ट किया जा सकता है उनमें रंग को गहरा या फीका नहीं किया जाता. 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%);
}
रंग उलटना
रंग बदलने की सुविधा, कलर लाइब्रेरी में मौजूद रंग में बदलाव करने का एक आम फ़ंक्शन है. इसका एक तरीका यह है कि किसी रंग को आरजीबी में बदलें और फिर हर चैनल की वैल्यू को 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&misast; (Lstar) का इस्तेमाल करें.
यह calc() में, एलसीएच और OKLCH से आने वाले समय में (करीब) एक जैसे रोशनी (L) चैनल का इस्तेमाल करता है. अगर आप कम, मध्यम या ज़्यादा कंट्रास्ट को टारगेट कर रहे हैं, तो इसके आधार पर L&मिडास्ट; डेल्टा करीब ~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 */
}
रिलेटिव कलर सिंटैक्स और OKLCH के साथ बनाए गए पैलेट आज़माएं
मुफ़्त सीएसएस वैरिएबल की लाइब्रेरी, Open Props, इस रणनीति के साथ बनाए गए रंग पटल की सुविधा देता है और उन्हें इंपोर्ट के साथ आसानी से इस्तेमाल करने लायक बनाता है. इनमें ऐसे सभी रंग होते हैं जिन्हें अपनी पसंद के मुताबिक बनाया जा सकता है. आपको बस कोई एक रंग देना है, तो पैलेट को एक अलग रंग में दिखाना है!
एनालॉगस पैलेट
OKLCH और एचएसएल के साथ ह्यू रोटेशन बहुत आसान है, इसलिए एक एनालॉगस कलर पैलेट बनाना आसान होता है. रंग को अपनी पसंद की मात्रा तक घुमाएं और बेस रंग बदलें, और ब्राउज़र द्वारा बनाए गए नए पैलेट देखें.
: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));
}
ट्रायडिक पैलेट
पूरक रंगों की तरह, ट्रायडिक कलर पैलेट भी एक-दूसरे से उलट होता है, लेकिन आधार को एक जैसा रंग देता है. जहां एक पूरक रंग उस रंग के उलट होता है, जैसे कि कलर व्हील के बीच में बनी सीधी रेखा, ट्रायडिक पैलेट, लाइनों के त्रिभुज की तरह होता है, जिसमें बेस कलर से दो रंग समान रूप से घूमते हुए दिखते हैं.
इसे पूरा करने के लिए रंग 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))
);
}