रंग चयनकर्ता

रंग चयनकर्ता एक मुफ़्त टूल है, जिससे ब्राउज़र में कोई रंग चुनकर उसका मान अपने ज़रूरी फ़ॉर्मेट में पाया जा सकता है।

रंग चयनकर्ता से क्या परिणाम मिलता है?

रंग चयनकर्ता, कलर व्हील पर चुने गए रंग का संख्यात्मक रूप देता है। स्क्रीन पर दिखने वाले एक ही रंग को कई फ़ॉर्मेट में लिखा जा सकता है। इनमें hexadecimal, RGB, RGBA, HSL और HSLA सबसे आम हैं।

हर फ़ॉर्मेट रंग को अलग तरीके से दर्शाता है। Hexadecimal और RGB में लाल, हरे और नीले चैनल के मान दिए जाते हैं। HSL में hue, saturation और lightness का उपयोग होता है, जिससे किसी तय क्रम में रंग बदलना आसान हो सकता है। Alpha चैनल वाले फ़ॉर्मेट opacity भी बताते हैं।

• Hexadecimal मान में hash के बाद hexadecimal अंक होते हैं, जैसे #336699.
• RGB में आम तौर पर हर चैनल को 0 से 255 तक की संख्या से दर्शाया जाता है, जैसे rgb(51, 102, 153).
• HSL में hue का कोण और saturation व lightness के प्रतिशत मान होते हैं, जैसे hsl(210, 50%, 40%).
• RGBA और HSLA में transparency भी शामिल होती है। Alpha मान 0 होने पर रंग पूरी तरह पारदर्शी और 1 होने पर पूरी तरह अपारदर्शी होता है।

CSS में नाम वाले रंग भी इस्तेमाल किए जा सकते हैं, लेकिन उपलब्ध नामों की सूची सीमित है और वे सटीक design tokens के लिए कम उपयोगी होते हैं। संख्यात्मक मानों को आम तौर पर design systems, stylesheets और application code के बीच ले जाना आसान होता है।

रंग चयनकर्ता का इस्तेमाल कैसे करें?

Color फ़ील्ड चुनें, फिर कलर व्हील पर मनचाही जगह चुनें और मिले हुए मान को अपने application के ज़रूरी फ़ॉर्मेट में इस्तेमाल करें। पूरी प्रक्रिया आपके ब्राउज़र में होती है। चुने गए रंग का input कभी किसी server पर upload नहीं किया जाता।

अगर किसी मौजूदा interface पर काम कर रहे हैं, तो शुरुआत उसी फ़ॉर्मेट से करें जो codebase में पहले से इस्तेमाल हो रहा है। इससे बेवजह colour conversion नहीं करना पड़ता और pull requests की समीक्षा आसान रहती है। Third-party data देखते समय किसी रंग को उसके दिखने में समान मान से बदलने से पहले जांचें कि मौजूदा मान में opacity शामिल है या नहीं।

Deployment से पहले बेहतर तरीका यह है कि मनचाहा रंग चुनें या दोबारा बनाएं, सही notation copy करें और उसे component की वास्तविक state में जांचें। Normal, hover, focus और disabled states को अलग-अलग test करें, क्योंकि opacity और inherited styles अंतिम rendered result को बदल सकते हैं।

परिणाम को कैसे समझें

परिणाम को उसके colour model के अनुसार पढ़ें और code में copy करने से पहले alpha component की जांच करें। RGB में हर channel का मान उसके लाल, हरे या नीले component की तीव्रता नियंत्रित करता है। HSL में hue कलर व्हील के चारों ओर चलता है, saturation रंग की तीव्रता तय करता है और lightness काले व सफ़ेद के बीच संतुलन नियंत्रित करती है।

CSS या structured data में colour syntax के नियम सख्त होते हैं। हाथ से बदलाव करते समय ये गलतियां अक्सर होती हैं:

• hexadecimal CSS मान की शुरुआत में hash न लगाना;
• पांच या सात hexadecimal अंकों का इस्तेमाल करना, जबकि ये मानक रूप से मान्य hex लंबाइयां नहीं हैं;
• जहां RGB implementation को channel numbers चाहिए, वहां प्रतिशत लिखना;
• पुराने RGB syntax में commas भूल जाना या पुराने और आधुनिक syntax के असंगत रूपों को मिलाना;
• alpha वाले मान को ऐसे software में copy करना जो केवल six-digit hex स्वीकार करता है;
• जहां CSS में decimal point चाहिए, जैसे 0.5, वहां decimal comma लिखना, जैसे 0,5.

रंग चयनकर्ता colour values बनाता है, यह सामान्य CSS validator नहीं है। इससे यह साबित नहीं होता कि आसपास का declaration, JSON document या theme file मान्य है। Colour value से बाहर की syntax errors को संबंधित parser या development tool से अलग जांचना होगा।

उदाहरणों से colour conversion समझें

Six-digit hexadecimal रंग में अंकों की जोड़ियां क्रमशः लाल, हरे और नीले रंग को दर्शाती हैं। उदाहरण के लिए, नीचे दिए गए सभी रूप एक ही अपारदर्शी रंग को दिखाते हैं।

Hex मान #336699

समान RGB मान rgb(51, 102, 153)

समान HSL मान hsl(210, 50%, 40%)

Three-digit hex एक संक्षिप्त रूप है। Six-digit मान बनाने के लिए हर अंक को दोहराया जाता है।

छोटा hex मान #fff

विस्तृत hex मान #ffffff

समान RGB मान rgb(255, 255, 255)

Eight-digit hex में लाल, हरे और नीले रंग की जोड़ियों के बाद alpha शामिल होता है। ऐसे systems में सावधानी रखें जो channels का क्रम अलग रखते हैं या eight-digit notation स्वीकार नहीं करते। दिखने में बिल्कुल समान ठोस रंग पर किसी दूसरे background के ऊपर opacity लगाने से परिणाम भी अलग हो सकता है।

मुझे कौन-सा colour format चुनना चाहिए?

जिस जगह रंग का इस्तेमाल होना है, वहां पहले से अपेक्षित colour notation ही चुनें, जब तक उसे बदलने की कोई स्पष्ट वजह न हो। Six-digit hex संक्षिप्त है और CSS variables व design token files में आम तौर पर इस्तेमाल होता है। जब software सीधे channel values दिखाता है, तब RGB सुविधाजनक रहता है। Lightness या saturation बदलकर संबंधित रंग बनाने के लिए HSL उपयोगी है।

• अगर रंग अपारदर्शी है और संक्षिप्त व आसानी से पढ़ा जाने वाला web colour चाहिए, तो six-digit hex इस्तेमाल करें।
• Eight-digit hex तभी इस्तेमाल करें, जब target environment उस notation में alpha को स्पष्ट रूप से support करता हो।
• लाल, हरे और नीले channels पर अलग-अलग काम करने के लिए RGB या RGBA इस्तेमाल करें।
• Hue, saturation या lightness पर आधारित programmatic theme variations के लिए HSL या HSLA इस्तेमाल करें।
• अगर आपके पास पहले से कोई मान है और नया रंग देखकर चुनने के बजाय उसका फ़ॉर्मेट बदलना है, तो रंग परिवर्तक इस्तेमाल करें।

स्क्रीन पर दिखने वाले RGB मान को print specification न मानें। Commercial printing के लिए CMYK values, ICC colour profile, proofing और printer की सहमति की ज़रूरत पड़ सकती है। केवल गणितीय conversion से यह गारंटी नहीं मिलती कि छपा हुआ रंग backlit screen से मेल खाएगा।

रंग चुनने या बदलने की ज़रूरत कब नहीं होती?

अगर मौजूदा colour value पहले से उसी फ़ॉर्मेट में है जिसकी destination को ज़रूरत है, तो रंग चुनना या convert करना अनावश्यक है। बार-बार conversion करने से rounding में अंतर, अक्षरों के casing में असंगति या source files में बेवजह बदलाव हो सकते हैं।

किसी literal value से बदलने के बजाय theme variable जैसे named design token को बनाए रखना भी बेहतर हो सकता है। Tokens components के बीच संबंध बनाए रखते हैं और किसी रंग को एक ही केंद्रीय जगह से बदलने देते हैं। इसी तरह, केवल machine के इस्तेमाल वाले रंग को अधिक आसानी से पढ़े जाने वाले रूप में बदलने की ज़रूरत नहीं है, जब तक किसी व्यक्ति को उसकी जांच या maintenance न करनी हो।

कोई भी रंग चयनकर्ता अपने आप यह तय नहीं कर सकता कि चुने गए रंग का contrast पर्याप्त है, वह brand specification के अनुरूप है या colour-vision deficiencies वाले लोगों को स्पष्ट रूप से अलग दिखाई देगा। Foreground और background के मेल को किसी dedicated contrast tool से जांचें और interface को उसके वास्तविक संदर्भ में देखें।

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

क्या मिले हुए मान को CSS variables में इस्तेमाल कर सकता हूं?

हां, बशर्ते चुना गया notation उन browsers और build tools के लिए मान्य CSS हो जिन्हें आप support करते हैं। पूरा मान custom property में रखें, फिर उसे var() function से reference करें। अगर project अलग-अलग channels में बदलाव करता है, तो project में पहले से इस्तेमाल हो रहे convention के अनुसार उन channels को अलग store करना अधिक सुविधाजनक हो सकता है।

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

हर display की calibration, brightness, panel technology और colour-gamut support अलग हो सकती है। Browser का colour management और operating system की display profile भी rendering को प्रभावित कर सकती है। इसलिए समान numeric value होने पर भी हर device पर रंग का वास्तविक रूप बिल्कुल एक जैसा दिखने की गारंटी नहीं होती।

क्या hex में बड़े या छोटे अक्षर लिखने से रंग बदल जाता है?

नहीं। Hexadecimal के A से F तक के अंकों में बड़े या छोटे अक्षर का कोई फर्क नहीं होता, इसलिए #AABBCC और #aabbcc एक ही रंग दर्शाते हैं। केवल formatting वाले बदलावों से बचने के लिए repository में इस्तेमाल हो रहे casing convention का पालन करें।

क्या colour value में accent वाले या non-Latin अक्षर हो सकते हैं?

मानक hexadecimal, RGB और HSL notation में ASCII digits, letters और punctuation का इस्तेमाल होता है। Accent वाले या non-Latin अक्षर इन numeric colour syntaxes का हिस्सा नहीं हैं। अगर संबंधित language और file encoding अनुमति देते हैं, तो ये आसपास के variable names या metadata में दिखाई दे सकते हैं।

क्या पूरी तरह transparent रंग का मतलब कोई रंग न होना है?

नहीं। पूरी तरह transparent रंग में भी channel values मौजूद रहती हैं, भले ही वे अपने आप दिखाई न दें। Animation, interpolation, compositing या बाद में opacity बदलते समय ये छिपे हुए channels महत्वपूर्ण हो सकते हैं। अगर application ऐसे व्यवहार पर निर्भर है, तो इन्हें बनाए रखें।

क्या decimal channel values को round करना चाहिए?

Decimal colour channels और alpha values को केवल उतनी precision तक round करें जितनी destination स्वीकार करती है और consistent output के लिए ज़रूरी है। जरूरत से ज्यादा precision होने पर values की समीक्षा कठिन हो जाती है, जबकि बहुत अधिक rounding से रंग में थोड़ा अंतर आ सकता है। Round करने के बाद rendered component को उसके intended background और interaction states के साथ जांचें।