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

HTML HEX रंग

एक HEX color code वही red-green-blue mix है जो rgb() उपयोग करता है, लेकिन base-10 numbers के बजाय base-16 (hexadecimal) numbers का उपयोग करके एक छोटे, compact form में लिखा जाता है। जहां rgb(255, 0, 0) को तीन अलग-अलग 0-255 numbers चाहिए, वहीं equivalent HEX code #FF0000 तीनों channels को एक single छह-character string में पैक कर देता है, यही कारण है कि design tools और brand style guides में HEX सबसे common format है।

In this page:

  1. HEX Code पढ़ना
  2. 3-Digit Shorthand
  3. Grayscale HEX Values
  4. 8-Digit HEX से Transparency जोड़ना
  5. HTML और CSS में HEX का उपयोग
Syntax
markup 
<tagname style="color: #rrggbb;">content</tagname>

HEX Code पढ़ना

#FF5733 जैसा एक HEX color digits के तीन pairs में बंटता है: FF (red), 57 (green), और 33 (blue), जहां हर pair 00 से FF तक की एक hexadecimal संख्या है -- जो base 10 के बजाय base 16 में लिखे गए एक decimal 0-255 rgb() value के बराबर है।

Note: design करते समय एक ही color को HEX, RGB, और HSL के बीच तुरंत convert करने के लिए browser DevTools color picker का उपयोग करें।
Warning: Hexadecimal digits 0-9 फिर A-F तक चलते हैं, इसलिए इस range के बाहर कोई भी character HEX code को invalid बना देता है।

उदाहरण: Reading a HEX Code

markup 
<p style="color: #FF5733;">Custom hex color text</p>

3-Digit Shorthand

जब digits का हर pair खुद को दोहराता है, जैसे #FFFFFF या #112233, तो CSS एक छोटा 3-digit form allow करता है -- #FFF या #123 -- जहां हर single digit को ब्राउज़र स्वचालित रूप से double करके पूरा 6-digit code दोबारा बना लेता है।

Note: prototyping के समय #f00 (red) या #0f0 (green) जैसे quick, हाथ से लिखे colors के लिए 3-digit shorthand का उपयोग करें।
Warning: 3-digit shorthand तभी काम करता है जब हर pair के दोनों digits identical हों; #FF5733 का कोई valid shorthand form नहीं है।

उदाहरण: The 3-Digit Shorthand

markup 
<p style="color: #f00;">Shorthand red</p>
<p style="color: #FF0000;">Full form red</p>

Grayscale HEX Values

RGB की तरह ही, तीनों pairs identical होने वाला एक HEX code gray का एक shade बनाता है -- #000000 black है, #FFFFFF white है, और #808080 एक mid-tone gray है, क्योंकि hexadecimal में 80 decimal में 128 के बराबर होता है, जो 0-255 range के ठीक बीच में है।

Note: #333, #666, #999, और #ccc जैसे common neutral grays अक्सर text और border colors में consistency के लिए किसी design system में दोबारा उपयोग होते हैं।
Warning: एक HEX code जो gray दिखता है लेकिन उसके pairs थोड़े mismatched हैं, जैसे #808070, truly neutral होने के बजाय एक हल्का color tint रखेगा।

उदाहरण: Grayscale HEX Values

markup 
<p style="color: #808080;">Mid-tone gray text</p>

8-Digit HEX से Transparency जोड़ना

एक 6-digit code में दो अतिरिक्त hex digits जोड़ने से एक alpha transparency channel जुड़ जाता है, जो 00 (पूरी तरह transparent) से FF (पूरी तरह opaque) तक होता है -- #FF000080 लगभग 50% opacity पर red है, क्योंकि hex में 80, FF का लगभग आधा है।

Note: जब आपको transparency चाहिए लेकिन rgba() में switch करने के बजाय हर color value को एक ही HEX format में रखना पसंद हो, तो 8-digit HEX code का उपयोग करें।
Warning: 8-digit alpha HEX format plain 6-digit HEX से नया है, इसलिए double-check करें कि यह आपके project को support करने वाले किसी बहुत पुराने browser में सही तरीके से render होता है।

उदाहरण: Adding Transparency with 8-Digit HEX

markup 
<div style="background-color: #FF000080;">Semi-transparent red</div>

HTML और CSS में HEX का उपयोग

HEX codes हर उस जगह काम करते हैं जहां color value स्वीकार्य है, चाहे वह किसी HTML element के style attribute में inline लिखा हो या किसी linked CSS stylesheet के अंदर, और ये वह format हैं जो ज़्यादातर design tools (जैसे Figma या Photoshop) by default export करते हैं, जिससे design file से code में सीधे copy करना सबसे आसान format बन जाता है।

Note: जब कोई designer आपको color किसी HEX code के रूप में दे, तो उसे manually RGB या HSL में convert करने के बजाय सीधे paste करें, ताकि rounding errors से बचा जा सके।
Warning: HEX codes case-insensitive हैं (#ff0000 और #FF0000 identical हैं), लेकिन codebase में असंगत रूप से cases mix करना find-and-replace को मुश्किल बना सकता है।

उदाहरण: Using HEX Across HTML and CSS

markup 
<p style="color: #FF5733;">Inline hex color</p>
<style>
  .box { background-color: #FF5733; }
</style>
<div class="box">Internal CSS hex color</div>
Live Example
Related Topics

HTML RGB रंग · 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. शुरुआती # symbol भूल जाना, जिसके बिना browser value को किसी plain word या CSS keyword से अलग नहीं बता सकता।
  2. HEX digit pairs को गड़बड़ा देना, यह realize न करते हुए कि हर pair (RR, GG, BB) एक channel को represent करता है 00 से FF तक, बिल्कुल RGB में 0-255 की तरह।
  3. #f00 जैसे 3-digit shorthand इस्तेमाल करना और यह मान लेना कि यह हर जगह 6-digit HEX जैसा ही काम करता है, जबकि कुछ tools short form accept नहीं करते।
चैप्टर सारांश
  • HEX codes red, green, और blue channels को represent करने के लिए छह hexadecimal digits pairs में इस्तेमाल करते हैं: #RRGGBB।
  • #abc जैसा 3-digit shorthand #aabbcc तक expand होता है जब हर digit simply double हो जाता है।
  • एक optional 4th या 8th pair digits rgba() की alpha value की तरह ही एक alpha transparency channel जोड़ता है।
ब्राउज़र सपोर्ट

HEX color notation HTML और CSS के सबसे शुरुआती versions से supported है; 8-digit alpha-channel HEX format सभी modern browsers में supported है।

🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson HTML RGB Colors Next Lesson → HTML HSL 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.