HedgieTools

पैलेट जनरेटर

अपने मुख्य रंग से शुरू करें और पूरा इंटरफ़ेस पैलेट पाएँ: द्वितीयक, तृतीयक, सफलता, चेतावनी, ख़तरा और तटस्थ रंग, साथ में उनके शेड्स और कंट्रास्ट जाँच।

आपका मुख्य रंग

कोई वैल्यू लिखें या रंग चुनें: बाक़ी पैलेट उसी के आधार पर बनता है।

द्वितीयक और तृतीयक
वैल्यू फ़ॉर्मेट

कोई HEX वैल्यू लिखें, जैसे #2563EB, या रंग चुनने के लिए चौकोर पर क्लिक करें।

आपका पैलेट

किसी वैल्यू या शेड (50 से 950) को कॉपी करने के लिए उस पर क्लिक करें। पेंसिल से सुझाए गए रंग की जगह अपना रंग रखें: मुख्य रंग बदलने पर भी वह नहीं बदलता।

  • —

    प्राथमिक

    आपका रंग
  • —

    द्वितीयक

    पूरक
  • —

    तृतीयक

    लगभग पूरक
  • —

    जानकारी

    नीला
  • —

    सफलता

    हरा
  • —

    चेतावनी

    नारंगी
  • —

    ख़तरा

    लाल
  • —

    तटस्थ

    हल्की रंगत वाला ग्रे

लाइट और डार्क टोकन

आपके इंटरफ़ेस में इस्तेमाल होने वाले रंग, लाइट और डार्क थीम के लिए तैयार। हर एक पैलेट के किसी शेड की ओर इशारा करता है। कॉपी करने के लिए क्लिक करें।

  • --backgroundपेज का बैकग्राउंड
  • --surfaceकार्ड और पैनल
  • --surface-mutedद्वितीयक हिस्से
  • --borderबॉर्डर और विभाजक
  • --textमुख्य टेक्स्ट
  • --text-mutedद्वितीयक टेक्स्ट
  • --primaryबटन और लिंक
  • --primary-hoverहोवर स्थिति
  • --on-primaryप्राथमिक रंग पर टेक्स्ट
  • --focus-ringफ़ोकस आउटलाइन
  • --secondaryद्वितीयक एक्सेंट
  • --tertiaryतृतीयक एक्सेंट
  • --infoजानकारी
  • --info-softजानकारी का बैकग्राउंड
  • --successसफलता
  • --success-softसफलता का बैकग्राउंड
  • --warningचेतावनी
  • --warning-softचेतावनी का बैकग्राउंड
  • --dangerख़तरा, त्रुटि
  • --danger-softत्रुटि का बैकग्राउंड

मेल खाते रंग

आपके मुख्य रंग के इर्द-गिर्द क्लासिक रंग-संयोजन, इलस्ट्रेशन, चार्ट या एक्सेंट के लिए।

  • पूरक

    विपरीत रंग

  • विभाजित पूरक

    विपरीत रंग से ज़्यादा सौम्य

  • अनुरूप

    आस-पास के रंग

  • त्रिकोणीय

    तीन संतुलित रंग

  • चतुष्कोणीय

    वर्ग बनाते चार रंग

  • एकरंगी

    एक ही रंगत, कई गहराइयाँ

प्रीव्यू और कंट्रास्ट

कुछ इंटरफ़ेस एलिमेंट पर लागू पैलेट, और WCAG नियमों के अनुसार हर जोड़ी कितनी पठनीय है।

प्रीव्यू थीम
पेज का शीर्षकद्वितीयक टेक्स्ट, कम ज़रूरी, शीर्षक के नीचे।
एक कार्ड, जिसमें एक लिंक और बटन हैं।
प्राथमिकद्वितीयकतृतीयक
जानकारी · एक अपडेट उपलब्ध है।
सफलता · आपके बदलाव सेव हो गए हैं।
चेतावनी · आपकी सदस्यता जल्द ख़त्म हो रही है।
त्रुटि · भुगतान विफल रहा।
  • बैकग्राउंड पर टेक्स्ट
    अनुपात—सामान्य टेक्स्ट—बड़ा टेक्स्ट—AAA—
  • बैकग्राउंड पर द्वितीयक टेक्स्ट
    अनुपात—सामान्य टेक्स्ट—बड़ा टेक्स्ट—AAA—
  • बैकग्राउंड पर लिंक
    अनुपात—सामान्य टेक्स्ट—बड़ा टेक्स्ट—AAA—
  • प्राथमिक बटन
    अनुपात—सामान्य टेक्स्ट—बड़ा टेक्स्ट—AAA—
  • द्वितीयक बटन
    अनुपात—सामान्य टेक्स्ट—बड़ा टेक्स्ट—AAA—
  • बैकग्राउंड पर तृतीयक टेक्स्ट
    अनुपात—सामान्य टेक्स्ट—बड़ा टेक्स्ट—AAA—
  • जानकारी अलर्ट
    अनुपात—सामान्य टेक्स्ट—बड़ा टेक्स्ट—AAA—
  • सफलता अलर्ट
    अनुपात—सामान्य टेक्स्ट—बड़ा टेक्स्ट—AAA—
  • चेतावनी अलर्ट
    अनुपात—सामान्य टेक्स्ट—बड़ा टेक्स्ट—AAA—
  • ख़तरा अलर्ट
    अनुपात—सामान्य टेक्स्ट—बड़ा टेक्स्ट—AAA—

एक्सपोर्ट

ऊपर चुने गए फ़ॉर्मेट (HEX) में पैलेट पाएँ।

कोड बनाने के लिए कोई मुख्य रंग डालें।

पैलेट के लिए CSS वेरिएबल (--color-primary-500…)। टोकन इन्हीं वेरिएबल की ओर इशारा करते हैं; डार्क थीम चालू करने के लिए html एलिमेंट पर data-theme="dark" लगाएँ।

पैलेट जनरेटर के बारे में

अपने ब्रांड का मुख्य रंग चुनें और उसके इर्द-गिर्द वह सब पाएँ जो एक इंटरफ़ेस को चाहिए: साथी रंग, स्थिति के रंग, तटस्थ रंग, शेड्स, लाइट और डार्क टोकन, कंट्रास्ट जाँच और पेस्ट करने लायक कोड, वह भी ब्राउज़र छोड़े बिना।

एक रंग से पूरा पैलेट

यह टूल आपके मुख्य रंग से एक द्वितीयक और एक तृतीयक रंग बनाता है, उसकी शैली से मेल खाते स्थिति के रंग (जानकारी, सफलता, चेतावनी, ख़तरा), और बैकग्राउंड व टेक्स्ट के लिए हल्की रंगत वाले ग्रे रंग।

इस्तेमाल के लिए तैयार शेड्स

हर रंग ग्यारह शेड्स में आता है, सबसे हल्के (50) से सबसे गहरे (950) तक, बैकग्राउंड, बॉर्डर, होवर स्थिति और टेक्स्ट के लिए। अगर कोई सुझाया गया रंग आपको पसंद न आए, तो उसकी जगह अपना रंग रखें: उसके शेड्स भी साथ बदल जाते हैं।

लाइट और डार्क टोकन

बैकग्राउंड, सरफ़ेस, बॉर्डर, टेक्स्ट, होवर, फ़ोकस और अलर्ट बैकग्राउंड: इस्तेमाल होने वाला हर रंग पैलेट के किसी शेड की ओर इशारा करता है, लाइट थीम के लिए एक वैल्यू और डार्क थीम के लिए एक।

जाँचा हुआ कंट्रास्ट

टेक्स्ट और बैकग्राउंड की हर जोड़ी को WCAG नियमों पर परखा जाता है: सामान्य टेक्स्ट के लिए 4.5:1, बड़े टेक्स्ट के लिए 3:1 और AAA स्तर के लिए 7:1।

CSS, Tailwind, JSON में एक्सपोर्ट

हर वैल्यू HEX, RGB, HSL या OKLCH में कॉपी करें, या CSS वेरिएबल फ़ाइल, Tailwind v4 थीम, Tailwind v3 कॉन्फ़िग, JSON या सादी सूची डाउनलोड करें। सब कुछ आपके ब्राउज़र में होता है: कुछ भी भेजा या सेव नहीं किया जाता।

मिलते-जुलते टूल