HTML HEX Colors

एक 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:

HEX Code पढ़ना
3-Digit Shorthand
Grayscale HEX Values
8-Digit HEX से Transparency जोड़ना
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

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

HTML HEX Colors

HEX Code पढ़ना

3-Digit Shorthand

Grayscale HEX Values

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

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

Chapter Quiz — Complete all 26 topics to unlock

Login to run this code