कलर पैलेट और ग्रेडिएंट जनरेटर
मेल खाते कलर पैलेट और ग्रेडिएंट बनाएं, फिर CSS कॉपी करें या इमेज सेव करें
टूल लोड हो रहा है…
एक मुख्य रंग से कलर स्कीम बनाता है, रैंडम पैलेट बनाता है, और ग्रेडिएंट बनाता है जिन्हें CSS के रूप में कॉपी किया जा सकता है या PNG इमेज के रूप में सेव किया जा सकता है। किसी डिज़ाइन, प्रेज़ेंटेशन या वेब पेज के लिए रंग चुनने के लिए इसका इस्तेमाल करें।
इस्तेमाल का तरीका
- "पैलेट" पर कोई "मुख्य रंग" चुनें और एक "योजना" चुनें। पसंद आए तो "यह योजना पैलेट के रूप में इस्तेमाल करें" दबाएं।
- नए रंगों के लिए "बनाएं (Space)" दबाएं; जो रंग रखने हैं उन्हें लॉक करें और फिर से बनाएं।
- "HEX लिस्ट कॉपी करें", "CSS वेरिएबल कॉपी करें" या "इमेज के रूप में सेव करें" से रंग ले जाएं, और बाद के लिए पैलेट रखने हेतु "पैलेट रखें" दबाएं।
- "ग्रेडिएंट" पर "प्रकार", "कोण" और "कलर स्टॉप" सेट करें, फिर CSS कोड कॉपी करें या "PNG सेव करें" दबाएं।
यह कैसे काम करता है
- योजनाएं HSL कलर व्हील पर ह्यू को घुमाती हैं: पूरक 180°, सदृश ±30°, त्रिकोणीय 120°, स्प्लिट पूरक 150° और 210°, स्क्वायर 90° के अंतर पर।
- कंट्रास्ट ग्रेड WCAG 2.2 के अनुसार हैं: AA के लिए 4.5:1, AAA के लिए 7:1, और बड़े टेक्स्ट के लिए 3:1 चाहिए।
- "रंग दृष्टि सिमुलेशन" Machado et al. (2009) पर आधारित एक अनुमान है। यह सिर्फ़ स्क्रीन पर रंग बदलता है, कॉपी या सेव किए गए मान नहीं।
- 40 तक रखे गए पैलेट इसी डिवाइस के इस ब्राउज़र में सेव रहते हैं।
अक्सर पूछे जाने वाले सवाल
- पूरक (कॉम्प्लिमेंटरी) रंग कैसे पता करें?
- यह कलर व्हील पर ठीक सामने वाला रंग है, 180° दूर। उसे देखने के लिए "योजना" को "पूरक (कॉम्प्लिमेंटरी)" पर सेट करें, और उसका HEX मान कॉपी करने के लिए रंग के नमूने पर टैप करें।
- CSS ग्रेडिएंट कैसे बनाएं?
- "ग्रेडिएंट" पर स्टॉप जोड़ने के लिए पट्टी पर टैप करें और उनके रंग और जगह सेट करें। CSS बॉक्स कोड दिखाता है, जो कॉपी के लिए तैयार है।
- मेरे ग्रेडिएंट के बीच के रंग फीके क्यों दिखते हैं?
- "इंटरपोलेशन स्पेस" को OKLCH पर सेट करें। बीच के रंग ज़्यादा चटख रहते हैं, और CSS में पुराने ब्राउज़र के लिए एक फ़ॉलबैक लाइन भी जुड़ जाती है।
- कैसे पता करें कि इस रंग पर टेक्स्ट पढ़ने लायक होगा?
- हर रंग ज़्यादा पढ़ने लायक टेक्स्ट रंग, सफ़ेद या काला, का कंट्रास्ट अनुपात और ग्रेड दिखाता है। अनुपात (L1 + 0.05) ÷ (L2 + 0.05) है, जहां L1 और L2 हल्के और गहरे रंग की सापेक्ष ल्यूमिनेंस हैं।