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

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

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

Adam Argyle

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

हल्का करना
गहरे रंग में बदलें
Saturate
रंग हटाना
Chroma boost
ओपैसिटी में बदलाव करना
इंवर्ट करें
Complement
बदलें
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, रंग में पूरा बदलाव होता है. यह ऐसा बदलाव होता है जिसमें वैरिएबल की वैल्यू का इस्तेमाल नहीं किया जाता और इसके बजाय पूरी तरह से नई वैल्यू तय की जाती है.

सभी डेमो, इस Codepen कलेक्शन में देखे जा सकते हैं.

किसी रंग को हल्का करना

रंगों को हल्का करते समय, 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 के आधार पर नया कलर बनाया गया है, लेकिन संतृप्ति को 25% पर सेट किया गया है.indigo

.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&midast; (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` कीवर्ड