Hex Color Codes को समझना: Complete Guide

यदि आपने कभी CSS file, design tool, या brand style guide देखी है, तो आपने hex color codes देखे हैं: #3B82F6 या #FF5733 जैसे छह-character strings जो किसी तरह एक screen प्रदर्शित कर सकने वाले हर रंग को encode करते हैं। वे अक्षरों और संख्याओं के random sequence की तरह लगते हैं, लेकिन उनके पीछे एक precise system है — और एक बार जब आप इसे समझ लेते हैं, तो आप एक नज़र में किसी भी hex code को पढ़ सकते हैं।

"Hex" का क्या मतलब है?

"Hex" hexadecimal के लिए short है — एक numbering system जो everyday life में उपयोग किए जाने वाले base 10 के बजाय base 16 का उपयोग करता है। Base 10 में, digits 0 से 9 तक होते हैं। Base 16 में, digits 0 से 9 तक और फिर A से F तक letters के साथ continue होते हैं।

Hexadecimal	Decimal
0	0
9	9
A	10
B	11
F	15
10	16
FF	255

Base 16 क्यों? क्योंकि यह computer memory पर cleanly map होता है। Data का एक single byte — 8 binary bits — 0 से 255 तक values hold कर सकता है। Hexadecimal में, वही range ठीक दो digits में fit होती है: 00 से FF।

Hex Color Code की संरचना

एक standard hex color code की यह संरचना है:

# R R G G B B

Hash symbol (#) एक prefix है जो signal करता है "यह एक रंग है।" इसके बाद तीन pairs of hexadecimal digits आते हैं — प्रत्येक RGB color model के Red, Green, और Blue channels के लिए एक pair।

उदाहरण के लिए, #3B82F6 लें — एक vivid medium blue:

Part	Value	Decimal	Meaning
`3B`	Red	59	Low red — ज़्यादा warmth नहीं
`82`	Green	130	Moderate green
`F6`	Blue	246	Very high blue — dominant channel

एक Hex Code को एक नज़र में कैसे पढ़ें

कुछ general rules:

00 = zero intensity (इस channel में से कुछ नहीं) FF = full intensity (इस channel का maximum) 80 ≈ half intensity (255 में से 128)

#FF0000 — full red, no green, no blue → pure red
#00FF00 — no red, full green, no blue → pure green
#0000FF — no red, no green, full blue → pure blue
#FFFF00 — full red और green, no blue → yellow
#FF00FF — full red और blue, no green → magenta
#00FFFF — full green और blue, no red → cyan
#FFFFFF — सभी channels maximum पर → white
#000000 — सभी channels zero पर → black
#808080 — सभी channels आधे पर → medium gray

Shorthand Hex Notation

CSS तीन-character shorthand की अनुमति देता है जब hex digits का प्रत्येक pair एक repeated character है। उदाहरण के लिए, #AABBCC को #ABC के रूप में लिखा जा सकता है।

Shorthand	Full Equivalent
`#F00`	`#FF0000` (pure red)
`#0F0`	`#00FF00` (pure green)
`#00F`	`#0000FF` (pure blue)
`#FFF`	`#FFFFFF` (white)
`#000`	`#000000` (black)
`#369`	`#336699` (steel blue)

Alpha के साथ Hex: Eight-Character Hex Codes

Standard छह-character hex code में transparency information शामिल नहीं है। alpha channel (opacity) जोड़ने के लिए, CSS एक आठ-character hex format का समर्थन करता है जहां last two characters transparency निर्दिष्ट करते हैं।

Alpha Hex	Alpha Decimal	Opacity
`FF`	255	100% (fully opaque)
`CC`	204	80%
`99`	153	60%
`80`	128	~50%
`66`	102	40%
`33`	51	20%
`00`	0	0% (fully transparent)

50% opacity पर blue #3B82F6 उपयोग करने के लिए: #3B82F680।

Hex Alpha के Alternatives

Eight-character hex के व्यापक रूप से supported होने से पहले, transparency जोड़ने का standard तरीका rgba() था:

/* ये equivalent हैं */
background-color: #3B82F680;
background-color: rgba(59, 130, 246, 0.5);

Hex को अन्य Formats में Convert करना

Hex से RGB

प्रत्येक pair of hex digits के लिए, hexadecimal से decimal में convert करें: - #FF5733 → Red: FF = 255, Green: 57 = 87, Blue: 33 = 51 - CSS: rgb(255, 87, 51)

Hex से HSL

यह conversion अधिक involved है। Color Converter इसे instantly handle करता है।

Common Conversion Examples

रंग	HEX	RGB	HSL
Sky blue	#87CEEB	rgb(135, 206, 235)	hsl(197, 71%, 73%)
Tomato	#FF6347	rgb(255, 99, 71)	hsl(9, 100%, 64%)
Olive green	#6B8E23	rgb(107, 142, 35)	hsl(80, 60%, 35%)
Slate gray	#708090	rgb(112, 128, 144)	hsl(210, 13%, 50%)

CSS में Hex: Practical Usage

Hex codes CSS में हर जगह काम करते हैं जहां रंग value accepted है:

/* Text रंग */
color: #1A1A2E;

/* Background */
background-color: #F0E6D3;

/* Border */
border: 2px solid #3B82F6;

/* Box shadow */
box-shadow: 0 4px 12px #0000001A; /* black at ~10% opacity */

/* CSS custom properties के साथ */
:root {
  --brand-primary: #3B82F6;
  --brand-dark: #1D4ED8;
}

Case Sensitivity

Hex color codes CSS में case-insensitive हैं। #3B82F6, #3b82f6, और #3B82f6 सभी एक ही रंग को refer करते हैं।

Hex Codes कहां खोजें

Design tools। Figma, Sketch, और Adobe XD अपने color picker panels में hex codes display करते हैं।

Browser DevTools। किसी webpage पर किसी element को right-click करें और inspect करें।

ColorFYI color pages। ColorFYI पर प्रत्येक color detail page — जैसे /color/3B82F6/ — hex code को RGB, HSL, CMYK, और OKLCH values के साथ display करता है।

मुख्य बातें

एक hex color code एक छह-character hexadecimal number है जहां पहले दो characters Red channel encode करते हैं, middle दो Green encode करते हैं, और last दो Blue encode करते हैं।
प्रत्येक channel pair 00 (0 intensity) से FF (255 intensity) तक range करता है।
Three-character shorthand (#RGB) valid है जब प्रत्येक pair एक ही digit repeat करता है।
Eight-character hex (#RRGGBBAA) एक alpha transparency channel जोड़ता है।
किसी भी hex code को RGB, HSL, CMYK, या OKLCH में instantly translate करने के लिए Color Converter का उपयोग करें।
Hex codes CSS में case-insensitive हैं।