बेसलाइन सीएसएस सुविधाओं वाली कलर थीम

David A. Herron

पब्लिश होने की तारीख: 11 दिसंबर, 2025

इसलिए, आपके पास एक ऐसी साइट है जिसे आपको बनाना है या फिर से डिज़ाइन करना है. ऐसा हो सकता है कि आपने कुछ मुख्य रंग तय कर लिए हों और आपको उन रंगों के आधार पर थीम को तुरंत लागू करना हो.

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

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

मिलते-जुलते रंगों का इस्तेमाल करके बेस तैयार करना

अगर आपको अपनी थीम के लिए प्राइमरी कलर का कोई आइडिया है, तो कलर थ्योरी और सीएसएस के रिलेटिव कलर सिंटैक्स का इस्तेमाल करके, अपनी थीम में इस्तेमाल करने के लिए रंगों का पैलेट तुरंत जनरेट किया जा सकता है.

मान लें कि आपका बेस कलर टील रंग का एक शेड है. इसे अपनी पसंद के कलर फ़ॉर्मैट में तय किया जा सकता है. इसके बाद, अपने बेस कलर के हिसाब से नए कलर बनाने के लिए, किसी भी कलर फ़ंक्शन का इस्तेमाल किया जा सकता है:

html {
  --base-color: oklch(43.7% 0.075 224);
}

--base-color कस्टम प्रॉपर्टी को oklch() कलर फ़ंक्शन का इस्तेमाल करके बनाया गया है. OkLCh, Oklab कलर स्पेस का सिलिंड्रिकल फ़ॉर्म है. यह तीन चैनलों के लिए वैल्यू तय करता है: L (लाइटनेस), C (क्रोमा), H (ह्यू). साथ ही, इसमें पारदर्शिता को कंट्रोल करने के लिए एक वैकल्पिक ऐल्फ़ा चैनल भी होता है.

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

--base-color के रंग की चमक और क्रोमा को एक जैसा रखते हुए, ट्राइडिक पैलेट के लिए रंग को दोनों दिशाओं में 120 डिग्री तक अडजस्ट किया जा सकता है.

html {
  /* ... */
  --triadic-color-primary: oklch(from var(--base-color) l c calc(h + 120));
  --triadic-color-secondary: oklch(from var(--base-color) l c calc(h - 120));
}

यहां दिखाए गए उदाहरण में, रिलेटिव कलर सिंटैक्स, कलर फ़ंक्शन का इस्तेमाल करता है. यह फ़ंक्शन, from कीवर्ड के साथ ओरिजन कलर (इस उदाहरण में --base-color) को रेफ़रंस करता है. साथ ही, चुने गए आउटपुट कलर के आधार पर, कलर स्पेस के अलग-अलग चैनलों को अडजस्ट करता है. इस मामले में, आउटपुट कलर भी OkLCh होगा.

इससे मिलने वाले आउटपुट में, आपको --accent-color के लिए डार्क पिंक रंग मिलता है. साथ ही, --highlight-color के लिए सुनहरे रंग का शेड मिलता है. दोनों में, ओरिजनल --base-color की तरह ही चमक और क्रोमा होता है.

html {
  /* ... */
  --accent-color: var(--triadic-color-primary);
  --highlight-color: var(--triadic-color-secondary);
}

  html {
    /* Input color in the rgb color space*/
    --base-color: teal;

     /* Output color in oklch. Computes to oklch(0.543123 0.0927099 314.769) */
     --triadic-color-primary: oklch(from var(--base-color) l c calc(h + 120));
  }

पूरक रंग, रंग के कोण में 180 डिग्री जोड़ देगा.

html {
  /* ... */
  --complement-color: oklch(from var(--base-color) l c calc(h + 180));
  --border-highlight: var(--complement-color);
}

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

html {
  /* Darken the --base-color by 15% */
  --base-color-darkened: oklch(from var(--base-color) calc(l * 0.85) c h);
  /* Assign this color a meaningful variable name */
  --action-color: var(--base-color-darkened);
  /* Lighten the --action-color by 15% */
  --action-color-light: oklch(from var(--action-color) calc(l * 1.15) c h);
  /* Darken the --action-color by 10% */
  --action-color-dark: oklch(from var(--action-color) calc(l * 0.9) c h);
}

यहां हम --base-color से --action-color को डिराइव कर रहे हैं. साथ ही, इसका इस्तेमाल बटन और लिंक के लिए कर रहे हैं. --action-color के दो वैरिएंट हैं—हल्का और गहरा. अगर --action-color को --base-color से अलग किसी दूसरे रंग के हिसाब से बदला जाता है, तब भी ये दोनों वैरिएंट लागू रहेंगे.

calc() जैसे गणित के फ़ंक्शन का इस्तेमाल करके, चैनलों में बदलाव किया जा सकता है. इसके अलावा, चैनल को पूरी तरह से नई वैल्यू से बदला जा सकता है. जिन चैनलों में कोई बदलाव नहीं किया गया है उन्हें उनके अक्षरों से दिखाया जाता है. उदाहरण के लिए, चमक की वैल्यू में कोई बदलाव न होने पर l का इस्तेमाल किया जाता है.

color-mix() की मदद से रंगों को मिक्स करना

रंग के अन्य वैरिएंट के लिए, इसी तरह का तरीका अपनाया जा सकता है. साथ ही, --base-color कस्टम प्रॉपर्टी के अन्य चैनलों को अडजस्ट किया जा सकता है. इसके अलावा, अपने डिज़ाइन के अन्य पहलुओं में मुख्य रंग के संकेत जोड़ने के लिए, color-mix() का इस्तेमाल करें.

--border-color, बेस कलर और नाम वाले कलर grey का मिक्सचर है. इसे oklab कलर स्पेस में इंटरपोलेट किया गया है. कलर इंटरपोलेशन के तरीके के तौर पर इसका इस्तेमाल करने पर, परसेप्टुअल यूनिफ़ॉर्म नतीजे मिलते हैं.

html {
  --base-mix-grey-50: color-mix(in oklab, var(--base-color), grey);
  --border-color: var(--base-mix-grey-50);
}

डिफ़ॉल्ट रूप से, यह हर रंग का 50% होगा. हालांकि, प्रतिशत के हिसाब से रंग के अनुपात को घटाकर या बढ़ाकर, किसी रंग को ज़्यादा या कम प्रमुख बनाया जा सकता है.

html {
  --background-mix-base-80: color-mix(in oklab,
    var(--background-color) 80%,
    var(--base-color));
  --surface-light: var(--background-mix-base-80);
}

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

[data-input*="text"] {
  --focus-ring: transparent;
  /* ... */
  &:focus {
    --focus-ring: oklch(from var(--border-color) l calc(c + 0.1) h);
  }
}

हल्के और गहरे रंग वाले मोड में ऑप्ट इन करना

जब आपके पास काम करने के लिए रंगों का सेट हो, तो आपको लाइट और डार्क मोड के लिए अलग-अलग रंगों को लागू करने का एक बेहतर तरीका चाहिए होगा.

color-scheme प्रॉपर्टी की मदद से, हल्के और गहरे रंग वाली थीम के लिए सिग्नल की सुविधा

color-scheme प्रॉपर्टी की मदद से, ब्राउज़र को तुरंत यह बताया जा सकता है कि आपकी साइट को "लाइट", "डार्क" या दोनों मोड में देखा जा सकता है. इस प्रॉपर्टी से ब्राउज़र को पता चलता है कि किसी एलिमेंट को किन कलर स्कीम में आसानी से रेंडर किया जा सकता है.

 html {
   color-scheme: light dark;
}

:root छद्म-एलिमेंट या html एलिमेंट पर color-scheme: light dark सेट करना:

• यह ब्राउज़र को बताता है कि आपका पेज, लाइट या डार्क मोड में देखा जा सकता है.
• यह कुकी, ब्राउज़र के यूज़र इंटरफ़ेस के डिफ़ॉल्ट रंगों को बदलती है, ताकि वे ऑपरेटिंग सिस्टम की सेटिंग से मेल खा सकें.

उपयोगकर्ता एजेंटों को यह सूचना पहले ही दी जा सकती है कि आपका पेज, लाइट और डार्क मोड के साथ काम करता है. इसके लिए, दस्तावेज़ के <head> में <meta> एलिमेंट जोड़कर, कलर स्कीम स्विच करने की सुविधा के बारे में बताया जा सकता है.

<head>
  <!-- ... -->
   <meta name="color-scheme" content="light dark">
</head>

light-dark() फ़ंक्शन का इस्तेमाल करके, "लाइट" और "डार्क" वैरिएंट सेट करना

लेखक के तौर पर, आपको prefers-color-scheme @media क्वेरी का इस्तेमाल करके, पेज के रंग सेट करने की आदत हो सकती है.

@media (prefers-color-scheme: light) {
  html {
    --background-color: oklch(95.5% 0 162);
    --text-color: black;
  }
}

@media (prefers-color-scheme: dark) {
  html {
    --background-color: oklch(22.635% 0.01351 291.83);
    --text-color: white;
  }
}

यह लेखक के कंट्रोल किए गए रंगों और स्टाइल के लिए बहुत अच्छा काम करता है. हालांकि, जैसा कि पिछले सेक्शन में बताया गया है, आपको ब्राउज़र के यूज़र इंटरफ़ेस (यूआई) के रंगों को अपडेट करने के लिए, अब भी color-scheme की ज़रूरत होगी.

prefers-color-scheme क्वेरी की मदद से पेज के रंग बदलने का मतलब है कि कुछ कोड डुप्लीकेट हो जाएंगे. ऐसा इसलिए, क्योंकि आपको हर मोड के लिए अलग-अलग रंग तय करने होंगे.

हालांकि, पूरे पेज या कुछ खास एलिमेंट पर color-scheme सेट होने पर, light-dark() फ़ंक्शन का इस्तेमाल करके, कोड की एक लाइन में हर मोड के लिए रंग सेट किए जा सकते हैं.

यह फ़ंक्शन दो रंगों को स्वीकार करता है. पहले का इस्तेमाल तब किया जाता है, जब कलर स्कीम को "लाइट" पर सेट किया जाता है. वहीं, दूसरे का इस्तेमाल तब किया जाता है, जब कलर स्कीम को "डार्क" पर सेट किया जाता है.

html {
  color-scheme: light dark;
  /* Color custom property values for both light and dark modes */
  --base-color: light-dark(oklch(43.7% 0.075 224), oklch(89.2% 0.069 224));
  --background-color: light-dark(oklch(95.5% 0 162), oklch(22.635% 0.01351 291.83));
  --accent-color: oklch(from var(--base-color) l c calc(h + 120));
  --active-color: light-dark(var(--action-color-light), var(--action-color-dark));
  /* ... */
}

कस्टम प्रॉपर्टी की तरह ही, light-dark() सेटिंग को ग्लोबल लेवल पर या किसी कॉम्पोनेंट के लिए सेट किया जा सकता है. इसके बाद, ज़रूरत के हिसाब से इनका इस्तेमाल किया जा सकता है.

/* custom property usage */
body {
  background-color: var(--background-color);
  /* ... */
}

:any-link {
  /* ... */
  text-decoration-color: var(--accent-color);
}

उपयोगकर्ताओं को थीम स्विच करने की सुविधा दें

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

अगर आपने थीम टॉगल बनाया है, जो <html> एलिमेंट पर data-scheme एट्रिब्यूट को अपडेट करता है, तो सीएसएस के साथ color-scheme को बदलने के लिए, उसी एट्रिब्यूट का इस्तेमाल किया जा सकता है.

html {
  color-scheme: light dark;

  &[data-scheme="light"] {
    color-scheme: light;
  }

  &[data-scheme="dark"] {
    color-scheme: dark;
  }

  &[data-scheme="green"] {
      --base-color-light: oklch(48.052% 0.11875 151.945);
      --base-color-dark: oklch(92.124% 0.13356 151.558);
      color-scheme: light dark;
   }
}

data-scheme="light" और data-scheme="dark", पेज को सिर्फ़ अपने-अपने कलर मोड में दिखाते हैं. data-scheme="green" को किसी भी मोड में देखा जा सकता है. साथ ही, यह --base-color को हरे रंग के शेड में बदल देता है. इससे आपको पूरी तरह से नया पैलेट मिलता है, क्योंकि ज़्यादातर अन्य रंग --base-color पर आधारित होते हैं.

@property की मदद से कस्टम प्रॉपर्टी रजिस्टर करना

अब तक, डेमो में रंगों को स्टैंडर्ड कस्टम प्रॉपर्टी के तौर पर सेट किया गया है. टाइप की जांच करने से मिलने वाले फ़ायदों का इस्तेमाल करने के लिए, @property नियम के साथ प्रॉपर्टी भी रजिस्टर की जा सकती हैं.

इंटरफ़ेस में कई अन्य रंगों के लिए, --base-color का इस्तेमाल बेस के तौर पर किया जाता है. इसलिए, यह पक्का करना ज़रूरी है कि यह हमेशा कोई रंग हो और इसकी फ़ॉलबैक वैल्यू हो.

@property --base-color-light {
  syntax: '<color>';
  inherits: false;
  initial-value: oklch(43.7% 0.075 224);
}

@property --base-color-dark {
  syntax: '<color>';
  inherits: false;
  initial-value: oklch(89.2% 0.069 224);
}

html {
  --base-color: light-dark(var(--base-color-light), var(--base-color-dark));
}

इस तरह, अगर --base-color को गलती से अमान्य वैल्यू पर सेट कर दिया जाता है, तो यह हमेशा @property नियम के साथ सेट किए गए initial-value पर वापस आ जाएगा.

इस तरह से कुछ प्रॉपर्टी रजिस्टर करने पर, linear-gradient() में रंगों को आसानी से ऐनिमेट किया जा सकता है.

.main-heading {
  background: linear-gradient(in oklch 90deg, var(--text-color) 50%, oklch(from var(--base-color) l c var(--header-hue)));
  background-clip: text;
  color: transparent;
  animation: header-hue-switch 5s ease-in-out infinite alternate;
}

.main-heading में linear-gradient() बैकग्राउंड है, जो background-clip प्रॉपर्टी वाले पारदर्शी टेक्स्ट के ज़रिए दिखता है.

टेक्स्ट के एक हिस्से में hue दिखाया गया है. यह रिलेटिव कलर सिंटैक्स का इस्तेमाल करके, चैनल वैल्यू 26.67 से 277 तक ऐनिमेशन करता है:

@keyframes header-hue-switch {
  from {
    --header-hue: 26.67;
  }

  to {
    --header-hue: 277;
  }
}

रजिस्टर की गई --header-hue कस्टम प्रॉपर्टी की मदद से, यह ऐनिमेशन आसानी से हो पाता है. ऐसा इसलिए, क्योंकि ब्राउज़र को पता होता है कि यह कस्टम प्रॉपर्टी एक संख्या है.

@property --header-hue {
  syntax: '<number>';
  inherits: false;
  initial-value: 100;
}

बिना रजिस्टर की गई कस्टम प्रॉपर्टी के साथ, ब्राउज़र को --header-hue के डेटा टाइप के बारे में पता नहीं चलेगा. इसलिए, नंबर में ट्रांज़िशन डिस्क्रीट ऐनिमेशन होगा. इसका मतलब है कि यह धीरे-धीरे इंटरपोलेट किए बिना, एक से दूसरी स्थिति में जाएगा.

आखिर में खास जानकारी

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

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

क्रेडिट

थीम बदलने की सुविधा, एडम आर्गिल के थीम बदलने वाले कॉम्पोनेंट से ली गई है.