डिज़ाइन / रंग

Tailwind रंग स्केल जनरेटर

एक ब्रांड रंग को 50 से 950 तक के पूरे Tailwind CSS पैलेट में बदलें। यह Tailwind के अपने रंगों की तरह OKLCH में बना है और इसे Tailwind 4 थीम CSS, Tailwind 3 config या CSS वेरिएबल के रूप में कॉपी करें।

Tailwind रंग स्केल जनरेटर: हर शेड में उस चरण पर Tailwind के अपने पैलेट में मौजूद lightness, chroma और हल्के hue बदलाव को अपनाया जाता है। इन्हें OKLCH रंग-स्थान में मापा जाता है और इस तरह बदला जाता है कि आपका रंग अपने शेड पर बिल्कुल सही बैठे। ग्रे रंग इसके बजाय Tailwind के ग्रे परिवारों का अनुसरण करते हैं। sRGB gamut में दिखाई न देने वाले रंगों को CSS Color 4 की gamut-mapping विधि से बदला जाता है, जैसा ब्राउज़र करते हैं। Tailwind 4 आउटपुट में OKLCH मान रहते हैं, जबकि अन्य फ़ॉर्मैट hex का उपयोग करते हैं। यह आपके ब्राउज़र में 100% स्थानीय रूप से चलता है और सर्वर पर कोई फ़ाइल अपलोड नहीं होती।

श्रेणी
रोज़मर्रा के टूल्स
रन
आपके ब्राउज़र में
लागत
मुफ़्त · साइन अप की ज़रूरत नहीं
उपलब्धता
इस्तेमाल के लिए तैयार
Tailwind रंग स्केल जनरेटरलोकल प्रोसेसिंग

पूरी तरह आपके ब्राउज़र में चलता है

50#f2f8ffoklch(97.6% 0.012 250.3)
100#dfecffoklch(93.9% 0.029 258.1)
200#bcd9ffoklch(87.6% 0.061 255.8)
300#8fbeffoklch(79.3% 0.106 256.6)
400#5e9cffoklch(69.6% 0.16 259.5)
500#3b82f6oklch(62.3% 0.188 259.8)
600#2668daoklch(54.2% 0.187 260.6)
700#1f57b6oklch(47.7% 0.163 260.6)
800#1f4997oklch(42.3% 0.137 261.4)
900#20417coklch(38.4% 0.109 261.4)
950#15274coklch(27.9% 0.073 263.2)

CSS (@theme)

@theme {
  --color-brand-50: oklch(97.6% 0.012 250.3);
  --color-brand-100: oklch(93.9% 0.029 258.1);
  --color-brand-200: oklch(87.6% 0.061 255.8);
  --color-brand-300: oklch(79.3% 0.106 256.6);
  --color-brand-400: oklch(69.6% 0.16 259.5);
  --color-brand-500: oklch(62.3% 0.188 259.8);
  --color-brand-600: oklch(54.2% 0.187 260.6);
  --color-brand-700: oklch(47.7% 0.163 260.6);
  --color-brand-800: oklch(42.3% 0.137 261.4);
  --color-brand-900: oklch(38.4% 0.109 261.4);
  --color-brand-950: oklch(27.9% 0.073 263.2);
}

छायाएँ Tailwind के अपने पैलेट में मौजूद हल्केपन, क्रोमा और ह्यू के बदलाव का अनुसरण करती हैं, जिन्हें OKLCH में मापा गया है। इसलिए Tailwind के blue-500 से बनाया गया स्केल, Tailwind के blue से केवल कुछ barely noticeable अंतर के भीतर रहता है। sRGB सीमा से बाहर के रंगों को CSS Color 4 gamut-mapping विधि से सीमा के अंदर लाया जाता है।

स्केल का इस्तेमाल

एक सामान्य पैटर्न में पेज और कार्ड की पृष्ठभूमि के लिए 50–100, बॉर्डर के लिए 200–300, बटन और लिंक के लिए 500–600, hover states के लिए 700 और हल्की पृष्ठभूमि पर टेक्स्ट के लिए 800–950 इस्तेमाल होते हैं। colour contrast checker से टेक्स्ट और पृष्ठभूमि के जोड़ों की जाँच करें।

किसी एक रंग को hex, RGB, HSL और OKLCH के बीच बदलने के लिए colour converter इस्तेमाल करें; फ़ोटो से शुरू करने के लिए colour palette extractor इस्तेमाल करें।

Tailwind 4 और OKLCH

Tailwind CSS 4 अपने रंगों को OKLCH में परिभाषित करता है, जो wide-gamut स्क्रीन पर sRGB से आगे के रंगों का वर्णन कर सकता है। यहाँ Tailwind 4 का आउटपुट sRGB के अंदर रहता है, इसलिए रंग हर स्क्रीन पर एक जैसे दिखते हैं।

इस्तेमाल करने का तरीका

  1. अपना रंग चुनें या उसका hex कोड पेस्ट करें।
  2. चुनें कि वह किस शेड का होना चाहिए, आमतौर पर 500, या जनरेटर को उसे अपने-आप रखने दें।
  3. Tailwind 4, Tailwind 3 या साधारण CSS वेरिएबल के लिए कोड कॉपी करें।

गोपनीयता और सीमाएँ

सब कुछ आपके ब्राउज़र में जनरेट होता है।

संबंधित टूल्स

रंग कन्वर्टरकंट्रास्ट चेकरपैलेट एक्सट्रैक्टर

अक्सर पूछे जाने वाले सवाल

OKLCH क्यों?

OKLCH lightness में समान चरण आंखों को हर hue में समान अंतर जैसे दिखाई देते हैं। इसलिए इसी तरीके से बनाई गई पीली और नीली स्केल में contrast एक जैसा रहता है, जो HSL में संभव नहीं होता।

मेरा ब्रांड रंग किस शेड का होना चाहिए?

आमतौर पर 500 या 600, जहां Tailwind अपने सबसे गहरे और प्रभावी रंग रखता है। बहुत हल्का रंग, जैसे pastel, 200 या 300 पर बेहतर बैठता है; उसकी lightness के आधार पर रखने के लिए Automatic चुनें।

क्या इन शेड्स पर टेक्स्ट पढ़ने योग्य रहेगा?

आमतौर पर सफेद टेक्स्ट के लिए 600 या उससे गहरा शेड और गहरे टेक्स्ट के लिए 400 या उससे हल्का शेड चाहिए। फिर भी हर जोड़ी को contrast checker से जांचें।

मुफ़्त टूल · आपके ब्राउज़र में बार चलता है · अकाउंट की ज़रूरत नहीं