CSS HEX Colors

Hex Color Syntax

एक hex color # से शुरू होता है, उसके बाद छह hexadecimal digits (0-9 और A-F) आते हैं, जो red, green, और blue के लिए pairs में group होते हैं -- #FF0000 pure red है क्योंकि FF (255) maximum red value है और बाकी दो channels 00 हैं। Hex digits case-insensitive होते हैं, इसलिए #ff0000 और #FF0000 identical हैं।

उदाहरण: Hex Color Syntax

<style>
.red { background: #FF0000; }
.lower { background: #ff0000; }
</style>
<div class="red">#FF0000</div>
<div class="lower">#ff0000 — identical color</div>

3-Digit Shorthand

जब किसी channel के दोनों digits identical हों, तो CSS एक 3-digit shorthand की अनुमति देती है: #F00 expand होकर #FF0000 बन जाता है। यह सिर्फ तभी काम करता है जब किसी channel के दोनों digits match करें, इसलिए #FF5733 जैसे color का कोई valid 3-digit shorthand नहीं है क्योंकि इसका कोई भी channel pair repeat नहीं होता।

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

<style>
.short { background: #F00; }
.long { background: #FF0000; }
</style>
<div class="short">#F00</div>
<div class="long">#FF0000 — same color</div>

8-Digit Hex से Alpha जोड़ना

Modern CSS किसी hex color के आगे एक optional 2-digit alpha channel को support करता है: #FF0000FF पूरी तरह opaque red है, #FF000080 लगभग 50% transparent red है। Alpha digits color channels जैसी ही 00-FF range इस्तेमाल करते हैं, जहाँ FF पूरी तरह opaque है और 00 पूरी तरह transparent है।

उदाहरण: Adding Alpha with 8-Digit Hex

<style>
.opaque { background: #FF0000FF; }
.half { background: #FF000080; }
</style>
<div class="opaque">Fully opaque red</div>
<div class="half">~50% transparent red</div>

एक नज़र में Hex Values पढ़ना

थोड़ी practice के साथ, पहले दो digits (red), बीच के दो (green), और आख़िरी दो (blue) को सीधे पढ़कर किसी color का अंदाज़ा लगाया जा सकता है -- high red और low green/blue का मतलब है red का कोई shade, लगभग बराबर high values तीनों में एक light gray या white है, और बराबर low values एक dark gray या black है।

उदाहरण: Reading Hex Values at a Glance

<style>
.red-shade { background: #CC3333; }
.gray { background: #AAAAAA; }
</style>
<div class="red-shade">High red, low green/blue = red shade</div>
<div class="gray">Equal channels = gray</div>

Practice में Hex बनाम RGB

Hex codes design handoffs और CSS variables में सबसे common format हैं क्योंकि ये compact और copy-paste friendly हैं, जबकि rgb()/rgba() अक्सर तब पसंद किए जाते हैं जब किसी value को animation या calculation के लिए अलग numbers में split करना हो।

दोनों बिल्कुल एक ही color space describe करते हैं, इसलिए इनके बीच convert करने से असली color कभी नहीं बदलता।

उदाहरण: Hex vs RGB in Practice

<style>
.hex { background: #1a73e8; }
.rgb { background: rgb(26, 115, 232); }
</style>
<div class="hex">#1a73e8</div>
<div class="rgb">rgb(26, 115, 232) — same color</div>