HEX, RGB और HSL: वेब कलर फ़ॉर्मैट चुनना

इन नोटेशनों में हर रंग अलग-अलग कपड़े पहने वही sRGB रंग है। HEX, RGB को आधार-सोलह में लिखना है: #4F46E5 लाल, हरे और नीले चैनल हैं, हर एक दो हेक्साडेसिमल अंकों में। rgb(79, 70, 229) वही तीन चैनल दशमलव में बताता है, और hsl() उसी पिक्सल को कलर व्हील पर एक स्थिति के रूप में बताता है।

HEX और rgb() वही आठ-बिट sRGB चैनल बिल्कुल सटीक दिखा सकते हैं। hsl() भी वह रंग बता सकता है, लेकिन hue, saturation या lightness को राउंड करने से वापस कन्वर्ज़न में रंग थोड़ा बदल सकता है।

• HEXHEX डिज़ाइन टूल और कोड के बीच कॉपी-पेस्ट के लिए संक्षिप्त और स्थिर है, यही वजह है कि पैलेट और स्टाइल गाइड आमतौर पर hex में प्रकाशित होते हैं।
• RGBRGB 0 से 255 तक तीन चैनल तीव्रताओं के रूप में पढ़ा जाता है और इस बात से मेल खाता है कि स्क्रीन और इमेज फ़ॉर्मैट पिक्सल असल में कैसे स्टोर करते हैं।
• HSLHSL ह्यू, सैचुरेशन और लाइटनेस के रूप में पढ़ा जाता है — इंसान जैसे रंग बताते हैं उसके करीब, और इरादे से समायोजित करना कहीं आसान।

पारदर्शिता हर नोटेशन में जुड़ जाती है। rgb() और hsl() चौथा तर्क लेते हैं — rgba(79, 70, 229, 0.5) — और HEX में आठ-अंकीय रूप आया, #4F46E580, जहाँ अंतिम जोड़ी 00 से FF तक अल्फ़ा है।

• 0–1 या 00–FFफ़ंक्शन रूप में alpha 0 से 1 होता है; आठ-अंकीय hex में 00 से FF। बाइट 80 का मान 128/255, यानी लगभग 0.502 है—0.5 के करीब, पर बिल्कुल बराबर नहीं।
• सतहों पर परखेंपारभासी परत अपने alpha के अनुसार नीचे के रंग से संयोजित होती है; जहाँ वह दिखेगी उन सभी सतहों पर जाँचें।
• जुड़े टोकनजब डिज़ाइन सिस्टम एक ही ह्यू का ठोस और पारभासी वर्शन शिप करता है, तो एक आठ-अंकीय hex उन्हें दिखने में जुड़ा रखता है।

RGB चैनल सीधे एडिट करना अंकगणित है; इरादे का एडिट HSL में आसान है। टिंट वही ह्यू ज़्यादा लाइटनेस के साथ है, शेड वही ह्यू कम के साथ, और मंद रूप वही ह्यू घटाई सैचुरेशन के साथ — तीन चैनल एक साथ भटकने के बजाय तीन एकल-डायल चालें।

Color Shades Generator एक hex रंग को काले और सफ़ेद की ओर मिलाकर तीन से बीस भारित चरण बनाता है। वे दृश्य अनुभव में समान अंतराल पर नहीं होते; हर विकल्प को वास्तविक UI में जाँचें।

• टिंट और शेडटिंट और शेड: ह्यू और सैचुरेशन स्थिर रखें, लाइटनेस को लगभग-सफ़ेद से लगभग-काले तक घुमाएँ, और बैकग्राउंड, स्थितियों और टेक्स्ट के लिए उपयोगी रैंप पाएँ।
• सैचुरेशन स्थितियाँमंद और तीव्र रूप सिर्फ़ सैचुरेशन डायल से आते हैं, जिससे होवर और डिसेबल स्थितियाँ एक ही परिवार में रहती हैं।
• ह्यू रोटेशनह्यू रोटेशन संबंधित रंग बनाता है: समान श्रेणी के पड़ोसी करीब तीस डिग्री के भीतर बैठते हैं, पूरक एक सौ अस्सी डिग्री दूर।

कलर हार्मनी ह्यू व्हील पर ज्यामिति है: पूरक जोड़े सामने बैठते हैं, ट्रायाडिक सेट व्हील को तिहाई में बाँटते हैं, समान श्रेणी के समूह साथ झुंड बनाते हैं। HSL गणित दिखाता है — एक संख्या बदलें और पूरा स्कीम हिल जाता है।

कलर हार्मनी बिल्डर ठीक वही मॉडल लागू करता है। एक छह-अंकीय बीज hex से यह छह क्लासिक स्कीम — एनालोगस, कॉम्प्लिमेंटरी, स्प्लिट कॉम्प्लिमेंटरी, ट्रायाडिक, टेट्राडिक और मोनोक्रोम — में पाँच-रंग की पैलेट बनाता है, और हर स्वैच का कंट्रास्ट काले और सफ़ेद टेक्स्ट के सामने WCAG अनुपात लक्ष्य 3, 4.5 या 7 पर जाँचता है।

परिणाम CSS custom properties और JSON में निर्यात होते हैं। पाँच रंग फिर बनाने के लिए मूल रंग और स्कीम साझा करें; अगर वही पास/फ़ेल लेबल चाहिए तो contrast लक्ष्य भी बताएँ।

आधुनिक CSS ने पुराने फ़ंक्शनल रूपों को मिला दिया: स्पेस से अलग चैनल और अल्फ़ा के लिए वैकल्पिक स्लैश — rgb(79 70 229 / 0.5) — अल्पविराम-भरे rgba() की जगह लेते हैं। स्तर 4 विनिर्देश hwb(), lab() और oklch() जैसे नोटेशन भी जोड़ता है — चौड़े गैमट और अनुमानतः समान रैंप के लिए।

Color Mixer समर्थित hex रंग लेता है, alpha-aware interpolation या source-over compositing देता है, और hex व RGBA परिणाम दिखाता है। दो रंगों की तुलना से पहले क्रिया और उसका भार चुनें।

इनपुट बॉक्स hex टेक्स्ट लेता है, हर तरह का CSS रंग नहीं। rgb() या hsl() को पहले समर्थित hex रूप में बदलें।

• नया सिंटैक्सस्पेस से अलग चैनल और स्लैश अल्फ़ा हर मौजूदा ब्राउज़र में मान्य हैं; अल्पविराम रूप लेगसी उपनामों के रूप में समर्थित रहते हैं।
• OKLCH क्योंoklch() HSL का एक असली दोष ठीक करता है: HSL में बराबर लाइटनेस कदम हर ह्यू पर बराबर चमकीले नहीं लगते, जबकि OKLCH अनुमानित लाइटनेस सुसंगत रखता है।
• सोचकर अपनाएँनए नोटेशन वहीं अपनाएँ जहाँ वे समस्या सुलझाते हैं — सुसंगत रैंप, वाइड-गैमट डिस्प्ले — और जहाँ टूलिंग व आदतें पहले से काम करती हैं वहाँ hex या rgb() रखें।

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

Image Color Picker PNG, JPEG या WebP खोलकर डिकोड किए गए पिक्सेल का Canvas-sampled RGBA मान बताता है। डिकोडिंग और रंग रूपांतरण इस मान को प्रभावित कर सकते हैं; इसे मूल फ़ाइल के बाइट्स के समान न मानें।

सब कुछ स्थानीय रूप से चलता है: इमेज आपके ब्राउज़र में डिकोड होती है और कभी अपलोड नहीं होती, जो तब मायने रखता है जब आर्टवर्क अनरीलिज़्ड डिज़ाइन हो। चुनी वैल्यू शेड्स या हार्मनी टूल में ले जाएँ और आर्टवर्क से पैलेट तक की पूरी श्रृंखला आपके डिवाइस पर रहती है।