CSS कलर कोड जनरेटर क्या है?

एक CSS कलर कोड जनरेटर जो किसी भी रंग को हर CSS-संगत फ़ॉर्मेट में बदलता है: HEX, RGB, RGBA, HSL, HSLA, OKLCH और CSS नामित रंग। दृश्यात्मक रूप से रंग चुनें या कोई भी फ़ॉर्मेट दर्ज करें और तुरंत सभी अन्य प्राप्त करें, साथ ही WCAG कंट्रास्ट जाँच भी।

हेक्स कोड टाइप करें, कलर पिकर खींचें, RGB स्लाइडर हिलाएँ, या मौजूदा rgb() या hsl() स्ट्रिंग पेस्ट करें। बाक़ी फ़ॉर्मैट लाइव बनते रहते हैं, जिनमें परसेप्शुअल रूप से एक-समान पैलेट के लिए OKLCH भी शामिल है, और W3C की 147 CSS नामित रंगों की सूची से सबसे क़रीबी रंग भी मिलता है। ओपैसिटी 100% से कम करने पर ही rgba() और hsla() में alpha दिखता है, इसलिए अपारदर्शी रंगों का आउटपुट साफ़ रहता है। एक कंट्रास्ट पैनल सफ़ेद और काले पर WCAG अनुपात दिखाता है ताकि एक नज़र में पता चले कि रंग टेक्स्ट के रूप में पढ़ने लायक है या नहीं।

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

1. विज़ुअल पिकर का उपयोग करके रंग चुनें, या किसी समर्थित फ़ॉर्मेट (HEX, RGB, HSL) में मान दर्ज करें।
2. सभी CSS फ़ॉर्मेट में एक साथ प्रदर्शित रंग देखें, प्रत्येक फ़ॉर्मेट के लिए एक-क्लिक कॉपी के साथ।
3. RGBA और HSLA मान प्राप्त करने के लिए अल्फा स्लाइडर से ओपेसिटी समायोजित करें, फिर अपनी जरूरत का CSS कोड कॉपी करें।

कब उपयोग करें

• डिज़ाइनर के दिए HEX को CSS फ़्रेमवर्क द्वारा माँगे गए फ़ॉर्मैट में बदलना।
• पैलेट बनाते समय HSL वैल्यू से एकसमान हल्के और गहरे शेड निकालना।
• ओवरले, छाया, या hover स्थिति के लिए ब्रांड रंग पर पारदर्शिता जोड़ना।

परिणाम

एक फ्रंटएंड डेवलपर अपने ब्रांड का नारंगी #F97316 चुनता है और तुरंत rgb(249, 115, 22), hsl(25, 95%, 53%) और अन्य सभी फ़ॉर्मेट प्राप्त करता है, जो उनकी स्टाइलशीट में लगातार उपयोग के लिए तैयार हैं।

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

नामित रंग वाला फ़ील्ड कभी-कभी ख़ाली क्यों होता है?

CSS में सिर्फ़ 147 नामित रंग हैं और आपका HEX उसमें से किसी एक से बिल्कुल मेल खाना चाहिए। ज़्यादातर ब्रांड रंग दो नामित रंगों के बीच में पड़ते हैं, यह सामान्य है। यह फ़ील्ड tomato या steelblue जैसे आम रंगों की जाँच के लिए उपयोगी है।

HEX या RGB के बजाय HSL कब चुनें?

HSL को हाथ से बदलना आसान है: lightness में 10 जोड़ने पर एक धीमा हल्का शेड मिलता है और hue में 30 जोड़ने पर रंग चक्र पर थोड़ा घूम जाते हैं। स्केल बनाते समय डिज़ाइनर HSL ज़्यादा पसंद करते हैं। RGB और HEX अंतिम स्टाइलशीट में थोड़े छोटे रहते हैं।

ओपैसिटी स्लाइडर रंग बदलता है या सिर्फ़ पारदर्शिता?

सिर्फ़ alpha चैनल बदलता है। R, G, B वैल्यू वैसी ही रहती हैं। इसलिए सफ़ेद बैकग्राउंड पर rgba(255, 0, 0, 0.5) गुलाबी जैसा दिखता है—वही लाल, पीछे के रंग के साथ 50/50 मिश्रित।

क्या ये CSS मान सभी ब्राउज़र में काम करते हैं?

HEX, RGB, RGBA, HSL, HSLA और नामित रंगों को पिछले 15 साल से, IE11 तक, सार्वभौमिक समर्थन मिला है। OKLCH भी यहाँ बनता है और हर मौजूदा इंजन — 2023 से Chrome, Firefox, Safari, Edge — में काम करता है, इसलिए अगर आप अब भी बहुत पुराने इंजन के लिए बना रहे हैं तो hex या rgb() का फ़ॉलबैक रखें।

किसी वेबसाइट पर दिखे रंग का HEX कैसे निकालें?

स्क्रीन से लें पर क्लिक करके आईड्रॉपर खोलें, फिर स्क्रीन पर कहीं भी किसी भी पिक्सेल——किसी पेज, इमेज या डिज़ाइन मॉक——पर क्लिक करें और वह रंग तुरंत लोड हो जाएगा। (आईड्रॉपर Chrome, Edge या Opera में चलता है; Safari या Firefox में अपने ऑपरेटिंग सिस्टम के स्क्रीन कलर पिकर से HEX उठाएँ और HEX बॉक्स में पेस्ट कर दें।) किसी भी तरीके से आपको सारे समतुल्य फ़ॉर्मैट और ओपैसिटी वाले रूप एक साथ मिल जाएँगे।

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