Tailwind CSS कलर: v4 का OKLCH पैलेट, कस्टम कलर और शेड

Tailwind कलर पैलेट की बनावट

Tailwind v4.3 के डिफ़ॉल्ट पैलेट में 26 नाम वाले स्केल हैं। सत्रह रंगीन हैं: red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink और rose। नौ न्यूट्रल हैं: v3 से आए slate, gray, zinc, neutral और stone, और v4 के दौरान जोड़े गए mauve, olive, mist और taupe। इनके ऊपर black और white भी हैं।

हर स्केल में वही 11 स्टेप हैं: 50, 100, 200 से 900 तक, और 950। 50 लगभग सफ़ेद है, 950 लगभग काला। क्लास में यूटिलिटी, रंग और स्टेप होते हैं: bg-blue-500, text-rose-700, border-zinc-200।

स्टेप नंबर स्केल में जगह बताता है, लाइटनेस का मान नहीं। स्टेप 500 की OKLCH लाइटनेस gray में 55.1% से लेकर yellow में 79.5% तक है, इसीलिए टेक्स्ट कलर के रूप में yellow-500 और blue-500 बहुत अलग बर्ताव करते हैं।

Tailwind blue: हर शेड OKLCH, hex और कंट्रास्ट के साथ

यह पूरा blue स्केल है, जैसा Tailwind v4 इसे परिभाषित करता है। hex कॉलम सबसे क़रीबी sRGB रंग है, जो लाइटनेस और ह्यू रखकर क्रोमा घटाने से मिलता है। कंट्रास्ट अनुपात उसी hex पर मापे गए WCAG 2 मान हैं।

blue-600 पहला स्टेप है जो सफ़ेद पर बॉडी टेक्स्ट के लिए 4.5:1 पास करता है। blue-500 काले पर 5.58:1 के साथ पास होता है, लेकिन सफ़ेद पर 3.76:1 के साथ फ़ेल। कोई भी blue स्टेप दोनों पर 4.5:1 पास नहीं करता, इसलिए लाइट और डार्क थीम को अलग-अलग स्टेप चाहिए।

कौन से Tailwind शेड सफ़ेद पर WCAG AA पास करते हैं

सबसे हल्का पास होने वाला स्टेप ह्यू पर निर्भर करता है। orange, amber, yellow, lime और green, teal, cyan व sky वाले रंग 500 पर भी हल्के रहते हैं, इसलिए बॉडी टेक्स्ट के लिए इन्हें 700 चाहिए। red, blue, violet, purple, fuchsia, pink और rose 600 पर पास होते हैं, indigo तो 500 पर ही। yellow सबसे अलग है: yellow-600 भी 2.93:1 के साथ बड़े टेक्स्ट के लिए फ़ेल होता है।

स्टेप नंबर से बेहतर अंदाज़ा लाइटनेस से लगता है। सभी 286 रंगों में, 58% से कम OKLCH लाइटनेस वाला हर शेड सफ़ेद पर 4.5:1 पास करता है, और 59.2% से ऊपर वाला हर शेड फ़ेल। क्लास के मान में L पढ़ लीजिए, टेस्ट से पहले ही जवाब पता चल जाएगा।

olive को छोड़कर सभी न्यूट्रल 500 पर पास होते हैं। olive-500 की लाइटनेस 58% है, ह्यू में पीलापन है और यह सिर्फ़ 4.25:1 तक पहुँचता है, इसलिए gray-500 और olive-500 का टेक्स्ट एक-दूसरे की जगह नहीं ले सकता।

Tailwind v3 बनाम v4 कलर

v3 में रंग tailwind.config.js में theme.extend.colors के अंदर hex मानों के रूप में लिखे जाते थे। v4 कॉन्फ़िगरेशन को CSS में ले आता है: रंग @theme के अंदर थीम वेरिएबल हैं, OKLCH में लिखे जाते हैं और CSS वेरिएबल के रूप में उपलब्ध होते हैं, इसलिए var(--color-blue-500) सादे CSS और इनलाइन स्टाइल में भी काम करता है।

पैलेट को नए सिरे से नहीं बनाया गया, बस ट्यून किया गया। OKLCH में बदलने पर v3 का blue-500 (#3b82f6) और v4 का blue-500 बिल्कुल एक जैसी लाइटनेस और ह्यू रखते हैं। सिर्फ़ क्रोमा बढ़ा, 0.188 से 0.214। बाक़ी blue स्केल भी यही पैटर्न मानता है, सिवाय blue-400 के, जो 0.7 पॉइंट गहरा भी हुआ। कंट्रास्ट लगभग नहीं बदलता, जबकि रंग ज़्यादा चटक दिखते हैं।

यह अतिरिक्त क्रोमा sRGB से बाहर तक जाता है। v4 के 286 में से 94 रंग sRGB से बाहर और Display P3 के अंदर हैं, और ये सभी रंगीन हैं। orange के 11 में से 9 स्टेप बाहर हैं, blue के 4 (200 से 500)। P3 स्क्रीन पर आपको पूरा रंग दिखता है, sRGB स्क्रीन पर ब्राउज़र पास का कोई रंग दिखाता है। v4 का लक्ष्य Safari 16.4, Chrome 111 और Firefox 128 या नए ब्राउज़र हैं, जो सभी oklch() समझते हैं।

@theme {
    --color-blue-500: oklch(62.3% 0.214 259.815);
}

.card {
    border-color: var(--color-blue-500);
}

Tailwind v4 में कस्टम कलर कैसे जोड़ें

@theme के अंदर --color- नेमस्पेस में एक वेरिएबल बनाएँ। --color- के बाद वाला हिस्सा क्लास का नाम बन जाता है, इसलिए --color-brand से आपको bg-brand, text-brand, border-brand, ring-brand और बाक़ी सभी कलर यूटिलिटी मिलती हैं, साथ ही CSS में var(--color-brand) भी। Hex, rgb(), hsl() और oklch() सभी चलते हैं।

डिफ़ॉल्ट पैलेट को बढ़ाने के बजाय पूरी तरह बदलना हो, तो पहले --color-*: initial से नेमस्पेस रीसेट करें, फिर सिर्फ़ वही रंग परिभाषित करें जो चाहिए। यूटिलिटी सिर्फ़ उन्हीं क्लास के लिए बनती हैं जो आप सच में इस्तेमाल करते हैं, इसलिए ज़्यादातर प्रोजेक्ट डिफ़ॉल्ट रंग रहने देते हैं।

@import 'tailwindcss';

@theme {
    --color-brand: #e4572e;
    --color-ink: oklch(21% 0.02 260);
}

एक एक्सेंट के लिए अकेला --color-brand काफ़ी है। जैसे ही hover स्टेट, हल्के रंगे बैकग्राउंड या डार्क मोड की ज़रूरत हो, नंबर वाले स्टेप के साथ पूरा स्केल परिभाषित करें।

50 से 950 तक का पूरा कस्टम स्केल कैसे बनाएँ

नीचे का स्केल #e4572e से बनाया गया है। इसकी लाइटनेस 63.7% है, जो स्टेप 500 से मेल खाती है, इसलिए ब्रांड कलर ठीक 500 पर रहता है। बाक़ी स्टेप Tailwind के लाइटनेस कर्व पर चलते हैं और ह्यू वही रहता है, क्रोमा 500 और 600 पर सबसे ज़्यादा होता है और दोनों सिरों की ओर घटता है। सभी स्टेप sRGB के अंदर हैं, इसलिए hex मान बिल्कुल सटीक हैं।

Tailwind के अपने गर्म ह्यू की तरह, इस स्केल को भी सफ़ेद पर बॉडी टेक्स्ट के लिए 600 चाहिए। brand-500 से 3.68:1 मिलता है, जो सिर्फ़ बड़े टेक्स्ट और आइकन के लिए काफ़ी है।

@theme {
    --color-brand-50: oklch(97% 0.01103 36.478);
    --color-brand-100: oklch(93.477% 0.02574 36.478);
    --color-brand-200: oklch(88.485% 0.04964 36.478);
    --color-brand-300: oklch(81.145% 0.08641 36.478);
    --color-brand-400: oklch(71.064% 0.14524 36.478);
    --color-brand-500: oklch(63.723% 0.18385 36.478);
    --color-brand-600: oklch(56.583% 0.19167 36.478);
    --color-brand-700: oklch(49.952% 0.16921 36.478);
    --color-brand-800: oklch(43.729% 0.14814 36.478);
    --color-brand-900: oklch(38.935% 0.11766 36.478);
    --color-brand-950: oklch(27% 0.07538 36.478);
}

पेस्ट करते समय पूरी सटीकता रखें। लाइटनेस को 0.1% और क्रोमा को तीन दशमलव तक राउंड करने से brand-600 sRGB से ज़रा बाहर चला जाता है। इससे कोई नुक़सान नहीं, बस वह hex से बिल्कुल मेल नहीं खाता।

bg-blue-500/50 जैसे ओपैसिटी मॉडिफ़ायर कैसे काम करते हैं

रंग के बाद स्लैश उसका अल्फ़ा तय करता है: bg-blue-500/50 का मतलब 50% पर blue-500। v3 इसे rgb(59 130 246 / 0.5) में कंपाइल करता था, जो सिर्फ़ उन रंगों के लिए काम करता था जिन्हें Tailwind चैनलों में बाँट सकता था। CSS वेरिएबल के रूप में परिभाषित कस्टम रंगों के लिए ख़ास rgb(var(--brand) / <alpha-value>) फ़ॉर्मैट चाहिए होता था।

v4 मॉडिफ़ायर को Oklab में color-mix() में कंपाइल करता है, जो रंग को transparent के साथ मिलाता है। यह किसी भी रंग के साथ काम करता है: थीम वेरिएबल, bg-[#e4572e]/50 जैसे मनमाने मान और आपके अपने CSS वेरिएबल।

ओपैसिटी कंट्रास्ट बदल देती है। सफ़ेद पर blue-500/50 #95bfff जैसा दिखता है और blue-500/10 #eaf2ff जैसा। blue-600 का टेक्स्ट 5.25:1 पर पढ़ा जाता है, लेकिन text-blue-600/60 गिरकर 2.62:1 पर आ जाता है और बड़े टेक्स्ट के लिए भी फ़ेल होता है।

• blue-500#2b7fff
• सफ़ेद पर blue-500/50#95bfff
• सफ़ेद पर blue-500/20#d5e5ff
• सफ़ेद पर blue-500/10#eaf2ff

.bg-blue-500\/50 {
    background-color: color-mix(in oklab, var(--color-blue-500) 50%, transparent);
}

किसी भी hex के लिए सबसे क़रीबी Tailwind क्लास कैसे खोजें

hex की तुलना सभी 286 शेड से Oklab में परसेप्चुअल दूरी (ΔEOK) से करें। लगभग 0.02 से कम पर पास-पास रखने पर भी फ़र्क़ मुश्किल से दिखता है, इसलिए Tailwind क्लास आपके रंग की जगह ले सकती है। लगभग 0.04 से ऊपर हो, तो कस्टम कलर जोड़ें।

टेबल में असली मिलान हैं। पुराने v3 hex मान उसी v4 क्लास पर लौट आते हैं, जबकि #ff5733 जैसा आम ब्रांड नारंगी orange-600 और red-400 के बीच आता है। PickShade का Tailwind पेज किसी भी रंग के लिए यह खोज करता है और तीन सबसे क़रीबी क्लास दिखाता है।

सवाल और जवाब