Gray बनाम Grey: वर्तनी, Shades, और Color Codes

क्या यह "gray" है या "grey"? उत्तर पूरी तरह इस बात पर निर्भर करता है कि आप Atlantic के किस तरफ हैं — और code में आप जो चुनते हैं, आप जिस convention का पालन करते हैं उसके आधार पर, अलग परिणाम उत्पन्न कर सकता है। यह उन रंग प्रश्नों में से एक है जहां वर्तनी वास्तव में technical contexts में मायने रखती है।

American बनाम British वर्तनी: Gray बनाम Grey

वर्तनी का अंतर American बनाम British English divergence के सबसे स्पष्ट उदाहरणों में से एक है:

Variety	पसंदीदा वर्तनी
American English	gray
British English	grey
Canadian English	grey (British influence)
Australian English	grey (British influence)
South African English	grey (British influence)

एक useful mnemonic: grAy is American, grEy is European। Vowels A और E continents पर map होते हैं।

Web contexts में "gray" का हल्का फायदा है क्योंकि यह CSS specification की पसंदीदा वर्तनी है।

CSS Named Colors: Gray Standard है

CSS में, दोनों वर्तनी accepted हैं, लेकिन वे हमेशा एक ही रंग को refer नहीं करतीं — जो एक subtle technical hazard बनाता है।

CSS Gray Family

CSS Name	Hex	Notes
`gainsboro`	#DCDCDC	Very light gray
`lightgray` / `lightgrey`	#D3D3D3	Same रंग, दो spellings
`silver`	#C0C0C0	Medium-light gray
`darkgray` / `darkgrey`	#A9A9A9	Same रंग, दो spellings
`gray`	#808080	Mid-gray — केवल "gray" spelling
`grey`	#808080	CSS में `gray` के समान
`dimgray` / `dimgrey`	#696969	Same रंग, दो spellings
`slategray` / `slategrey`	#708090	Slightly blue-gray
`darkslategray` / `darkslategrey`	#2F4F4F	Dark blue-gray
`lightslategray` / `lightslategrey`	#778899	Light blue-gray

Gray "Gray" क्या बनाता है? Technical Reality

एक pure gray — technically achromatic रंग कहा जाता है — के सभी तीन RGB channels में equal values होती हैं। जब red, green, और blue समान होते हैं, तो परिणाम कोई hue के बिना एक neutral होता है:

RGB Pattern	Hex	रंग
`rgb(255, 255, 255)`	#FFFFFF	White
`rgb(192, 192, 192)`	#C0C0C0	Silver
`rgb(128, 128, 128)`	#808080	Middle gray
`rgb(64, 64, 64)`	#404040	Dark gray
`rgb(0, 0, 0)`	#000000	Black

Gray के 50 Shades: Spectrum में Key Hex Codes

Shade	Hex	RGB	Description
Near-white	#F8F8F8	`rgb(248, 248, 248)`	Barely-gray white
Ghost white	#F5F5F5	`rgb(245, 245, 245)`	Common page background
Gainsboro	#DCDCDC	`rgb(220, 220, 220)`	Classic light gray
Light gray	#D3D3D3	`rgb(211, 211, 211)`	CSS `lightgray`
Silver	#C0C0C0	`rgb(192, 192, 192)`	Metallic reference
Gray (CSS)	#808080	`rgb(128, 128, 128)`	True mid-gray
Dim gray	#696969	`rgb(105, 105, 105)`	CSS `dimgray`
Accessibility gray	#767676	`rgb(118, 118, 118)`	White पर AA text के लिए minimum
Charcoal	#36454F	`rgb(54, 69, 79)`	Cool dark gray
Almost black	#1A1A1A	`rgb(26, 26, 26)`	Pure black से Softer

महत्वपूर्ण Accessibility Gray: #767676

यह specific gray web design में असाधारण महत्व रखता है: यह सबसे हल्का gray है जो white #FFFFFF के खिलाफ 4.5:1 contrast ratio achieve करता है, जो normal text के लिए WCAG AA minimum है।

CSS gray (#808080) technically WCAG AA fail करता है — यह white के खिलाफ केवल लगभग 3.95:1 contrast ratio achieve करता है।

Cool बनाम Warm Gray: डिज़ाइनर का असली सवाल

Cool grays नीले, हरे, या बैंगनी की ओर झुकते हैं। वे sleek, modern, और clinical feel करते हैं।

Warm grays लाल, नारंगी, या पीले की ओर झुकते हैं। वे natural, approachable, और earthy feel करते हैं।

Warm बनाम Cool Gray Examples

Category	Hex	RGB Analysis	Character
Cool blue-gray	#708090	Blue slightly higher	Slate, corporate
Cool purple-gray	#9E9EAE	Blue+red above green	Modern, minimal
Neutral gray	#808080	Exactly equal R=G=B	Pure, achromatic
Warm yellow-gray	#9B9B8A	Red+green above blue	Earthy, natural
Warm brown-gray	#8A8070	Red highest, blue lowest	Greige, organic

Hex Code से Warm बनाम Cool Gray कैसे Identify करें

RGB values देखें: - यदि blue सबसे ऊंचा है → cool gray - यदि red या green सबसे ऊंचा है → warm gray - यदि सभी तीन equal हैं → neutral gray

Modern Web Design में Gray

Gray web design में arguably सबसे महत्वपूर्ण रंग है।

Web Design Systems के लिए व्यावहारिक Gray Values

Use Case	Recommended Hex	Notes
Page background (light mode)	#F5F5F5	Barely gray, very clean
Card background	#F9F9F9	Page bg से थोड़ा lighter
Border रंग	#E5E5E5	Visible लेकिन subtle
Muted text / captions	#6B7280	Tailwind का gray-500
Body text (accessible)	#374151	Tailwind का gray-700
Heading text	#111827	Near-black, warm
Dark mode background	#1F2937	Tailwind का gray-800

Dark Mode Gray Strategy

Dark mode design में careful gray selection की आवश्यकता है। Pure black #000000 को dark mode background के रूप में उपयोग करने की temptation को resist करें:

Dark mode backgrounds #121212 से #1E1E1E range में सबसे अच्छा काम करते हैं
Dark mode surfaces background से एक या दो step lighter होने चाहिए
Dark backgrounds पर text warm off-whites (#E8E8E8 से #F5F5F5) में सबसे अच्छा काम करता है

Gray Shades को Color Models में Convert करना

किसी भी truly achromatic gray के लिए, CMYK और अन्य models predictably behave करते हैं:

Gray	HEX	RGB	HSL	CMYK
White	#FFFFFF	`rgb(255,255,255)`	`hsl(0,0%,100%)`	`C:0 M:0 Y:0 K:0`
Light gray	#D3D3D3	`rgb(211,211,211)`	`hsl(0,0%,83%)`	`C:0 M:0 Y:0 K:17`
Medium gray	#808080	`rgb(128,128,128)`	`hsl(0,0%,50%)`	`C:0 M:0 Y:0 K:50`
Dark gray	#404040	`rgb(64,64,64)`	`hsl(0,0%,25%)`	`C:0 M:0 Y:0 K:75`

मुख्य बातें

Spelling: "Gray" American English है; "grey" British English है। CSS में, दोनों spellings valid हैं।
Technical definition: एक true achromatic gray में equal RGB channels (R=G=B) और 0% HSL saturation है।
Accessibility critical threshold: #767676 सबसे हल्का gray है जो WCAG AA (4.5:1) pass करता है white पर text के रूप में।
Warm बनाम cool identification: यदि blue channel सबसे ऊंचा है → cool gray। यदि red/green सबसे ऊंचा है → warm gray।
एक complete gray scale बनाने के लिए shade generator का उपयोग करें और किसी भी gray को CMYK, HSL, RGB, या OKLCH में translate करने के लिए converter का उपयोग करें।