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

डाइनैमिक और कॉन्फ़िगर की जा सकने वाली कलर स्कीम बनाने के तरीके के बारे में बुनियादी जानकारी

Adam Argyle

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

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

खास जानकारी

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

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

ब्रैंड

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

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

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

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

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

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

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

ब्रैंड

ब्रैंड के रंग से शुरू करते हुए, इसे --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 वैल्यू को जोड़ा जाएगा. साथ ही, सीएसएस को कैलकुलेशन करने के लिए इन हिस्सों की ज़रूरत है. ज़्यादा जानने के लिए, रेड शैडो सेक्शन पर जाएं.

हल्के रंग एक साथ

कोई भी लाइट रंग कैसे भी बनता है, यह जानने के लिए यहां-वहां जाने की ज़रूरत नहीं है. ये सभी सीएसएस में एक ही जगह पर मौजूद हैं.

* {
  --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) का इस्तेमाल करें. रंगों में बदलाव और बदलाव की सभी प्रोसेस सीएसएस में काफ़ी ऊपर होती है.

नीचे दिए गए कोड ब्लॉक में, हल्के रंग वाली थीम की संयोजक स्टाइल इस्तेमाल की जाती हैं. यह एक सामान्य कस्टम प्रॉपर्टी को हल्के रंग वाली थीम के रंग से जोड़ती है. अब 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);
}

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

नतीजा

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

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

सोर्स

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

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