← Back to HTML Course | Chapter 2: Text, Formatting & Media | Lesson 11 of 26

HTML RGB रंग

आपकी screen जो भी color दिखाती है वह असल में तीन रंगीन lights का मिश्रण है: Red, Green, और Blue, हर एक 0 (off) से 255 (full brightness) के बीच किसी brightness पर चमकता हुआ। HTML और CSS में RGB color notation आपको सीधे उस exact मिश्रण को dial in करने देता है, जिससे आपको 140 named color keywords के limited set की जगह लाखों possible colors मिलते हैं।

In this page:

  1. तीन Light Channels
  2. Custom Colors के लिए Channels मिलाना
  3. Gray के Shades
  4. rgba() से Transparency जोड़ना
  5. Inline Styles और CSS Rules में RGB
Syntax
markup 
<tagname style="color: rgb(red, green, blue);">content</tagname>
<tagname style="color: rgba(red, green, blue, alpha);">content</tagname>

तीन Light Channels

rgb(red, green, blue) 0 से 255 तक के तीन numbers लेता है जो screen पर मिलाई गई red, green, और blue light की intensity को represent करते हैं।

ज़्यादा numbers का मतलब है उस channel के लिए तेज़ light, इसलिए rgb(255, 0, 0) पूरी intensity पर शुद्ध red है जबकि बाकी दोनों channels पूरी तरह बंद हैं।

Note: RGB को paint नहीं बल्कि colored spotlights मिलाने की तरह सोचें -- तीनों को पूरी brightness पर combine करने से white बनता है, brown या black नहीं।
Warning: 0-255 range से बाहर की values invalid होती हैं और browser द्वारा नजरअंदाज या clamp कर दी जाती हैं।

उदाहरण: The Three Light Channels

markup 
<p style="color: rgb(255, 0, 0);">Pure red text</p>

Custom Colors के लिए Channels मिलाना

तीनों channels में अलग-अलग intensities मिलाने से custom colors बनते हैं -- rgb(255, 165, 0) पूरे red को medium green और शून्य blue के साथ मिलाकर orange बनाता है।

140 named CSS color keywords से कहीं आगे, इस तरह लाखों अलग-अलग colors तक पहुंचा जा सकता है।

Note: किसी brand color के exact rgb() values हाथ से अंदाज़ा लगाने के बजाय पता करने के लिए एक online color picker का उपयोग करें।
Warning: एक single channel में छोटे बदलाव से color काफी बदल सकता है, इसलिए math मानने के बजाय custom RGB mixes को visually test करें।

उदाहरण: Mixing Channels for Custom Colors

markup 
<p style="color: rgb(255, 165, 0);">Orange text</p>

Gray के Shades

तीनों channels को बिल्कुल एक जैसी value पर सेट करने से gray का एक shade बनता है -- rgb(0, 0, 0) black है, rgb(255, 255, 255) white है, और इनके बीच कोई भी equal value, जैसे rgb(128, 128, 128), एक mid-tone gray है।

यह RGB को एक consistent grayscale palette बनाने का आसान तरीका बनाता है।

Note: borders और dividers जैसे grayscale UI elements को पूरी तरह neutral रखने के लिए equal RGB values का उपयोग करें, बिना किसी color tint के।
Warning: थोड़ी असमान channel values जो पहली नजर में gray दिखती हैं, zoom in करने पर एक हल्का, अनजाना color tint रख सकती हैं।

उदाहरण: Shades of Gray

markup 
<p style="color: rgb(128, 128, 128);">Mid-tone gray text</p>

rgba() से Transparency जोड़ना

rgba(red, green, blue, alpha) एक चौथी value जोड़ता है जिसे alpha कहते हैं, जो 0 (पूरी तरह transparent, invisible) से 1 (पूरी तरह opaque, solid) तक होती है, जिससे कोई color उसके पीछे मौजूद content के साथ blend हो सके।

यह आमतौर पर images या अन्य page content के ऊपर semi-transparent overlays के लिए उपयोग किया जाता है।

Note: एक translucent overlay बनाने के लिए 0.5 जैसी कम alpha value के साथ rgba() का उपयोग करें जो फिर भी background content को दिखने दे।
Warning: 0 की alpha value color को पूरी तरह invisible बना देती है, जो ऐसा दिख सकता है जैसे background-color rule ने चुपचाप कुछ नहीं किया।

उदाहरण: Adding Transparency with rgba()

markup 
<div style="background-color: rgba(0, 0, 0, 0.5);">Semi-transparent overlay</div>

Inline Styles और CSS Rules में RGB

RGB और RGBA values चाहे HTML inline style attribute में उपयोग हों या external CSS stylesheet के अंदर, बिल्कुल एक जैसा काम करती हैं, और color, background-color, border-color, और box-shadow सहित किसी भी color स्वीकार करने वाली property पर apply की जा सकती हैं।

Note: numbers को बार-बार टाइप करने के बजाय अक्सर उपयोग होने वाले mixes को CSS custom properties में store करके किसी project में RGB color values को consistent रखें।
Warning: commas और parentheses को check किए बिना properties के बीच rgb() values को copy-paste करना invalid CSS syntax का एक common source है।

उदाहरण: RGB in Inline Styles and CSS Rules

markup 
<style>
  .box { border-color: rgb(0, 128, 255); }
</style>
<div class="box" style="color: rgb(200, 0, 0);">Styled with RGB</div>
Live Example
Related Topics

HTML HEX रंग · HTML HSL रंग · HTML लिंक रंग · HTML रंग

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. 255 से ऊपर या 0 से नीचे rgb values type करना, जबकि हर channel 0-255 range में clamped होता है और उससे बाहर कुछ भी simply invalid है।
  2. यह भूल जाना कि rgb(0,0,0) black है (सारी lights off) जबकि rgb(255,255,255) white है (सारी lights पूरी brightness पर), जो paint pigments मिलाने के तरीके से उल्टा है।
  3. rgba() इस्तेमाल करना बिना यह realize किए कि चौथी value opacity है 0 (पूरी तरह transparent) से 1 (पूरी तरह opaque) तक, चौथा color channel नहीं।
चैप्टर सारांश
  • RGB colors rgb(red, green, blue) के रूप में लिखे जाते हैं, हर channel 0 से 255 तक range करता है।
  • तीनों channels के लिए equal values gray का कोई shade बनाती हैं, rgb(0,0,0) black से rgb(255,255,255) white तक।
  • rgba() एक चौथा transparency channel जोड़ता है, जिससे आप backgrounds और images पर semi-transparent colors layer कर सकते हैं।
ब्राउज़र सपोर्ट

rgb() और rgba() color notation हर browser में सबसे शुरुआती CSS2/CSS3 implementations तक supported है।

🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson HTML Colors Next Lesson → HTML HEX Colors

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.