रंग चुनें क्या है?

किसी भी रंग को विज़ुअली चुनें और hex, RGB, HSL वैल्यू पाएं। क्लिक करें या ड्रैग करें, सही शेड खोजें, फिर कोड कॉपी करें।

सेचुरेशन/ब्राइटनेस वर्ग के अंदर ड्रैग करके टोन बदलें, ह्यू बार सरकाकर रंग परिवार बदलें, और टूल hex, RGB, HSL तीनों मान दिखाता है, एक क्लिक में कॉपी हो जाते हैं। इनपुट में hex लिखते ही वर्ग सही जगह कूद जाता है, इससे पहले से तय ब्रांड कलर को रैंडम रंग से शुरू किए बिना ट्यून कर सकते हैं।

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

1. रंग क्षेत्र पर क्लिक करें या सिलेक्टर को ड्रैग करके अपना रंग खोजें
2. ह्यू स्लाइडर और वैकल्पिक अपारदर्शिता नियंत्रण से सूक्ष्म समायोजन करें
3. एक क्लिक में hex, RGB या HSL मान कॉपी करें

कब उपयोग करें

• वेबसाइट के CSS के लिए एक्सेंट रंग बिना डिज़ाइन ऐप खोले चुनना हो।
• ब्रांड गाइड के hex को डिज़ाइन सिस्टम में रखने के लिए HSL में बदलना हो।
• ह्यू स्लाइडर को थोड़ा-थोड़ा सरकाकर पास-पास के रंगों का छोटा पैलेट बनाना हो।

परिणाम

एक गर्म नारंगी चुनें: #E67E22, rgb(230, 126, 34), hsl(28, 80%, 52%)।

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

HSL और HSB (HSV) में क्या फ़र्क है?

HSL में 50% लाइटनेस पर शुद्ध रंग आता है और वहाँ से काले व सफ़ेद की ओर सममित ढंग से जाता है, इसलिए हल्के-गहरे शेड बनाने में सुविधा होती है। Photoshop में इस्तेमाल HSB में 100% ब्राइटनेस पर शुद्ध रंग आता है, जो पेंट मिक्स करने के तरीक़े के क़रीब है।

स्क्रीन के रंग और प्रिंट का रंग अलग क्यों दिखता है?

स्क्रीन RGB (अतिरिक्तक प्रकाश) से बनती है और प्रिंट CMYK (घटाव वाली स्याही) से। तेज़ हरा और इलेक्ट्रिक नीला जैसे रंगों का CMYK में सटीक मैच नहीं होता। अंतिम मंज़ूरी से पहले अंतिम माध्यम पर प्रूफ़ ज़रूर देखें।

क्या इन hex कोडों का WCAG से अनुपालन डिफ़ॉल्ट है?

नहीं, सुगम्यता रंगों की जोड़ी पर निर्भर करती है, अकेले रंग पर नहीं। फ़ोरग्राउंड hex को बैकग्राउंड hex के साथ मिलाकर कॉन्ट्रास्ट रेशियो जाँचें: सामान्य टेक्स्ट के लिए कम-से-कम 4.5:1, बड़े टेक्स्ट के लिए 3:1।

स्क्रीन पर पहले से मौजूद रंग कैसे लें?

स्क्रीन से लें पर क्लिक करें और आईड्रॉपर आपको अपनी स्क्रीन के किसी भी पिक्सेल से रंग उठाने देगा — सटीक hex सीधे पिकर में आ जाता है, ताकि आप सैचुरेशन, ब्राइटनेस या पारदर्शिता को बाद में ठीक कर सकें। (आईड्रॉपर बटन वहीं दिखता है जहाँ यह समर्थित हो; वरना अपने सिस्टम के कलर मीटर (macOS Digital Color Meter, Windows PowerToys, Chrome DevTools) से hex पढ़कर इनपुट फ़ील्ड में पेस्ट कर दें।)

क्या यह पिकर पारदर्शिता समर्थन करता है?

हाँ। ह्यू स्लाइडर के नीचे एक अपारदर्शिता स्लाइडर है जिससे अल्फा 0 से 100% तक कहीं भी सेट कर सकते हैं। प्रीव्यू स्वैच के पीछे शतरंज जैसा पैटर्न दिखता है, जिससे पारदर्शिता एक नज़र में समझ आ जाती है। अल्फा 100% से कम होते ही RGB और HSL के कॉपी बटन अपने आप rgba() और hsla() में बदल जाते हैं।

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