Tailwind Color जेनरेटर

एक ब्रांड रंग को OKLCH में एक पूर्ण 50-950 Tailwind शेड स्केल में बदलें, प्रति-शेड WCAG कंट्रास्ट के साथ, ठीक आपके ब्राउज़र में।

Tailwind Color जेनरेटर पूरी तरह आपके ब्राउज़र में चलता है। आपके द्वारा दर्ज किया गया ब्रांड रंग और जेनरेट किए गए शेड आपके डिवाइस पर गणना होते हैं और कभी ArrayKit पर अपलोड नहीं होते।

CSS Color Converter खोलें

Tailwind Color जेनरेटर के बारे में

Tailwind Color जेनरेटर एक एकल ब्रांड रंग को एक पूर्ण 50, 100, 200 … 900, 950 शेड स्केल में बदल देता है जिसे आप सीधे tailwind.config में डाल सकते हैं। HEX मानों का अनुमान लगाने के बजाय, यह OKLCH — एक अवधारणात्मक रूप से एक समान स्पेस — में lightness को इंटरपोलेट करता है, इसलिए हर चरण समान रूप से दूरी पर महसूस होता है, और यह आपके इनपुट को उसके निकटतम चरण पर स्नैप करता है ताकि पैलेट में वास्तव में आपका सटीक ब्रांड रंग शामिल हो। हर स्वैच अपना HEX दिखाता है साथ ही काले और सफ़ेद के विरुद्ध WCAG कंट्रास्ट अनुपात, ताकि आप एक नज़र में बता सकें कि कौन-से शेड टेक्स्ट के लिए सुरक्षित हैं। पूरे स्केल को एक theme.colors ब्लॉक के रूप में या CSS कस्टम प्रॉपर्टीज़ के रूप में कॉपी करें। कोई भी CSS रंग पेस्ट करें — HEX, rgb(), hsl(), या rebeccapurple जैसा नामित रंग। सब कुछ आपके डिवाइस पर गणना होता है; आपके द्वारा दर्ज किए गए रंग कभी ब्राउज़र से बाहर नहीं जाते।

विशेषताएँ

Tailwind Color जेनरेटर का उपयोग कैसे करें

  1. अपना ब्रांड रंग दर्ज या चुनें (HEX, rgb(), hsl(), या एक नाम)
  2. एक रंग नाम सेट करें — यह की बन जाता है, जैसे brand या accent
  3. टेक्स्ट-सुरक्षित चरणों को पहचानने के लिए प्रति-शेड WCAG कंट्रास्ट बैज पढ़ें
  4. tailwind.config और CSS वेरिएबल्स आउटपुट के बीच टॉगल करें
  5. ब्लॉक कॉपी करें, या उसका HEX पाने के लिए एक एकल स्वैच पर क्लिक करें

उदाहरण

इनपुट

#7c3aed  (name: brand)

आउटपुट

colors: { brand: { 50: '#faf5ff', 500: '#7c3aed', 950: '#2e1065' } }

एक वायलेट HEX brand के रूप में की किए गए एक OKLCH-दूरी वाले 50-950 स्केल में फैल जाता है।

सामान्य त्रुटियाँ और समस्या निवारण

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

Tailwind Color जेनरेटर 50-950 स्केल कैसे बनाता है?
यह आपके रंग को OKLCH में बदलता है, hue बनाए रखता है, ग्यारह Tailwind चरणों में lightness को रैंप करता है, और chroma को चरम सीमाओं की ओर कम करता है। OKLCH अवधारणात्मक रूप से एक समान है, इसलिए हर चरण समान रूप से दूरी पर दिखता है, बजाय इसके कि सादे HSL रैंप की तरह मध्य में एकत्रित हो।
मेरा ब्रांड रंग 500 के बजाय 400 या 600 पर क्यों आता है?
जेनरेटर आपके इनपुट को उस चरण पर स्नैप करता है जिसकी लक्ष्य lightness उसके सबसे करीब है और वहाँ आपका सटीक रंग संरक्षित करता है। एक हल्का ब्रांड रंग 300-400 के पास एंकर होता है और एक गहरा 600-700 के पास, इसलिए स्केल में हमेशा वही रंग होता है जो आपने टाइप किया।
हर स्वैच पर कंट्रास्ट संख्याओं का क्या मतलब है?
वे उस शेड के शुद्ध काले और शुद्ध सफ़ेद के विरुद्ध WCAG 2.x कंट्रास्ट अनुपात हैं। एक हरा बैज कम-से-कम 4.5:1 है (सामान्य टेक्स्ट के लिए AA) और एम्बर कम-से-कम 3:1 है (बड़े टेक्स्ट या UI के लिए AA)। टेक्स्ट और पृष्ठभूमि जोड़ियाँ चुनने के लिए उनका उपयोग करें।
क्या मैं HEX के बजाय rgb(), hsl(), या एक नामित रंग पेस्ट कर सकता हूँ?
हाँ। कोई भी CSS रंग स्ट्रिंग काम करती है — #7c3aed, rgb(124 58 237), hsl(262 83% 58%), या rebeccapurple जैसा एक नाम। टूल इसे पार्स करता है, OKLCH में बदलता है, और स्केल को उसी तरह बनाता है।
मैं आउटपुट को अपने प्रोजेक्ट में कैसे उपयोग करूँ?
tailwind.config ब्लॉक को theme.extend.colors में कॉपी करें और bg-brand-500 या text-brand-800 जैसी क्लासेज़ को संदर्भित करें। या CSS वेरिएबल्स संस्करण कॉपी करें और सादे CSS में कहीं भी var(--brand-500) का उपयोग करें। रंग नाम फ़ील्ड बदलकर की का नाम बदलें।
क्या मेरे द्वारा दर्ज किए गए रंग कहीं भेजे जाते हैं?
नहीं। पूरा स्केल — पार्सिंग, OKLCH गणित, कंट्रास्ट अनुपात, और दोनों आउटपुट फ़ॉर्मैट — आपके ब्राउज़र में गणना होते हैं। आपके द्वारा टाइप या चुना गया ब्रांड रंग कभी आपके डिवाइस से बाहर नहीं जाता और ArrayKit पर अपलोड नहीं होता।

संबंधित टूल

सभी ArrayKit टूल