सीधे कॉन्टेंट पर जाएं

कलर पैलेट और ग्रेडिएंट जनरेटर

मेल खाते कलर पैलेट और ग्रेडिएंट बनाएं, फिर CSS कॉपी करें या इमेज सेव करें

टूल लोड हो रहा है…

एक मुख्य रंग से कलर स्कीम बनाता है, रैंडम पैलेट बनाता है, और ग्रेडिएंट बनाता है जिन्हें CSS के रूप में कॉपी किया जा सकता है या PNG इमेज के रूप में सेव किया जा सकता है। किसी डिज़ाइन, प्रेज़ेंटेशन या वेब पेज के लिए रंग चुनने के लिए इसका इस्तेमाल करें।

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

  1. "पैलेट" पर कोई "मुख्य रंग" चुनें और एक "योजना" चुनें। पसंद आए तो "यह योजना पैलेट के रूप में इस्तेमाल करें" दबाएं।
  2. नए रंगों के लिए "बनाएं (Space)" दबाएं; जो रंग रखने हैं उन्हें लॉक करें और फिर से बनाएं।
  3. "HEX लिस्ट कॉपी करें", "CSS वेरिएबल कॉपी करें" या "इमेज के रूप में सेव करें" से रंग ले जाएं, और बाद के लिए पैलेट रखने हेतु "पैलेट रखें" दबाएं।
  4. "ग्रेडिएंट" पर "प्रकार", "कोण" और "कलर स्टॉप" सेट करें, फिर CSS कोड कॉपी करें या "PNG सेव करें" दबाएं।

यह कैसे काम करता है

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

पूरक (कॉम्प्लिमेंटरी) रंग कैसे पता करें?
यह कलर व्हील पर ठीक सामने वाला रंग है, 180° दूर। उसे देखने के लिए "योजना" को "पूरक (कॉम्प्लिमेंटरी)" पर सेट करें, और उसका HEX मान कॉपी करने के लिए रंग के नमूने पर टैप करें।
CSS ग्रेडिएंट कैसे बनाएं?
"ग्रेडिएंट" पर स्टॉप जोड़ने के लिए पट्टी पर टैप करें और उनके रंग और जगह सेट करें। CSS बॉक्स कोड दिखाता है, जो कॉपी के लिए तैयार है।
मेरे ग्रेडिएंट के बीच के रंग फीके क्यों दिखते हैं?
"इंटरपोलेशन स्पेस" को OKLCH पर सेट करें। बीच के रंग ज़्यादा चटख रहते हैं, और CSS में पुराने ब्राउज़र के लिए एक फ़ॉलबैक लाइन भी जुड़ जाती है।
कैसे पता करें कि इस रंग पर टेक्स्ट पढ़ने लायक होगा?
हर रंग ज़्यादा पढ़ने लायक टेक्स्ट रंग, सफ़ेद या काला, का कंट्रास्ट अनुपात और ग्रेड दिखाता है। अनुपात (L1 + 0.05) ÷ (L2 + 0.05) है, जहां L1 और L2 हल्के और गहरे रंग की सापेक्ष ल्यूमिनेंस हैं।