कलर स्कीम जनरेटर

एक बेस रंग अंदर — समझाने लायक स्कीम और उसकी लाइटनेस रैंप, एक ही स्क्रीन पर, कॉपी करने के लिए तैयार।

#RGB, #RRGGBB, rgb(), hsl() और अंग्रेज़ी CSS कलर नाम स्वीकार्य हैं। खाली = डिफ़ॉल्ट #4F46E5।

स्कीम

लाइटनेस रैंपबेस जैसा ही ह्यू और सैचुरेशन, लाइटनेस 88 / 70 / 52 / 34 / 18%

इसका उपयोग कैसे करें

  1. पेज खुलते ही डिफ़ॉल्ट बेस #4F46E5 से बनी स्कीम और लाइटनेस रैंप स्क्रीन पर मौजूद होती है — पहले नतीजे के लिए कोई क्लिक नहीं करना पड़ता।
  2. उसे अपना रंग बनाएँ: #4F46E5, rgb(79, 70, 229), hsl(243, 75%, 59%) या अंग्रेज़ी CSS कलर नाम पेस्ट करें, सिस्टम पिकर इस्तेमाल करें, या “रैंडम बेस” दबाएँ। टाइप करते ही सब कुछ दोबारा कंप्यूट होता है।
  3. चुनें कि ह्यू आपस में कैसे जुड़ें। एनालॉगस (0°, ±30°, ±60°) पड़ोस में ही रहता है; कम्प्लीमेंट्री (0°, 180°) सीधा विपरीत है; ट्राइआडिक (0°, 120°, 240°) और टेट्राडिक (0°, 90°, 180°, 270°) दायरा चौड़ा करते हैं; स्प्लिट-कम्प्लीमेंट्री (0°, 150°, 210°) टकराव के बिना तनाव बनाए रखता है। रैंप हमेशा बेस रंग ही होती है, लाइटनेस 88 / 70 / 52 / 34 / 18% पर, इसलिए “मेरे प्राइमरी का हल्का/गहरा संस्करण” एक टैप दूर है।
  4. किसी भी स्वॉच पर टैप करके चुने फ़ॉर्मैट में उसका मान कॉपी करें; “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 से शिफ़्ट हो सकता है।

स्कीम चुन लेने के बाद लोग आमतौर पर आगे यहीं जाते हैं।