कलर स्कीम जनरेटर
एक बेस रंग अंदर — समझाने लायक स्कीम और उसकी लाइटनेस रैंप, एक ही स्क्रीन पर, कॉपी करने के लिए तैयार।
#RGB, #RRGGBB, rgb(), hsl() और अंग्रेज़ी CSS कलर नाम स्वीकार्य हैं। खाली = डिफ़ॉल्ट #4F46E5।
स्कीम
लाइटनेस रैंपबेस जैसा ही ह्यू और सैचुरेशन, लाइटनेस 88 / 70 / 52 / 34 / 18%
इसका उपयोग कैसे करें
- पेज खुलते ही डिफ़ॉल्ट बेस #4F46E5 से बनी स्कीम और लाइटनेस रैंप स्क्रीन पर मौजूद होती है — पहले नतीजे के लिए कोई क्लिक नहीं करना पड़ता।
- उसे अपना रंग बनाएँ: #4F46E5, rgb(79, 70, 229), hsl(243, 75%, 59%) या अंग्रेज़ी CSS कलर नाम पेस्ट करें, सिस्टम पिकर इस्तेमाल करें, या “रैंडम बेस” दबाएँ। टाइप करते ही सब कुछ दोबारा कंप्यूट होता है।
- चुनें कि ह्यू आपस में कैसे जुड़ें। एनालॉगस (0°, ±30°, ±60°) पड़ोस में ही रहता है; कम्प्लीमेंट्री (0°, 180°) सीधा विपरीत है; ट्राइआडिक (0°, 120°, 240°) और टेट्राडिक (0°, 90°, 180°, 270°) दायरा चौड़ा करते हैं; स्प्लिट-कम्प्लीमेंट्री (0°, 150°, 210°) टकराव के बिना तनाव बनाए रखता है। रैंप हमेशा बेस रंग ही होती है, लाइटनेस 88 / 70 / 52 / 34 / 18% पर, इसलिए “मेरे प्राइमरी का हल्का/गहरा संस्करण” एक टैप दूर है।
- किसी भी स्वॉच पर टैप करके चुने फ़ॉर्मैट में उसका मान कॉपी करें; “CSS कॉपी करें” पूरे सेट को :root कस्टम प्रॉपर्टीज़ के रूप में देता है, “मान कॉपी करें” प्रति पंक्ति एक मान देता है।
उदाहरण
सेटिंग्स
बेस #4F46E5 · नियम एनालॉगस · फ़ॉर्मैट HEX
नतीजा (हर डिवाइस पर एक जैसा)
स्कीम: #46DCE5 #468CE5 #4F46E5 #9F46E5 #E546DC रैंप: #CCC9F7 #7F79EC #3328E1 #1D1598 #0F0B50
“रैंडम पैलेट” टूल के विपरीत यह आउटपुट डिटर्मिनिस्टिक है: एक ही बेस रंग और नियम हर जगह एक जैसे मान देते हैं, इसलिए आप आकार जाँच सकते हैं — हर स्कीम रंग का सैचुरेशन और लाइटनेस बेस रंग जैसा होता है और सिर्फ़ ह्यू बदलता है (यहाँ 30° के स्टेप में), और रैंप के पाँचों रंग बेस का ह्यू और सैचुरेशन साझा करते हैं, लाइटनेस 88, 70, 52, 34 और 18% पर। हर स्वॉच पर छपा टेक्स्ट अपने आप काला या सफ़ेद होता है — जो उस रंग पर ज़्यादा स्पष्ट पढ़ा जाए।
दायरा, सीमाएँ और आम सवाल
- पाँच नियम, कोई कस्टम एंगल नहीं और कोई कलर व्हील नहीं: सटीक ह्यू चाहिए तो बेस रंग सेट करें या कलर कनवर्टर इस्तेमाल करें।
- रैंप फिक्स लाइटनेस स्टेप (88 / 70 / 52 / 34 / 18%) इस्तेमाल करती है, “आपके रंग से 25% सफ़ेद/काले की ओर पास” नहीं। इससे अलग-अलग बेस रंगों की सीढ़ी तुलना-योग्य रहती है, लेकिन बहुत हल्के या बहुत गहरे बेस पर रैंप के स्टेप उससे लगभग अलग नहीं दिखेंगे।
- ग्रे, सफ़ेद या काले बेस रंग से पूरी स्कीम एक जैसी बनती है: पूरी तरह डीसैचुरेटेड रंग में ह्यू रोटेशन कुछ नहीं बदलता। यह ईमानदार अंकगणित है, बग नहीं।
- सिर्फ़ अपारदर्शी रंग: कोई alpha नहीं, कोई rgba() नहीं, कोई 8-अंकीय HEX नहीं। पारदर्शिता कलर कनवर्टर का काम है।
- सिर्फ़ sRGB स्क्रीन मान: कोई CMYK नहीं, कोई Lab नहीं, कोई कलर मैनेजमेंट नहीं — एक जैसा HEX बिना कैलिब्रेशन वाले डिस्प्ले पर वाकई अलग दिखता है, और यह टूल इसे छिपाता नहीं।
- कंट्रास्ट का उपयोग सिर्फ़ यह तय करने के लिए होता है कि स्वॉच पर छपा मान काला हो या सफ़ेद। कोई कंट्रास्ट रेशियो रिपोर्ट नहीं होता; एक्सेसिबिलिटी जाँच के लिए कलर कनवर्टर इस्तेमाल करें।
- ज्यामिति ह्यू के रिश्तों की गारंटी देती है, सुंदरता की नहीं: हाई-सैचुरेशन कम्प्लीमेंट्री जोड़ा भी भड़कीला हो सकता है। नियम का मतलब यही है।
- “रैंडम बेस” आपके ब्राउज़र के crypto.getRandomValues से मान लेता है — क्रिप्टोग्राफ़िकली स्ट्रॉन्ग, कोई फ़िज़िकल एन्ट्रॉपी सर्विस नहीं — और बंद हो जाता है जब ब्राउज़र ऐसा स्रोत नहीं देता। बाकी सब काम करता रहता है।
- कुछ भी अपलोड, स्टोर या URL में नहीं डाला जाता: रीलोड पर #4F46E5 + एनालॉगस + HEX पर लौट आते हैं, और शेयर बटन सिर्फ़ पेज लिंक शेयर करता है। अपना सेट “CSS कॉपी करें” से बाहर ले जाएँ।
- अंग्रेज़ी CSS कलर नाम इनपुट के रूप में स्वीकार हैं क्योंकि यही CSS सिंटैक्स है; आउटपुट में स्थानीकृत कलर नाम नहीं दिया जाता — एक ही रंग का छापने लायक कोई मानक चीनी या अरबी नाम नहीं होता।
- राउंडिंग सिर्फ़ दिखने के स्तर पर है: चैनल पूर्णांक होते हैं, इसलिए एक ही रंग को HEX और HSL में बदलने पर कोई चैनल 1 से शिफ़्ट हो सकता है।
संबंधित टूल
स्कीम चुन लेने के बाद लोग आमतौर पर आगे यहीं जाते हैं।