Tailwind CSS रंग सिस्टम: शेड कैसे जनरेट होते हैं

Tailwind CSS वेब डेवलपमेंट में सबसे व्यापक रूप से उपयोग किए जाने वाले रंग सिस्टम में से एक के साथ आता है। 22 रंग परिवारों का इसका पैलेट — प्रत्येक 50 से 950 तक 11 शेड में विभाजित — लाखों वेबसाइटों को शक्ति प्रदान करता है। लेकिन ये शेड कहाँ से आते हैं, कैसे जनरेट होते हैं, और आप अपने स्वयं के स्केल कैसे बना सकते हैं?

रंग के लिए Tailwind का डिज़ाइन दर्शन

Tailwind शेड जनरेशन के लिए एक सरल अंकगणितीय दृष्टिकोण का उपयोग नहीं करता। इसके बजाय, Tailwind टीम ने हर शेड को अनुभवात्मक चमक और सौंदर्य निर्णय के संयोजन का उपयोग करके हाथ से तैयार किया:

1. प्रत्येक चरण पर उपयोगी: 50 से 950 तक प्रत्येक शेड ऐसा होना चाहिए जिसे कोई उपयोग करना चाहे
2. वर्णों में सुसंगत: नीले का 500 शेड हरे के 500 शेड जितना "मध्यम" लगना चाहिए
3. WCAG-जागरूक: गहरे शेड (700-950) सफेद के विरुद्ध AA कंट्रास्ट प्राप्त करने चाहिए

22 रंग परिवार

11 शेड चरण

शेड एल्गोरिदम कैसे काम करता है

Tailwind के रंग हाथ से तैयार किए गए थे, लेकिन टीम ने OKLCH रंग स्थान में निहित एक प्रक्रिया का उपयोग किया:

1. 500 मान चुनें: इस परिवार के लिए प्राथमिक ब्रांड रंग परिभाषित करें
2. प्रत्येक चरण के लिए चमक लक्ष्य सेट करें: 11 चरणों को विशिष्ट OKLCH चमक मानों पर मैप करें
3. क्रोमा और वर्ण बनाए रखें: जहाँ संभव हो, केवल चमक समायोजित करें
4. वर्ण बदलाव के लिए हाथ से समायोजन करें
5. sRGB hex में बदलें

किसी भी Tailwind hex मान को OKLCH स्थान में जाँचने के लिए रंग कनवर्टर का उपयोग करें।

Tailwind रंग पैलेट को कस्टमाइज़ करना

Tailwind v3

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50:  '#f0f9ff',
          100: '#e0f2fe',
          500: '#0ea5e9',
          900: '#0c4a6e',
          950: '#082f49',
        },
      },
    },
  },
}

Tailwind v4 (CSS-फर्स्ट कॉन्फिगरेशन)

@import "tailwindcss";

@theme {
  --color-brand-50: #f0f9ff;
  --color-brand-500: #0ea5e9;
  --color-brand-950: #082f49;
}

v4 में क्या बदला

CSS वेरिएबल सत्य के स्रोत के रूप में

v4 में, प्रत्येक बिल्ट-इन रंग CSS कस्टम प्रॉपर्टी के रूप में उजागर होता है:

.custom-element {
  background-color: var(--color-blue-500);
  border-color: var(--color-blue-200);
}

OKLCH रंग मान

Tailwind v4 sRGB hex के बजाय OKLCH में अपने रंग व्यक्त करता है: - वाइड गैमट समर्थन: P3 या Rec. 2020 गैमट का समर्थन करने वाले डिस्प्ले पर - बेहतर इंटरपोलेशन: दो Tailwind रंगों के बीच ग्रेडिएंट अधिक दृश्यमान रूप से समान परिणाम उत्पन्न करते हैं

सिमेंटिक रंग टोकन

@theme {
  --color-primary: var(--color-blue-600);
  --color-surface: var(--color-slate-50);
  --color-on-surface: var(--color-slate-900);
}

Tailwind के अनुकूल कस्टम स्केल बनाना

शेड जेनरेटर किसी एकल इनपुट hex कोड से पूर्ण 50-950 स्केल उत्पन्न करता है:

1. hex को OKLCH में बदलता है
2. 11 चरणों में से प्रत्येक के लिए चमक लक्ष्य की गणना करता है
3. क्रोमा उचित रूप से समायोजित करता है
4. Tailwind config में पेस्ट करने के लिए तैयार sRGB hex मान आउटपुट करता है

डार्क मोड के लिए Tailwind रंग का उपयोग करना

<div class="bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-slate-100">
  <button class="bg-blue-600 dark:bg-blue-400 text-white dark:text-slate-900">
    क्रिया
  </button>
</div>

मुख्य बिंदु

• Tailwind CSS 22 रंग परिवारों के साथ आता है, प्रत्येक में 50 से 950 तक 11 शेड होते हैं, जो अनुभवात्मक चमक विश्लेषण और मानव क्यूरेशन के माध्यम से उत्पन्न होते हैं।
• 500 चरण प्रत्येक रंग परिवार के लिए विहित "शुद्ध" शेड है।
• Tailwind v4 CSS-फर्स्ट कॉन्फिगरेशन में @theme के साथ जाता है, सभी रंगों को CSS कस्टम प्रॉपर्टी के रूप में उजागर करता है।
• शेड जेनरेटर किसी भी इनपुट hex कोड से Tailwind-संगत 50-950 स्केल उत्पन्न करता है।
• डार्क मोड के लिए, शेड नंबर को उलटें (50 ↔ 900) न कि वर्ण।