कलर स्कीम बनाना

डाइनैमिक और कॉन्फ़िगर की जा सकने वाली कलर स्कीम सेट अप करने के तरीके के बारे में खास जानकारी

Adam Argyle

इस पोस्ट में, मैं सीएसएस में एक से ज़्यादा कलर स्कीम मैनेज करने के तरीकों के बारे में जानकारी शेयर करना चाहता हूं. डेमो आज़माएं.

अगर आपको वीडियो देखना है, तो यहां इस पोस्ट का YouTube वर्शन दिया गया है:

खास जानकारी

हम कस्टम प्रॉपर्टी और calc() की मदद से, आसानी से ऐक्सेस किया जा सकने वाला कलर सिस्टम बनाएंगे. इससे ऐसा वेबपेज बनाया जा सकेगा जो उपयोगकर्ताओं की प्राथमिकताओं के हिसाब से काम करेगा. साथ ही, इससे ऑथरिंग का अनुभव भी बेहतर होगा. हम ब्रैंड के मुख्य रंग से शुरुआत करते हैं और इससे अलग-अलग रंग बनाते हैं: टेक्स्ट के दो रंग, चार बैकग्राउंड के रंग, और इनसे मिलती-जुलती शैडो.

इस गाइड में, सबसे पहले हर कलर स्कीम के लिए सभी रंगों के बारे में बताया गया है. इनका इस्तेमाल, पेज में बदलाव करने के लिए आखिर तक नहीं किया जाता.

ब्रैंड

अक्सर, ब्रैंड का रंग पहले से तय होता है और इसे hex या rgb के तौर पर डिलीवर किया जाता है. इस जीयूआई चैलेंज में, ब्रैंड का मुख्य रंग #0af है. सबसे पहले, इस कलर सिस्टम के लिए, हेक्स वैल्यू को hsl में बदलना होगा.

* {
  --brand: #0af;
  --brand: hsl(200 100% 50%);
}

ब्रैंड के रंग को 20% तक हल्का या गहरा करने के लिए, एचएसएल रंग की वैल्यू के तीनों चैनलों को उनकी कस्टम प्रॉपर्टी में अलग-अलग निकालना होगा. जैसे:

* {
  --brand-hue: 200;
  --brand-saturation: 100%;
  --brand-lightness: 50%;
}

सीएसएस, रंग की उन प्रॉपर्टी पर गणित के फ़ंक्शन इस्तेमाल कर सकती है. उदाहरण के लिए, calc(var(--brand-lightness) - 20%) से रंग की चमक को 20% तक कम किया जा सकता है. यह कलर स्कीम बनाने के लिए बुनियादी सिद्धांत है, क्योंकि सीएसएस, एचएसएल के सैचुरेशन और लाइटनेस को अडजस्ट करके, सभी रंगों को एक ही ह्यू फ़ैमिली में रख सकती है.

हल्के रंग वाली थीम

हर रंग के वैरिएंट को उसकी मैचिंग स्कीम के साथ मार्क किया जाएगा. इस मामले में, हर वैरिएंट के साथ -light जोड़ा गया है.

ब्रैंड

ब्रैंड के रंग से शुरू करके, इसे फिर से बनाया गया है. इसके लिए, hsl () फ़ंक्शन के ब्रैकेट में --brand-hue, --brand-saturation और --brand-lightness कस्टम प्रॉपर्टी को रैप किया गया है. इसमें कोई भी कैलकुलेशन नहीं की गई है:

* {
  --brand-light: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
}

टेक्स्ट के रंग

इसके बाद, कलर स्कीम के लिए टेक्स्ट के रंगों की ज़रूरत होती है. हल्के रंग वाली थीम में, टेक्स्ट का रंग बहुत गहरा होना चाहिए. ध्यान दें कि यहां दिए गए रंगों की चमक कम है. यह 50% से काफ़ी कम है.

* {
  --text1-light: hsl(var(--brand-hue) var(--brand-saturation) 10%);
  --text2-light: hsl(var(--brand-hue) 30% 30%);
}

--text1-light, क्योंकि 10% लाइटनेस पर यह बहुत गहरा हो जाता है. इसलिए, इसे 100% सैचुरेशन पर रखा जाता है, ताकि ब्रैंड का रंग गहरे नेवी रंग में भी दिख सके.

--text2-light, यह पहले रंग जितना गहरा नहीं है. यह अच्छी बात है, क्योंकि यह दूसरा रंग है. साथ ही, यह पहले रंग की तुलना में कम गहरा है.

सरफ़ेस के रंग

सरफ़ेस कलर, बैकग्राउंड, बॉर्डर, और सजावट के लिए इस्तेमाल किए जाने वाले अन्य सरफ़ेस होते हैं. इन पर या इनके अंदर टेक्स्ट दिखता है. हल्के रंग वाली थीम में, ये हल्के रंग होते हैं. ये टेक्स्ट के गहरे रंगों से अलग होते हैं. hsl का इस्तेमाल करके हल्के रंग बनाने के लिए, हम लाइटनेस की तीसरी वैल्यू में ज़्यादा प्रतिशत वाली वैल्यू का इस्तेमाल करेंगे. हम सैचुरेशन को भी कम करेंगे, ताकि हल्के ग्रे रंग ज़्यादा गहरे न दिखें.

* {
  --surface1-light: hsl(var(--brand-hue) 25% 90%);
  --surface2-light: hsl(var(--brand-hue) 20% 99%);
  --surface3-light: hsl(var(--brand-hue) 20% 92%);
  --surface4-light: hsl(var(--brand-hue) 20% 85%);
}

सजावटी रंगों के लिए चार तरह के रंग बनाए गए हैं, क्योंकि इस तरह के रंगों के ज़्यादा वैरिएंट की ज़रूरत होती है. जैसे, :focus या :hover जैसे इंटरैक्टिव मोमेंट के लिए या पेपर लेयर जैसा लुक बनाने के लिए. इन स्थितियों में, कर्सर घुमाने पर --surface2-light से --surface3-light में ट्रांज़िशन करना अच्छा होता है. इससे कर्सर घुमाने पर कंट्रास्ट बढ़ जाता है (99% से 92% तक हल्कापन; इससे यह गहरा हो जाता है).

परछाई

कलर स्कीम में शैडो का इस्तेमाल बहुत अच्छे तरीके से किया गया है. इससे इमेज को असल जैसा लुक मिलता है. साथ ही, यह इमेज को काले रंग की शैडो से अलग बनाती है. ऐसा करने के लिए, शैडो के रंग में ह्यू कस्टम प्रॉपर्टी का इस्तेमाल किया जाएगा. यह ह्यू के साथ थोड़ा सा सैचुरेट होगा, लेकिन फिर भी बहुत गहरा होगा. इससे एक बहुत गहरे रंग की, थोड़ी नीली रंगत वाली परछाई बनती है.

* {
  --surface-shadow-light: var(--brand-hue) 10% 20%;
  --shadow-strength-light: .02;
}

--surface-shadow-light को hsl फ़ंक्शन में रैप नहीं किया गया है. ऐसा इसलिए होता है, क्योंकि --shadow-strength वैल्यू को मिलाकर कुछ ओपैसिटी बनाई जाएगी. साथ ही, सीएसएस को कैलकुलेशन करने के लिए इन वैल्यू की ज़रूरत होती है. ज़्यादा जानने के लिए, रेड शैडो सेक्शन पर जाएं.

सभी हल्के रंग

किसी भी हल्के रंग को बनाने का तरीका जानने के लिए, आपको अलग-अलग जगह पर ढूंढने की ज़रूरत नहीं है. ये सभी CSS में एक ही जगह पर मौजूद हैं.

* {
  --brand-light: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
  --text1-light: hsl(var(--brand-hue) var(--brand-saturation) 10%);
  --text2-light: hsl(var(--brand-hue) 30% 30%);
  --surface1-light: hsl(var(--brand-hue) 25% 90%);
  --surface2-light: hsl(var(--brand-hue) 20% 99%);
  --surface3-light: hsl(var(--brand-hue) 20% 92%);
  --surface4-light: hsl(var(--brand-hue) 20% 85%);
  --surface-shadow-light: var(--brand-hue) 10% calc(var(--brand-lightness) / 5);
  --shadow-strength-light: .02;
}

गहरे रंग वाली थीम

ज़्यादातर ब्रैंड, डार्क थीम से शुरुआत नहीं करते. यह उनकी मुख्य थीम का एक वैरिएंट होता है. आम तौर पर, यह हल्की थीम होती है. हालांकि, उपयोगकर्ता अक्सर अलग-अलग कॉन्टेक्स्ट के लिए गहरे रंग वाली थीम चुनते हैं. जैसे, रात के समय. इन बातों को ध्यान में रखते हुए, मैंने गहरे रंग वाली थीम के लिए दो बातों का ध्यान रखा है:

1. आम तौर पर, इस थीम का इस्तेमाल करते समय उपयोगकर्ताओं को कुछ भी नहीं दिखेगा. इसलिए, गहरे रंग वाली थीम में टेस्ट करें.
2. रंगों को इस तरह से हल्का किया जाना चाहिए कि वे ज़्यादा गहरे होने की वजह से स्क्रीन पर वाइब्रेट न करें.

ब्रैंड

लाइट थीम में, ब्रैंड के तीन एचएसएल कलर चैनल की वैल्यू में कोई बदलाव नहीं किया गया है. हालांकि, डार्क थीम में ऐसा नहीं है. सैट्युरेशन को आधा कर दिया गया है और चमक को 50% तक कम कर दिया गया है.

* {
  --brand-dark: hsl(
    var(--brand-hue)
    calc(var(--brand-saturation) / 2)
    calc(var(--brand-lightness) / 1.5)
  );
}

टेक्स्ट के रंग

गहरे रंग वाली थीम में, टेक्स्ट के रंग हल्के होने चाहिए. नीचे दिए गए रंगों की चमक की वैल्यू ज़्यादा है. इसलिए, ये रंग सफ़ेद रंग के ज़्यादा करीब हैं.

* {
  --text1-dark: hsl(var(--brand-hue) 15% 85%);
  --text2-dark: hsl(var(--brand-hue) 5% 65%);
}

सरफ़ेस के रंग

गहरे रंग वाली थीम में, बैकग्राउंड के रंग गहरे होने चाहिए. यहां दिए गए रंगों में लाइटनेस और सैचुरेशन कम है. साथ ही, पहले रंग की ओपैसिटी 10% है, जो सबसे गहरा रंग है.

* {
  --surface1-dark: hsl(var(--brand-hue) 10% 10%);
  --surface2-dark: hsl(var(--brand-hue) 10% 15%);
  --surface3-dark: hsl(var(--brand-hue) 5%  20%);
  --surface4-dark: hsl(var(--brand-hue) 5% 25%);
}

परछाई

गहरे रंग वाली थीम में, शैडो को देखना बहुत मुश्किल हो सकता है. ऐसा इसलिए है, क्योंकि पहले से ही गहरे रंग की किसी चीज़ को और गहरा करना मुश्किल होता है. यहां --shadow-strength-dark बहुत काम आता है, क्योंकि इसकी मदद से हम एक वैरिएबल को बदलकर, शैडो को डार्क कर सकते हैं.

* {
  --surface-shadow-dark: var(--brand-hue) 50% 3%;
  --shadow-strength-dark: .8;
}

साथ ही, यह भी देखें कि उस परछाई में कितना सैचुरेशन है. क्या आपको इंटरफ़ेस देखते समय रंग दिख रहा है? DevTools से सैचुरेशन हटाकर देखें. आपको कौनसी इमेज ज़्यादा पसंद आई?!

सभी गहरे रंग एक साथ

* {
  --brand-dark: hsl(var(--brand-hue) calc(var(--brand-saturation) / 2) calc(var(--brand-lightness) / 1.5));
  --text1-dark: hsl(var(--brand-hue) 15% 85%);
  --text2-dark: hsl(var(--brand-hue) 5% 65%);
  --surface1-dark: hsl(var(--brand-hue) 10% 10%);
  --surface2-dark: hsl(var(--brand-hue) 10% 15%);
  --surface3-dark: hsl(var(--brand-hue) 5%  20%);
  --surface4-dark: hsl(var(--brand-hue) 5% 25%);
  --surface-shadow-dark: var(--brand-hue) 50% 3%;
  --shadow-strength-dark: .8;
}

डिम थीम

इस कलर स्कीम में, हल्के और गहरे रंग का इस्तेमाल किया जाता है. इसमें इतना सैचुरेशन होना चाहिए कि रंग अब भी दिखे. हालांकि, इसमें कंट्रास्ट स्कोर भी कम होना चाहिए, क्योंकि इसे हल्का और कम कंट्रास्ट वाला बनाया गया है.

ब्रैंड

* {
  --brand-dim: hsl(
    var(--brand-hue)
    calc(var(--brand-saturation) / 1.25)
    calc(var(--brand-lightness) / 1.25)
  );
}

टेक्स्ट के रंग

* {
  --text1-dim: hsl(var(--brand-hue) 15% 75%);
  --text2-dim: hsl(var(--brand-hue) 10% 61%);
}

सरफ़ेस के रंग

* {
  --surface1-dim: hsl(var(--brand-hue) 10% 20%);
  --surface2-dim: hsl(var(--brand-hue) 10% 25%);
  --surface3-dim: hsl(var(--brand-hue) 5%  30%);
  --surface4-dim: hsl(var(--brand-hue) 5% 35%);
}

परछाई

* {
  --surface-shadow-dim: var(--brand-hue) 30% 13%;
  --shadow-strength-dim: .2;
}

सभी रंगों को एक साथ हल्का करना

* {
  --brand-dim: hsl(var(--brand-hue) calc(var(--brand-saturation) / 1.25) calc(var(--brand-lightness) / 1.25));
  --text1-dim: hsl(var(--brand-hue) 15% 75%);
  --text2-dim: hsl(var(--brand-hue) 10% 61%);
  --surface1-dim: hsl(var(--brand-hue) 10% 20%);
  --surface2-dim: hsl(var(--brand-hue) 10% 25%);
  --surface3-dim: hsl(var(--brand-hue) 5%  30%);
  --surface4-dim: hsl(var(--brand-hue) 5% 35%);
  --surface-shadow-dim: var(--brand-hue) 30% 13%;
  --shadow-strength-dim: .2;
}

सुलभता के लिए रंग

ध्यान दें कि गहरे रंग के टेक्स्ट के लिए, सबसे कम लाइटनेस 65% पर सेट है. वहीं, गहरे रंग के बैकग्राउंड के लिए, सबसे ज़्यादा लाइटनेस 25% पर सेट है. इनके बीच 40% की रोशनी है. हल्के रंग वाली थीम में, 55% जगह खाली होती है. टेक्स्ट और बैकग्राउंड के रंगों के बीच 40 से 50% तक का अंतर रखने से, कलर कंट्रास्ट रेशियो को बेहतर बनाए रखने में मदद मिलती है. साथ ही, अगर स्कोर खराब हैं, तो इस अंतर को कम करके स्कोर को बेहतर बनाया जा सकता है.

इसे "बंप बंप टिल या पास" कहा जाता है. इसमें, टूल के यह बताने तक कि मैं पास हो गया हूं, लाइटनेस वैल्यू को बंप किया जाता है.

इस चैलेंज में बनाई गई हर थीम, कंट्रास्ट स्कोर की ज़रूरी शर्तें पूरी करती है. डिम कलर स्कीम में सबसे कम कंट्रास्ट होता है. हालांकि, यह अब भी ज़रूरी शर्तों को पूरा करती है. टीम के अन्य लोगों को कंट्रास्ट वाले अच्छे रंगों का इस्तेमाल करने में मदद करने के लिए, ऐसा क्लासनेम बनाएं जो सुलभ टेक्स्ट कलर के साथ सर्फ़ेस कलर को पेयर करता हो.

.surface1 {
  background-color: var(--surface1);
  color: var(--text2);
}

.surface2 {
  background-color: var(--surface2);
  color: var(--text2);
}

.surface3 {
  background-color: var(--surface3);
  color: var(--text1);
}

.surface4 {
  background-color: var(--surface4);
  color: var(--text1);
}

रैड शैडो

थीम, .rad-shadow नाम की यूटिलिटी क्लास का इस्तेमाल करती हैं. यह शैडो, स्मूद शैडो टूल से जनरेट की गई है. मुझे यह टूल बहुत पसंद आया. मैंने जनरेट किए गए स्निपेट का इस्तेमाल किया और उसे अपनी पसंद के रंगों और ओपैसिटी के हिसाब से बनाया. ऐसा इसलिए किया गया, ताकि मैं हर कलर स्कीम में शैडो को अडजस्ट कर सकूं.

इसके लिए, मैंने हर कलर स्कीम के लिए दो वैरिएबल बनाए हैं, ताकि शैडो के रंग और शैडो की इंटेंसिटी को अडजस्ट किया जा सके. रंग का इस्तेमाल, रंग के गहरेपन और हल्केपन को अडजस्ट करने के लिए किया जाता है. वहीं, स्ट्रेंथ का इस्तेमाल, गहरे रंग वाली कलर स्कीम में शैडो की इंटेंसिटी को आसानी से बढ़ाने के लिए किया जाता है. आखिरी नतीजा कुछ ऐसा था.

:root {
  --surface-shadow-light: var(--brand-hue) 10% 20%;
  --shadow-strength-light: .02;
}

.rad-shadow {
  box-shadow:
    0 2.8px 2.2px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),
    0 6.7px 5.3px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .01)),
    0 12.5px 10px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),
    0 22.3px 17.9px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),
    0 41.8px 33.4px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),
    0 100px 80px hsl(var(--surface-shadow) / var(--shadow-strength))
  ;
}

अगर मुझे अपनी कलर स्कीम में शैडो का इस्तेमाल और करना है, तो मैं शैडो के ऐंगल को भी डिज़ाइन टोकन कॉन्स्टेंट बनाऊंगा. ऐसा इसलिए, क्योंकि डिज़ाइन की सभी शैडो के लिए, रोशनी की दिशा एक जैसी होनी चाहिए.

कलर स्कीम का इस्तेमाल करना

रंगों को पहले से तय करने का काम पूरा हो गया है. अब इन्हें स्कीम से जुड़ी प्रॉपर्टी में बदलने का समय है. मेरा मतलब यह है कि इस कलर स्कीम प्रोजेक्ट में सीएसएस लेखक के तौर पर, किसी को किसी खास कलर स्कीम की वैल्यू को ऐक्सेस करने की ज़रूरत बहुत कम पड़ती है. मुझे थीम के हिसाब से जवाब देना है.

इसके लिए, कलर स्कीम का इस्तेमाल सिर्फ़ सामान्य कस्टम प्रॉपर्टी के ज़रिए किया जाना चाहिए. हम इसके बारे में अभी जानकारी देंगे. इस तरह, डिज़ाइन वैरिएबल का इस्तेमाल करने वाले लोगों को यह चिंता करने की ज़रूरत नहीं होती कि फ़िलहाल कौनसी कलर स्कीम सेट है. उन्हें सिर्फ़ सर्फ़ेस और टेक्स्ट के रंगों का इस्तेमाल करना होता है. color: var(--text1-light) के बजाय color: var(--text1) का इस्तेमाल करें. CSS में, रंगों को अडैप्ट करने और बदलने का काम बहुत ज़्यादा लेवल पर किया जाता है.

यहां दिए गए कोड ब्लॉक में, लाइट थीम की कनेक्ट करने वाली स्टाइल, एक सामान्य कस्टम प्रॉपर्टी को लाइट थीम के खास रंग से कनेक्ट करती हैं. अब var(--brand) के सभी इस्तेमाल में, ब्रैंड के हल्के रंग का इस्तेमाल किया जाएगा.

हल्के रंग वाली थीम (अपने-आप सेट होने वाली)

:root {
  color-scheme: light;
  --brand: var(--brand-light);
  --text1: var(--text1-light);
  --text2: var(--text2-light);
  --surface1: var(--surface1-light);
  --surface2: var(--surface2-light);
  --surface3: var(--surface3-light);
  --surface4: var(--surface4-light);
  --surface-shadow: var(--surface-shadow-light);
  --shadow-strength: var(--shadow-strength-light);
}

अब साइट पर हल्के रंग वाली थीम का इस्तेमाल किया जा रहा है. यह एक बहुत ही मज़ेदार और शानदार पल है! आइए, पहले से तय किए गए रंगों को कलर स्कीम के अन्य कॉन्टेक्स्ट में इस्तेमाल करते समय, कुछ और ऐसे उदाहरण देखें.

गहरे रंग वाली थीम (अपने-आप)

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --brand: var(--brand-dark);
    --text1: var(--text1-dark);
    --text2: var(--text2-dark);
    --surface1: var(--surface1-dark);
    --surface2: var(--surface2-dark);
    --surface3: var(--surface3-dark);
    --surface4: var(--surface4-dark);
    --surface-shadow: var(--surface-shadow-dark);
    --shadow-strength: var(--shadow-strength-dark);
  }
}

हल्के रंग वाली थीम

[color-scheme="light"] {
  color-scheme: light;

  --brand: var(--brand-light);
  --text1: var(--text1-light);
  --text2: var(--text2-light);
  --surface1: var(--surface1-light);
  --surface2: var(--surface2-light);
  --surface3: var(--surface3-light);
  --surface4: var(--surface4-light);
  --surface-shadow: var(--surface-shadow-light);
  --shadow-strength: var(--shadow-strength-light);
}

गहरे रंग वाली थीम

[color-scheme="dark"] {
  color-scheme: dark;

  --brand: var(--brand-dark);
  --text1: var(--text1-dark);
  --text2: var(--text2-dark);
  --surface1: var(--surface1-dark);
  --surface2: var(--surface2-dark);
  --surface3: var(--surface3-dark);
  --surface4: var(--surface4-dark);
  --surface-shadow: var(--surface-shadow-dark);
  --shadow-strength: var(--shadow-strength-dark);
}

डिम थीम

[color-scheme="dim"] {
  color-scheme: dark;

  --brand: var(--brand-dim);
  --text1: var(--text1-dim);
  --text2: var(--text2-dim);
  --surface1: var(--surface1-dim);
  --surface2: var(--surface2-dim);
  --surface3: var(--surface3-dim);
  --surface4: var(--surface4-dim);
  --surface-shadow: var(--surface-shadow-dim);
  --shadow-strength: var(--shadow-strength-dim);
}

इस समय, लेखक अपनी ज़रूरत के हिसाब से, दी गई कलर स्कीम के जेनेरिक का इस्तेमाल कर सकते हैं. उन्हें थीम के बारे में फिर से चिंता करने की ज़रूरत नहीं होगी.

नतीजा

अब आपको पता चल गया है कि मैंने यह कैसे किया. अब आप कैसे करेंगे?! 🙂

आइए, हम अपने तरीकों में विविधता लाएं और वेब पर काॅन्टेंट पोस्ट करने के सभी तरीके जानें. Codepen बनाएं या अपना डेमो होस्ट करें. इसके बाद, मुझे ट्वीट करके इसकी जानकारी दें. मैं इसे यहां दिए गए कम्यूनिटी रीमिक्स सेक्शन में जोड़ दूंगा.

स्रोत

• GitHub पर जीयूआई चैलेंज का सोर्स
• कलर स्कीम Codepen starter

कम्यूनिटी रीमिक्स - @chris-kruining ने no-preference, more, और less के लिए, रंग बदलने वाला स्लाइडर, स्टेटस के रंग, और कंट्रास्ट मोड जोड़े: डेमो.