कलर शेड्स जेनरेटर

एक रंग को Tailwind-शैली 50–950 स्केल तथा tints, shades और tones में बदलें। OKLCH और sRGB में गणना, CSS variables, Tailwind या JSON में एक्सपोर्ट।

शेड सेटिंग्स

मूल रंग

#3b82f6rgb(59 130 246)hsl(217 91% 60%)oklch(62.3% 0.188 259.8)

टिंट / शेड / टोन के चरण

एक्सपोर्ट

फ़ॉर्मैट

टोकन नाम

50–950 स्केल आपके रंग को 500 पर रखता है और बाकी चरणों के लिए OKLCH लाइटनेस व क्रोमा बदलता है, ह्यू वही रहता है।

50–950 स्केल

#eef5ff

oklch(96.8% 0.015 257.2)

#e1edff

oklch(94.3% 0.028 258.4)

#c9deff

oklch(89.6% 0.051 259.4)

#a3c6ff

oklch(82.2% 0.089 260)

#73a8ff

oklch(73.2% 0.139 259.9)

#3b82f6

oklch(62.3% 0.188 259.8)

#266ad8

oklch(54.6% 0.182 259.9)

#1554b8

oklch(47% 0.17 260)

#074095

oklch(39.5% 0.15 259.7)

#002d72

oklch(32% 0.128 259.6)

#012156

oklch(26.5% 0.103 259.7)

टिंट, शेड और टोन

टिंट (सफ़ेद के साथ मिश्रित)

शेड (काले के साथ मिश्रित)

टोन (ग्रे #808080 के साथ मिश्रित)

color-mix(in srgb, …) की तरह sRGB में बराबर चरणों में मिलाया गया; कॉपी करने के लिए रंग पर क्लिक करें।

एक्सपोर्ट कोड

:root {
  --brand-50: #eef5ff;
  --brand-100: #e1edff;
  --brand-200: #c9deff;
  --brand-300: #a3c6ff;
  --brand-400: #73a8ff;
  --brand-500: #3b82f6;
  --brand-600: #266ad8;
  --brand-700: #1554b8;
  --brand-800: #074095;
  --brand-900: #002d72;
  --brand-950: #012156;
}

कलर शेड्स जेनरेटर क्या है?

यह एक रंग को Tailwind के पैलेट जैसे 11-चरण 50–950 स्केल में, और tints (सफ़ेद के साथ मिश्रित), shades (काले के साथ) और tones (ग्रे के साथ) की पंक्तियों में फैलाता है। सभी मान अलग-अलग कॉपी किए जा सकते हैं या CSS variables, SCSS, Tailwind v3/v4 या JSON के रूप में एक्सपोर्ट हो सकते हैं।

कलर शेड्स जेनरेटर का उपयोग कैसे करें

Base color डालें।
50–950 स्केल देखें; आपका रंग चरण 500 है।
मिक्स पंक्तियों के लिए Tint / shade / tone steps की संख्या सेट करें।
किसी भी स्वैच पर क्लिक करके उसे कॉपी करें।
एक्सपोर्ट Format और Token name चुनें और स्केल कॉपी करें।

उदाहरण

इनपुट

#3b82f6, CSS variables, token name brand

आउटपुट

:root {
  --brand-50: #eef5ff;
  --brand-100: #e1edff;
  --brand-200: #c9deff;
  --brand-300: #a3c6ff;
  --brand-400: #73a8ff;
  --brand-500: #3b82f6;
  --brand-600: #266ad8;
  --brand-700: #1554b8;
  --brand-800: #074095;
  --brand-900: #002d72;
  --brand-950: #012156;
}

कलर शेड्स जेनरेटर का उपयोग कब करें

इसे एक ब्रांड रंग से डिज़ाइन सिस्टम या Tailwind थीम की पूरी कलर रैंप बनाने, या hover/active वेरिएंट पाने के लिए इस्तेमाल करें। स्केल एक समझदार एल्गोरिदमिक शुरुआत है; प्रोडक्शन डिज़ाइन सिस्टम में आप अलग-अलग चरण ट्यून कर सकते हैं और टेक्स्ट उपयोग के लिए कंट्रास्ट जाँच सकते हैं।

कलर शेड्स जेनरेटर कैसे काम करता है

स्केल के लिए बेस रंग को OKLCH में बदला जाता है और 500 पर अपरिवर्तित रखा जाता है। हल्के चरण लाइटनेस को 0.985 की ओर एक तय अंश (50–400 के लिए 95%, 88%, 75%, 55%, 30%) तक ले जाते हैं और क्रोमा घटाते हैं; गहरे चरण 0.2 की ओर (600–950 के लिए 18%–85%) थोड़े घटे क्रोमा के साथ जाते हैं। ह्यू बना रहता है और हर चरण sRGB में gamut-map होता है। Tints, shades और tones gamma-एन्कोडेड sRGB में मिश्रण हैं, color-mix(in srgb, …) की तरह, 1/(n+1) के समान चरणों पर।