पूरक रंग खोजक क्या है?

पूरक रंग खोजक किसी भी दर्ज किए गए रंग के लिए कलर व्हील पर विपरीत रंग की गणना करता है। समान, त्रिक और विभाजित पूरक रंग सामंजस्य भी दिखाता है ताकि आप एक सुसंगत पैलेट बना सकें।

अंदर chroma-js का HSL कैलकुलेशन काम करता है, जो रंगचक्र को तय कोणों पर घुमाकर छह सामंजस्य योजनाएँ निकालता है — पूरक (180°), समीपवर्ती (±30°), त्रयी (120° और 240°), विभाजित-पूरक (150° और 210°), चतुष्क/वर्ग (90°, 180°, 270°), और एकवर्णी (बेस रंग के हल्के और गहरे शेड)। हर स्वैच पर HEX, RGB और HSL तीनों वैल्यू दिखती हैं और किसी भी फ़ॉर्मेट को एक क्लिक में कॉपी कर सकते हैं, सीधे Figma, Tailwind कॉन्फ़िग या CSS नियम में पेस्ट करने लायक।

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

1. चरण 1 — HEX (#FF6600) या RGB (255 102 0) फ़ॉर्मेट में बेस कलर दर्ज करें, या कलर सिलेक्टर से चुनें।
2. चरण 2 — कॉम्प्लिमेंटरी कलर (कलर व्हील पर 180° विपरीत) और उसके कलर कोड तुरंत देखें।
3. चरण 3 — अतिरिक्त हार्मनीज़ (एनालॉगस, ट्रायडिक, स्प्लिट-कॉम्प्लिमेंटरी) एक्सप्लोर करें और किसी भी स्वैच वैल्यू को कॉपी करें।

कब उपयोग करें

• किसी मौजूदा मुख्य रंग के इर्द-गिर्द ब्रांड पैलेट बनाना, बिना Adobe Color खोले।
• ऐसे CTA बटन का रंग चुनना जो पेज बैकग्राउंड पर साफ़ उभरे।
• चार्ट की डेटा-सीरीज़ के लिए ऐसे रंग चुनना जो आसपास होते हुए भी पढ़ने में आसान रहें।

परिणाम

एक ब्रांड डिज़ाइनर प्राइमरी ऑरेंज #FF8C00 दर्ज करता है और कॉम्प्लिमेंटरी ब्लू #0073FF मिलता है, साथ ही एनालॉगस वॉर्म टोन #FF4400 और #FFB800 एक एकजुट पैलेट के लिए।

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

पूरक और विभाजित-पूरक रंग में अंतर क्या है?

पूरक रंग वही है जो रंगचक्र पर ठीक सामने हो (180°)। विभाजित-पूरक उसी सामने वाले रंग के दोनों ओर के दो रंग (150° और 210°) लेता है। विभाजित संस्करण थोड़ा नर्म पड़ता है और पूरे UI में लगाने पर टकराव कम होता है।

बहुत गहरे या बहुत हल्के बेस रंगों के साथ भी काम करता है?

ह्यू-आधारित सामंजस्य (पूरक, समीपवर्ती, त्रयी, विभाजित-पूरक, चतुष्क) सिर्फ़ ह्यू घुमाते हैं, संतृप्ति और चमक वैसी की वैसी रहती है: हल्के बेस के साथी भी हल्के मिलते हैं, गहरे बेस के साथी गहरे। एकवर्णी आपके ह्यू के इर्द-गिर्द चमक जान-बूझकर बदलता है। ह्यू-आधारित साथी फीका लगे तो बेस की संतृप्ति बढ़ाकर फिर से जनरेट करें।

यह कलाकार वाला चक्र (RYB) इस्तेमाल करता है या स्क्रीन वाला (RGB)?

स्क्रीन वाला। यहाँ लाल (#FF0000) का पूरक सायन (#00FFFF) निकलता है, ऑयल पेंट थ्योरी का हरा नहीं। डिजिटल डिज़ाइन के लिए यही सही मॉडल है; असली रंग मिलाने पर अजीब लगेगा।

कुछ बेस रंगों के साथ पूरक रंग बेस जैसा ही क्यों दिखता है?

शुद्ध भूरे/स्लेटी रंगों का ह्यू तय ही नहीं होता, इसलिए घुमाव का कोई केंद्र नहीं रहता और वही ग्रे लौट आता है। बेस में 5% संतृप्ति भी जोड़ दें तो पूरक रंग ठीक से अलग दिशा में चला जाता है।

क्या मैं पूरी पैलेट एक साथ एक्सपोर्ट कर सकता हूँ?

हाँ, चार तरीकों से। «पैलेट डाउनलोड» हर स्वैच और उसके HEX को सादे टेक्स्ट फ़ाइल में सेव करता है। «CSS डाउनलोड» पैलेट को तैयार CSS कस्टम प्रॉपर्टीज़ (जैसे --color-complementary-1: #0099FF;) के रूप में निर्यात करता है। «Tailwind कॉन्फ़िग» tailwind.config.js में पेस्ट करने लायक रंगों का ऑब्जेक्ट बनाता है। «PNG छवि» पूरी पैलेट को लेबल वाली तस्वीर के रूप में सेव करती है, जो डिज़ाइन समीक्षा के लिए उपयोगी है।

संबंधित उपकरण