इस पेज का अनुवाद Cloud Translation API से किया गया है.

सीएसएस रिलेटिव कलर सिंटैक्स

किसी दूसरे रंग के चैनलों और वैल्यू के आधार पर नए रंग बनाएं.

Adam Argyle

Chrome 119 में, सीएसएस कलर लेवल 5 की एक बहुत ही बेहतरीन कलर सुविधा है. रिलेटिव कलर सिंटैक्स, सीएसएस में रंग में बदलाव करने के लिए एक आसान पाथ बनाता है. इससे लेखकों और डिज़ाइनरों को ये काम करने के तरीके मिलते हैं:

हल्का
गहरे रंग में बदलें
Saturate
रंग हटाना
Chroma boost
ओपैसिटी में बदलाव करना
इंवर्ट करें
अनुपूरक
बदलें
Contrast
कलर पैलेट

किसी रंग की ओपैसिटी में बदलाव करने के लिए, रिलेटिव कलर सिंटैक्स से पहले, आपको रंग के चैनलों के लिए कस्टम प्रॉपर्टी बनानी होंगी. आम तौर पर, ये एचएसएल होती हैं. इसके बाद, उन्हें फ़ाइनल कलर और फ़ाइनल वैरिएंट कलर में इकट्ठा करना होगा. इसका मतलब है कि आपको कई रंगों के कई टुकड़े मैनेज करने होंगे, जो जल्द ही आपके लिए बोझ बन सकते हैं.

: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 कीवर्ड के बाद दिखता है. ब्राउज़र इस मूल रंग को बदल देगा और अलग कर देगा और रंग की नई परिभाषा में इस्तेमाल करने के लिए वैरिएबल के रूप में पार्ट देगा.

सिंटैक्स rgb(green r g b / alpha) का डायग्राम दिखाया गया है. इसमें एक ऐरो, हरे रंग के ऊपर से शुरू होकर फ़ंक्शन के rgb की शुरुआत में आर्क के तौर पर दिखता है. यह ऐरो चार ऐरो में बंट जाता है, जो अपने काम के वैरिएबल पर ले जाते हैं. चार ऐरो, लाल, हरे, नीले, और अल्फा रंग के होते हैं. लाल और नीले रंग की वैल्यू 0 है, हरे रंग की वैल्यू 128 है, और अल्फा वैल्यू 100% है.

पिछले डायग्राम में मूल रंग 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 में बदल दिया गया, जिससे रंग पूरी तरह से बदल गया. इससे कलर व्हील के साथ ह्यू घूम गया. यह एक आसान ट्रिक है, जिसे HSL, HWB, LCH, और 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 (हल्कापन) चैनल की वैल्यू को .75 से गुणा करके 25% कम करके, नीले रंग को गहरा करता है. इससे नीले रंग को 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 का इस्तेमाल करता है, ताकि orchid की चमक को 50% के हिसाब से बढ़ाया जा सके.

.saturate-by-50 {
  background: hsl(from orchid h calc(s * 1.5) l);
}

देखें

किसी तय रकम तक संतृप्त करना

नीचे दिए गए उदाहरण में, .saturate-to-100 में hsl() से s चैनल का इस्तेमाल नहीं किया गया है. इसके बजाय, इसमें सैचुरेट की गई इमेज की वैल्यू तय की गई है. इस उदाहरण में, saturation को 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&mirast; (Lstar) का इस्तेमाल करें. यह calc() में, LCH और OKLCH से, (लगभग) एक जैसी रोशनी (L) वाले चैनल का इस्तेमाल करता है. कम, मीडियम या ज़्यादा कंट्रास्ट को टारगेट करने पर, 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 */
}

देखें

रिलेटिव कलर सिंटैक्स और 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% या 5 डिग्री का बदलाव किया गया है, जो कि डीपपिंक वाले ऊपर दिए गए उदाहरण से बेहतर है. इसलिए, इस पर खास ध्यान देना ज़रूरी है कि यह लीडरबोर्ड इतने आकर्षक क्यों हो सकता है.

लीडरबोर्ड के नीचे मौजूद स्लाइडर में रंग बदलना न भूलें. साथ ही, देखें कि रिलेटिव कलर सिंटैक्स, खूबसूरत रंगीन पलों को कैसे बनाता है.

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))
  );
}

देखें

सीएसएस रिलेटिव कलर सिंटैक्स

सिंटैक्स के बारे में खास जानकारी

from कीवर्ड

रंग बदलना

कस्टम प्रॉपर्टी के रंग

अपने पसंदीदा कलर स्पेस में काम करना

वैरिएबल को मिक्स करना, मैच करना, छोड़ना, और दोहराना

वैरिएबल के तौर पर ओपैसिटी

वैरिएबल पर calc() या अन्य सीएसएस फ़ंक्शन का इस्तेमाल करना

ब्राउज़र के लिए सहायता देखना

इस्तेमाल के उदाहरण और डेमो

रंग को हल्का करें

इतना हल्का करें

किसी खास वैल्यू तक हल्का करना

गहरा रंग

थोड़ा गहरा करना

किसी खास वैल्यू तक गहरा करें

किसी रंग को ज़्यादा संतृप्त करना

इतनी मात्रा में संतृप्त करें

किसी तय रकम तक संतृप्त करना

किसी रंग की चमक कम करना

संतृप्ति को कम करना

किसी खास वैल्यू तक रंग हटाना

क्रोमा बूस्ट कलर

किसी रंग की ओपैसिटी में बदलाव करना

ओपैसिटी में बदलाव करना

ओपैसिटी को किसी खास वैल्यू पर अडजस्ट करना

किसी रंग को उलटा करना

किसी रंग के साथ मैच करने वाला रंग चुनना

किसी रंग के लिए कंट्रास्ट सेट करना

गहरे रंग के साथ कंट्रास्ट करना

हल्के रंग के साथ कंट्रास्ट करना

रंग पैलेट

मोनोक्रोमैटिक पैलेट

रिलेटिव कलर सिंटैक्स और OKLCH का इस्तेमाल करके बनाए गए कई पैलेट आज़माएं

मिलते-जुलते पैलेट

ट्रायडिक पैलेट

टेट्राडिक पैलेट

थोड़े रंग में घुमाया गया मोनोक्रोमैटिक

OKLCH और ह्यू रोटेशन की मदद से बनाए गए इस लीडरबोर्ड को आज़माएं

`from` कीवर्ड