मुख्य सामग्री पर जाएँ
FreeOnlineTools Go
हिन्दी
स्पष्टीकरण

कलर फॉर्मेट समझाए गए: HEX, RGB, और HSL

FreeOnlineTools Team द्वारा · अद्यतन किया गया 2026-08-28

त्वरित जवाब

HEX (#RRGGBB) और RGB (प्रति चैनल 0–255) लाल, हरा, नीला तीव्रता सीधे एन्कोड करते हैं। HSL (hue 0–360°, saturation/lightness 0–100%) मानव धारणा से मेल खाता है। हमारे Color Converter से तीनों के बीच बदलें।

परिचय

वेब कलर तीन प्रमुख फॉर्मेट में निर्दिष्ट होते हैं: HEX (base-16 लाल, हरा, नीला), RGB (प्रति चैनल 0–255) और HSL (hue, saturation, lightness)। तीनों एक ही sRGB कलर स्पेस का वर्णन करते हैं लेकिन अलग-अलग अक्ष खोलते हैं: HEX और RGB हार्डवेयर-उन्मुख हैं, HSL मानव-उन्मुख है। आधुनिक CSS alpha को HEX8, rgba() और hsla() से समर्थन करता है।

क्रमशः

  1. HEX नोटेशन को समझें

    HEX प्रत्येक चैनल को दो अंकों के आधार-16 नंबर के रूप में लिखता है: #RRGGBB। 00 बंद है, एफएफ (255) पूर्ण तीव्रता है। #FF0000 शुद्ध लाल, #00FF00 शुद्ध हरा, #0000FF शुद्ध नीला, #FFFFFF सफेद, #000000 काला है। 4-अंकीय शॉर्टहैंड #RGB का विस्तार #RRGGBB तक होता है, और #RRGGBBAA अल्फा जोड़ता है (उदाहरण के लिए #FF573380 50% अल्फा है)।

  2. RGB नोटेशन को समझें

    RGB प्रति चैनल दशमलव 0-55 का उपयोग करता है: rgb(255, 87, 51) #FF5733 के समान है। rgba() फ़ंक्शन 0-अल्फा जोड़ता है: rgba(255, 87, 51, 0.5) 50% अपारदर्शी है। RGB HEX के बराबर है - यह आधार-16 के बजाय सिर्फ दशमलव है।

  3. HSL नोटेशन को समझें

    HSL रंग का उपयोग करता है (रंग चक्र पर 0-60°: 0=लाल, 120=हरा, 240=नीला), संतृप्ति (0% = ग्रे, 100% = पूर्ण रंग), और हल्कापन (0% = काला, 50% = सामान्य, 100% = सफेद)। एचएसएल(11, 100%, 60%) एक चमकीला नारंगी रंग है। HSL एक ही रंग के टिंट (हल्कापन बढ़ाना) और शेड्स (कम हल्कापन) बनाना तुच्छ बनाता है।

  4. प्रारूपों के बीच कनवर्ट करें

    HEX→RGB: प्रत्येक जोड़ी को आधार-16 के रूप में पार्स करें। RGB→HEX: प्रत्येक चैनल को 2-अंकीय आधार-16 में परिवर्तित करें। RGB→HSL: सामान्यीकृत चैनलों के अधिकतम/मिनट की गणना करें, हल्कापन = (अधिकतम+न्यूनतम)/2, संतृप्ति हल्केपन पर निर्भर करती है, रंग प्रमुख चैनल का कोण है। यह सब तुरंत करने के लिए हमारे कलर कन्वर्टर का उपयोग करें।

  5. कार्य के लिए सही प्रारूप चुनें

    डिज़ाइन टोकन और परिसंपत्तियों में सघनता के लिए HEX का उपयोग करें। जब आपको चैनलों को प्रक्षेपित या चेतन करने की आवश्यकता हो तो RGB/rgba() का उपयोग करें। पैलेट, शेड्स, या थीम विविधताएं उत्पन्न करते समय HSL/HSLA का उपयोग करें - हल्केपन को 10% तक समायोजित करना RGB डेल्टा के बारे में तर्क करने की तुलना में कहीं अधिक आसान है।

उदाहरण

तीनों प्रारूपों में शुद्ध लाल

इनपुट: #FF0000

उत्पादन: rgb(255, 0, 0) = hsl(0, 100%, 50%)

एक चमकीला नारंगी

इनपुट: #FF5733

उत्पादन: rgb(255, 87, 51) = hsl(11, 100%, 60%)

सफ़ेद ओर काला

इनपुट: #FFFFFF और #000000

उत्पादन: rgb(255,255,255) = hsl(0, 0%, 100%); rgb(0,0,0) = hsl(0, 0%, 0%)

एक HSL रंग से 5-चरणीय शेड बनाना

इनपुट: एचएसएल(210, 70%, 50%) - हल्कापन भिन्न 30/40/50/60/70%

उत्पादन: #1A4D7F, #2E6BA3, #4389C7, #6FA8DC, #9EC5E8—एक सुसंगत नीला पैलेट

सामान्य समस्या

  • 3-अंकीय और 6-अंकीय मिश्रण HEX: #F00 और #FF0000 एक ही रंग हैं, लेकिन कुछ पार्सर केवल एक फॉर्म स्वीकार करते हैं। आश्चर्य से बचने के लिए कोड को 6-अंकीय तक सामान्यीकृत करें।
  • यह भूल जाना कि HSL हल्कापन 50% 'आधा चमक' नहीं है: 100% संतृप्ति पर, 50% हल्कापन शुद्ध रंग है; 50% से ऊपर यह सफेद रंग का हो जाता है, 50% से नीचे यह काले रंग का हो जाता है। '50% ग्रे' एचएसएल (0, 0%, 50%) है।
  • अल्फ़ा चैनल भ्रम: #RRGGBBAA (HEX8) आधुनिक ब्राउज़रों में समर्थित है, लेकिन पुराने ब्राउज़रों में नहीं; rgba()/hsla() को व्यापक समर्थन प्राप्त है। हमेशा लक्ष्य परिवेश का परीक्षण करें.
  • रंग-स्थान बेमेल: HEX, RGB, और HSL सभी sRGB का वर्णन करते हैं। यदि आप पी3 या लैब/ओकेएलसीएच (आधुनिक डिस्प्ले द्वारा प्रयुक्त) में कनवर्ट करते हैं, तो एक सरल चैनल कॉपी गलत रंग उत्पन्न करती है - एक उचित रंग लाइब्रेरी का उपयोग करें।

सुझावों

  • पैलेट डिज़ाइन करते समय HSL का उपयोग करें: एक रंग चुनें, फिर सुसंगत शेड्स और टिंट उत्पन्न करने के लिए हल्केपन (जैसे 30/50/70%) और संतृप्ति (जैसे 60/80/100%) को अलग-अलग करें।
  • पहुंच के लिए, पृष्ठभूमि के विपरीत कंट्रास्ट अनुपात की जांच करें - WCAG AA को सामान्य पाठ के लिए 4.5:1, AAA 7:1 की आवश्यकता होती है। सापेक्ष चमक और कंट्रास्ट की गणना करने के लिए हमारे रंग कनवर्टर का उपयोग करें।
  • अवधारणात्मक रूप से एकसमान प्रक्षेप के लिए आधुनिक CSS रंग-मिश्रण() या oklch() को प्राथमिकता दें -RGB पूरक रंगों को मिलाते समय प्रक्षेप गंदे भूरे रंग से गुजर सकता है।
  • ग्रेडिएंट बनाते समय, पहले एंडपॉइंट को एक ही प्रारूप में परिवर्तित करें - एक ही ग्रेडिएंट घोषणा में HEX और HSL को मिलाने से अप्रत्याशित मध्यबिंदु उत्पन्न हो सकते हैं।

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

  • Color कनवर्टर — कनवर्ट करें colors between HEX, RGB and HSL तुरंत आपके ब्राउज़र में. अपलोड नहीं, fully पूरी तरह से निजी.
  • CSS Gradient Generator — Create beautiful CSS linear and radial gradients with a visual preview. Copy the CSS code instantly.
  • CSS Box Shadow Generator — Design CSS box shadows visually with live preview. Adjust offset, blur, spread, color and inset.
  • Image रिसाइज़र — रिसाइज़ करें images आपके ब्राउज़र में. Set custom dimensions or maintain aspect ratio. Download the resized image.
  • Base64 Image कनवर्टर — कनवर्ट करें between Base64 and image आपके ब्राउज़र में. Free, online, अपलोड नहीं, fully पूरी तरह से निजी bidirectional conversion with preview.
  • Case कनवर्टर — कनवर्ट करें text between UPPERCASE, lowercase, Title Case, camelCase, PascalCase, snake_case and kebab-case.
  • Add Watermark to Image मुफ्त ऑनलाइन — मुफ्त ऑनलाइन add watermark to image ऑनलाइन मुफ्त. Process data तुरंत आपके ब्राउज़र में. अपलोड नहीं, no signup, fully पूरी तरह से निजी.
  • ऐप आइकन जनरेटर — ऐप आइकन जनरेटर ऑनलाइन मुफ़्त. डेटा को आपके ब्राउज़र में तुरंत प्रोसेस करता है। अपलोड नहीं, पंजीकरण नहीं, पूरी तरह से निजी।

संबंधित मार्गदर्शिकाएँ

संदर्भ