रंग मिक्सर क्या है?

अनुपात स्लाइडर से दो रंगों को मिलाएँ और नतीजा रियल टाइम में देखें। HEX, RGB और HSL मान दिखाता है जिन्हें सीधे अपने कोड या डिज़ाइन टूल में कॉपी कर सकते हैं।

दो रंग चुनिए, मिक्स मोड तय कीजिए — RGB, RYB, LAB, LCH, HSL या OKLCH — और 0% से 100% का स्लाइडर हिलाइए। RGB स्क्रीन कलर स्पेस में सीधे औसत निकालता है, सबसे तेज़ है पर बीच का रंग धुंधला आ सकता है; RYB असली रंग (पेंट) की तरह मिलता है, इसलिए नीला और पीला मिलकर हरा और लाल व पीला मिलकर नारंगी बनता है; LAB और LCH परसेप्चुअल स्पेस में मिक्स करते हैं, इसलिए रंग-कुलों के बीच ट्रांज़िशन ज़्यादा सहज होता है; OKLCH सबसे नया परसेप्चुअल मॉडल है, जो आधुनिक CSS color-mix स्पेक से मेल खाता है और आम तौर पर सबसे स्वाभाविक मिडपॉइंट देता है। आउटपुट HEX, RGB, HSL, CMYK और सबसे नज़दीकी कलर नाम के साथ मिलते हैं, साथ में सफ़ेद और काले पर WCAG कंट्रास्ट और कॉपी करने लायक CSS लीनियर-ग्रेडिएंट भी। 25, 50, 75 प्रतिशत के क्विक बटन से आम मिक्स पॉइंट्स पर एक झटके में पहुँचा जा सकता है।

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

1. चरण 1 — कलर पिकर का उपयोग करके या HEX मान दर्ज करके पहला रंग चुनें।
2. चरण 2 — दूसरा रंग चुनें, फिर मिश्रण को नियंत्रित करने के लिए मिक्स रेशियो स्लाइडर एडजस्ट करें (0% = पूर्ण पहला रंग, 100% = पूर्ण दूसरा रंग)।
3. चरण 3 — मिश्रित परिणाम उसके कलर कोड के साथ देखें और जो मान चाहिए उन्हें कॉपी करें।

कब उपयोग करें

• ब्रांड रंग को सफ़ेद या ग्रे से मिलाकर बटन के hover / disabled स्टेट्स बनाना।
• CSS ग्रेडिएंट के बीच के स्टॉप बनाना ताकि बीच का रंग धुंधला न हो।
• दो ब्रांड रंगों को कम अनुपात में मिलाकर सॉफ़्ट कॉलआउट का हलका एक्सेंट बनाना।

परिणाम

एक डिज़ाइनर UI किट में होवर स्टेट के लिए ब्रांड ब्लू (#2196F3) को व्हाइट (#FFFFFF) के साथ 30% पर मिलाता है और एक सूक्ष्म टिंट (#A1C9F8) बनाता है।

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

ज़्यादातर समय कौन-सा मिक्स मोड चुनना सही है?

अगर आपकी बिल्ड पाइपलाइन सपोर्ट करती है तो OKLCH सबसे अच्छा है — परसेप्चुअली सबसे एकसमान है और मॉडर्न CSS color-mix स्पेक से मेल खाता है। उसके बाद LAB ठीक है, जो डिज़ाइन टूल्स में व्यापक रूप से सपोर्टेड है। दोनों रंगों की चमक एक-सी हो तो RGB ठीक है; LCH chroma को सबसे बेहतर बचाए रखता है; HSL रंग के घुमाव के लिए ज़्यादा उपयुक्त है, स्मूद इंटरपोलेशन के लिए नहीं।

RGB का मध्य-बिंदु कई बार ग्रे या मटमैला क्यों दिखता है?

RGB संख्या का औसत निकालता है, धारणा का नहीं। नीला और नारंगी जैसे पूरक रंगों में R, G, B चैनल आपस में कट जाते हैं, इसलिए बीच का रंग कम संतृप्त ग्रे बन जाता है। LAB या LCH पर स्विच करते ही मध्य-बिंदु अधिक संतृप्त रहता है। असली रंग (पेंट) मिलाने जैसा नतीजा चाहिए तो RYB मोड इस्तेमाल कीजिए — यह नीले और पीले को ग्रे नहीं, हरा बनाता है।

यह CSS `color-mix()` से कैसे अलग है?

color-mix() आधुनिक ब्राउज़र में आ चुका है और srgb, lab, oklab, lch, oklch में काम करता है। यह टूल पुराने स्टाइलशीट में चिपकाने योग्य HEX देता है और दृश्य स्लाइडर भी, ताकि प्रतिशत का अंदाज़ा लगाने के बजाय अनुपात ख़ुद तय कर सकें।

क्या दो से अधिक रंगों को मिलाया जा सकता है?

एक ही चरण में नहीं, पर चेन करके हाँ: A और B मिलाकर C बनाएँ, फिर C को D से मिलाएँ। तीन रंगों का सहज ग्रेडिएंट चाहिए तो A→B को 50% और B→C को 50% पर मिलाइए और मिले हुए दो मध्य-बिंदुओं को मूल B के दोनों ओर ग्रेडिएंट स्टॉप की तरह रख दीजिए।

मिक्स अनुपात 0% बनाम 100% क्या दर्शाते हैं?

0% पर शुद्ध Color 1, 100% पर शुद्ध Color 2 और 50% पर बीच का रंग मिलता है। स्लाइडर 1% कदम में चलता है, इसलिए हलका शेड या टिंट बारीकी से सेट कर सकते हैं — UI स्टेट्स में 10% और 15% मिश्रण साफ़-साफ़ अलग महसूस होते हैं।

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