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

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

Adam Argyle

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

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

खास जानकारी

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

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

ब्रैंड

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

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

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

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

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

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

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

ब्रैंड

ब्रैंड के रंग से शुरू करते हुए, --brand-hue, --brand-saturation को रैप करके इसे फिर से बनाया गया है और hsl () फ़ंक्शन ब्रैकेट में --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% होने की वजह से, इसमें बहुत ज़्यादा को गहरा या फीका करें, ताकि ब्रैंड रंग अब भी गहरे रंग की नेवी के बीच से झांक सके.

--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. रंग फीका होने चाहिए, ताकि स्क्रीन पर वे वाइब्रेट न करें. ऐसा होने की वजह से .

ब्रैंड

हल्के रंग वाली थीम में, तीन ब्रैंड hsl कलर चैनलों की वैल्यू को बिना किसी बदलाव के इस्तेमाल किया गया है, गहरे रंग वाली थीम काम नहीं करती. रंग को आधा काट दिया गया है और हल्कापन कम हो गया है करीब 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%);
}

सतह के रंग

गहरे रंग वाली थीम में, सतह का रंग गहरा होना चाहिए. इन रंगों में साथ ही, कम रोशनी और रंग में गहरा या फीका.

* {
  --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 के लिए स्टेटस के रंग और कंट्रास्ट मोड: डेमो.