CSS रंग नाम खोजक

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

1. रंग मान दर्ज करें: हेक्स कोड (#3b82f6), RGB या HSL मान टाइप करें या पेस्ट करें, या पिकर पर क्लिक करें।
2. रंग का नाम प्राप्त करें: निकटतम CSS नामित नाम, Pantone संदर्भ और पठनीय नाम तुरंत प्रदर्शित होते हैं।
3. निकटवर्ती रंग खोजें: समान नामित रंगों का पैलेट देखकर सर्वोत्तम मिलान खोजें।

कलर नेम लुकअप क्यों इस्तेमाल करें?

जब आप डिज़ाइन सिस्टम, सुगम्यता दस्तावेज़ों या क्लाइंट संचार के साथ काम करते हैं, तो रंगों के लिए पठनीय नाम होना आवश्यक है।

विशेषताएँ

• निकटतम CSS नाम: किसी भी रंग कोड के लिए निकटतम CSS-नामित रंग (148 CSS रंगों की पूरी सूची से) ढूँढता है।
• एकाधिक इनपुट प्रारूप: हेक्स (#rrggbb), RGB, HSL और HSV स्वीकार करता है।
• रंग चयनकर्ता: दृश्य चयन के लिए नेटिव पिकर का उपयोग करें।
• निकटवर्ती रंग: विकल्प खोजने के लिए समान नामित रंग प्रदर्शित करता है।
• रंग मेटाडेटा: ह्यू, सैचुरेशन, लाइटनेस और अनुभूत चमक प्रदर्शित करता है।

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

टूल निकटतम नाम कैसे खोजता है?

टूल CIEDE2000 अंतर सूत्र का उपयोग करके आपके रंग और सभी नामित CSS रंगों के बीच अवधारणात्मक दूरी की गणना करता है, जो मानव रंग अंतर धारणा से अच्छी तरह मेल खाता है। निकटतम मिलान नाम के रूप में लौटाया जाता है।

क्या ये रंग CSS कीवर्ड के समान हैं?

हाँ। टूल में सभी 148 मानक नामित CSS रंग शामिल हैं (CSS Color Module Level 4 विनिर्देश से) जैसे «rebeccapurple», «dodgerblue» और «tomato»। आप उन्हें सीधे CSS में हेक्स मानों के बजाय उपयोग कर सकते हैं।

अगर मेरे रंग का कोई सटीक नाम नहीं है तो क्या?

अधिकांश रंगों का कोई सटीक CSS नाम नहीं होता। टूल अवधारणात्मक रूप से निकटतम नामित रंग लौटाता है और आपको यह बताने के लिए अंतर (delta E) प्रदर्शित करता है कि मिलान कितना करीब है।

X11 से CSS Color Module Level 4 तक: «rebeccapurple» की लंबी यात्रा

आज ज्यादातर लोग जो CSS नामित रंग उपयोग करते हैं, वे X Window System रंग सूची (rgb.txt) से विरासत में मिले हैं, जिसे 1986 में MIT में X11 ग्राफिकल वातावरण के लिए संकलित किया गया था। अगले दशक में सूची स्वाभाविक रूप से बढ़ी, «papayawhip», «peachpuff», और «papayawhip» जैसे विचित्र और अस्पष्ट नामों से भरी हुई। जब Mosaic (1993) और फिर Netscape Navigator (1994) ने HTML में रंग को मानकीकृत किया, उन्होंने X11 नामों का एक उपसमुच्चय रखा। CSS1 (दिसंबर 1996) ने केवल 16 नामित रंग औपचारिक रूप से दिए, जो मूल VGA पैलेट से मेल खाते हैं: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow। HTML 4 (1997) ने «orange» को 17वें के रूप में जोड़ा। CSS2.1 (जून 2011) ने 17 को रखा। CSS3 Color Module (जून 2014, 2018 में अंतिम) ने X11 नामों का बाकी हिस्सा जोड़ा, कुल को 147 तक लाया। जून 2014 में, रंग «rebeccapurple» (#663399) को Eric Meyer की बेटी Rebecca को सम्मानित करने के लिए जोड़ा गया था जो ब्रेन कैंसर से मर गई थी; उसने कहा था कि बैंगनी उसका पसंदीदा रंग था। इसे CSS Color Module Level 4 में जोड़ा गया, कुल को 148 तक लाया। हेक्स मान #663399 एकमात्र CSS नामित रंग है जो किसी विशिष्ट व्यक्ति की स्मृति में जोड़ा गया है।

नामित रंगों से परे CSS रंग: oklch, lab, color()

नामित रंग अभी भी आधुनिक डिस्प्ले जो दिखा सकते हैं उसका केवल एक कोना कवर करते हैं। CSS Color Module Level 4 (उम्मीदवार अनुशंसा, वर्तमान ड्राफ्ट) रंग सिंटैक्स का एक बहुत व्यापक सेट पेश करता है। lab() और lch() आपको CIE Lab और LCh में रंग निर्दिष्ट करने की अनुमति देते हैं, जो धारणात्मक रूप से समान रंग स्थान हैं। oklab() और oklch() (Björn Ottosson, 2020) सुधारे गए संस्करण हैं जो उज्ज्वल संतृप्त रंगों को बेहतर तरीके से संभालते हैं; oklch(70% 0.15 240) एक जीवंत आसमानी नीला है। color(display-p3 1 0.5 0) व्यापक P3 रंग गामुट तक पहुंच प्रदान करता है जो आधुनिक iPhones, iPads, और Macs प्रदर्शित कर सकते हैं, sRGB जिस पर नामित रंग सीमित हैं उससे लगभग 25% अधिक संतृप्त। सापेक्ष रंग सिंटैक्स (oklch(from blue calc(l - 10%) c h)) आपको एक रंग से दूसरा प्राप्त करने की अनुमति देता है। 2024 में सभी चार रंग कार्यों के लिए ब्राउज़र समर्थन >90% तक पहुंचा। 2025 युग के डिजाइनों के लिए, प्रोटोटाइप के लिए नामित रंगों का उपयोग करें, फिर रंग गामुट स्पेक्ट्रम में काम करने वाले उत्पादन पैलेट के लिए oklch() पर पोर्ट करें।

«निकटतम रंग» वास्तव में कैसे गणना की जाती है

दो रंगों के बीच «दूरी» एक एकल अवधारणा नहीं है। विभिन्न सूत्र विभिन्न उत्तर देते हैं और वे प्रत्येक विभिन्न उपयोग के मामलों में फिट होते हैं।

• sRGB में यूक्लिडियन दूरी। sqrt((r₁−r₂)² + (g₁−g₂)² + (b₁−b₂)²)। तेज, लेकिन मानव धारणा से मेल नहीं खाती, समान दिखने वाले दो रंग RGB में दूर हो सकते हैं और बहुत अलग दिखने वाले दो रंग करीब हो सकते हैं। «निकटतम नाम» प्रश्नों के लिए बचें।
• Delta E CIE76। समान यूक्लिडियन सूत्र लेकिन CIE Lab स्थान में, जो लगभग धारणात्मक रूप से समान है। लगभग, बिल्कुल नहीं। अच्छा पहला अनुमान; नियंत्रित परिस्थितियों में ΔE ≤ 2.3 को «बस ध्यान देने योग्य» माना जाता है।
• Delta E CIEDE2000। वर्तमान उद्योग मानक, CIE द्वारा 2001 में प्रकाशित। हल्कापन, क्रोमा, और रंग रोटेशन के लिए सुधार जोड़ता है जो मनुष्य वास्तव में रंग अंतरों को कैसे समझते हैं इससे बेहतर मेल खाते हैं। अधिकांश पर्यवेक्षकों के लिए ΔE2000 ≤ 1 अगोचर है; ≤ 5 समान रंग जैसा दिखता है। यह उपकरण «निकटतम मिलान» के लिए CIEDE2000 का उपयोग करता है।
• OKLab में यूक्लिडियन दूरी। Björn Ottosson का 2020 रंग स्थान इस तरह डिज़ाइन किया गया है कि सादा यूक्लिडियन दूरी ΔE2000 का निकटता से अनुमान लगाती है। ΔE2000 से तेज और धारणात्मक गुणवत्ता समान है। डिज़ाइन टूलिंग में तेजी से डिफ़ॉल्ट।

जहां रंगों को नाम देना वास्तव में मदद करता है

• डिज़ाइन सिस्टम प्रलेखन। «प्राथमिक क्रिया: Royal Blue (#4169e1)» डिज़ाइन विनिर्देशों और ब्रांड दिशानिर्देशों में सिर्फ हेक्स मान से बेहतर पढ़ता है।
• क्लाइंट संचार। «चलो coral और steel blue का उपयोग करते हैं» बैठक में काम करता है; «#ff7f50 और #4682b4» नहीं। नाम बातचीत को सटीक मानों पर प्रतिबद्ध होने से पहले लंगर डालते हैं।
• पहुंच ऑडिट। कौन से रंग पृष्ठभूमि के विरुद्ध WCAG कंट्रास्ट में विफल होते हैं इसे प्रलेखित करते समय, मानवीय नाम होने से ऑडिट रिपोर्ट गैर-डेवलपर्स के लिए उपयोगी हो जाती है।
• लीगेसी कोड अनुवाद। पुरानी CSS फ़ाइलें अक्सर नामित रंगों का उपयोग करती हैं। डिज़ाइन टोकन या कस्टम पैलेट में माइग्रेट करते समय, आपको जानने की आवश्यकता है कि «lightseagreen» और «mediumaquamarine» किन सटीक रंगों पर मैप होते हैं।
• त्वरित प्रोटोटाइप। background: tomato टाइप करना रंग चक्र से हेक्स चुनने से तेज है। नामित रंग अंतिम रंगों के चुने जाने से पहले लेआउट को स्केच करने के लिए आश्चर्यजनक रूप से अच्छे डिफ़ॉल्ट हैं।
• ब्रांड रंगों का नामकरण। यदि आपका ब्रांड लाल crimson (#dc143c) के करीब है, तो इसे आंतरिक रूप से «Brand Crimson» कहना «Red 8» से अधिक यादगार है।
• स्वैच मिलान। डिज़ाइनर एक तस्वीर या स्क्रीनशॉट से नमूना रंग चिपकाते हैं और पूछते हैं «यह रंग किसके पास है?» वास्तविक दुनिया के संदर्भ से पैलेट शुरू करने के लिए।

CSS नामित रंगों के साथ गलतियाँ और आश्चर्य

• gray vs grey। CSS दोनों वर्तनी स्वीकार करता है, लेकिन X11 सूची में मूल रूप से केवल «gray» था। «grey» बाद में जोड़ा गया था। lightgray और lightgrey उपनाम हैं, समान रंग। कोडबेस में एक वर्तनी पर टिके रहें।
• «dark» वेरिएंट हमेशा बेस से गहरे नहीं होते। darkgray (#a9a9a9) वास्तव में gray (#808080) से हल्का है, X11 सूची की एक प्रसिद्ध ऐतिहासिक विचित्रता जो CSS को विरासत में मिली। darkgrey के साथ भी वही जाल।
• aqua और cyan एक ही रंग हैं। दोनों #00ffff हैं। CSS दोनों को लीगेसी उपनाम के रूप में शामिल करता है। fuchsia और magenta भी समान हैं (#ff00ff)।
• «orange» एक CSS नामित रंग है लेकिन «pink» वेरिएंट अलग हैं। orange = #ffa500। लेकिन कोई एक «pink» नहीं है, CSS में pink, lightpink, hotpink, deeppink, palevioletred हैं, सभी उल्लेखनीय रूप से अलग।
• «निकटतम रंग» इस पर निर्भर करता है कि आपका दिमाग रंग क्या सोचता है। एक ही पेंट चिप का नमूना लेने वाले दो लोग अलग-अलग नाम चुन सकते हैं। CIEDE2000 औसत धारणा को कैप्चर करता है, आपकी नहीं। केवल दूरी संख्या पर भरोसा करने के बजाय हमेशा स्वैच को दृश्य रूप से जांचें।
• नामित रंग सभी sRGB हैं। CSS नामित रंग 8-बिट sRGB त्रिक के रूप में परिभाषित हैं। P3 या BT.2020 डिस्प्ले पर, tomato और fuchsia जैसे जीवंत रंग color(display-p3 ...) में निर्दिष्ट समान रंग से अधिक फीके दिख सकते हैं। प्रोटोटाइप के लिए, ठीक है; आधुनिक हार्डवेयर पर उत्पादन के लिए, वाइड-गामुट सिंटैक्स पर पोर्ट करें।
• केवल नामित रंग पहुंच जांच पास नहीं करते। white पर yellow अपठनीय है; black पर red सीमांत है। एक रंग की नामित स्थिति कंट्रास्ट के बारे में कुछ नहीं कहती। हमेशा रंग चुनाव को WCAG कंट्रास्ट जांच के साथ जोड़ें।

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

वास्तव में «papayawhip» और «peachpuff» जैसे नाम किसने चुने?

कोई एक व्यक्ति नहीं; X11 rgb.txt फ़ाइल 1980 के दशक के अंत में MIT और अन्य Unix विक्रेताओं के कई योगदानकर्ताओं के बीच बढ़ी। कई नाम Sinclair Paints और उस युग के अन्य पेंट कैटलॉग से आए। नामकरण अनौपचारिक और जानबूझकर असंगत है, योगदानकर्ताओं ने अपने डेस्क पर या अपनी खिड़की के बाहर मौजूद वस्तुओं के नाम पर रंगों का नाम रखा। कोई केंद्रीय समिति नहीं थी। जब CSS3 ने 2014 में X11 सूची को थोक में अपनाया, तो सभी विचित्रताएँ साथ आ गईं।

क्या मुझे उत्पादन में rebeccapurple का उपयोग करना चाहिए?

2014 से ब्राउज़र समर्थन सार्वभौमिक है, इसलिए यह हर जगह काम करता है। यह बिल्कुल #663399 के बराबर है। जो भी नाम आपके कोड में बेहतर पढ़ता है उसका उपयोग करें; «rebeccapurple» हर पृष्ठ पर जो इसका उपयोग करता है एक छोटी लेकिन दृश्यमान श्रद्धांजलि है।

CIEDE2000 और सरल ΔE सूत्रों के बीच क्या अंतर है?

ΔE76 (CIE Lab में यूक्लिडियन दूरी) तेज है और उचित उत्तर देता है लेकिन संतृप्त रंगों में अंतर को कम आंकता है और गहरे रंगों में अधिक आंकता है। CIEDE2000 पांच सुधार शब्द (हल्कापन, क्रोमा, रंग रोटेशन और दो क्रॉस-शब्दों के लिए) जोड़ता है जो लोग वास्तव में रंग अंतरों को कैसे समझते हैं इस पर अनुभवजन्य डेटा फिट होते हैं। फिक्स महत्वपूर्ण है; रंगों की वही जोड़ी ΔE76 = 4 और ΔE2000 = 2 दे सकती है (बहुत अलग धारणात्मक निर्णय)। «क्या यह रंग उसके पर्याप्त निकट है», ΔE2000 का उपयोग करें। बैच प्रोसेसिंग के लिए जहां गति मायने रखती है, OKLab यूक्लिडियन दूरी एक तेज अनुमान है।

क्या मैं अपने स्वयं के कस्टम रंग नाम जोड़ सकता हूं?

CSS कीवर्ड के रूप में नहीं, नामित रंग सूची spec द्वारा तय है। लेकिन CSS Custom Properties (वेरिएबल्स) आपको समान एर्गोनॉमिक्स देते हैं: :root { --brand-coral: #ff7f50; } फिर color: var(--brand-coral)। डिज़ाइन टोकन अनिवार्य रूप से इस विचार को औपचारिक रूप दिया गया है, और आधुनिक डिज़ाइन सिस्टम उन्हें सार्वभौमिक रूप से उपयोग करते हैं।

क्या मेरा रंग डेटा कहीं भेजा जाता है?

नहीं। सभी रंग रूपांतरण और दूरी गणना आपके ब्राउज़र में चलती है। DevTools में नेटवर्क टैब खोलें और एक रंग चुनें, आप शून्य आउटबाउंड अनुरोध देखेंगे। अप्रकाशित ब्रांड रंगों या किसी आंतरिक पैलेट कार्य के लिए सुरक्षित।