CSS
रंग की

वाक्य - विन्यास

• रंग: #rgb
• रंग: #rrggbb
• रंग: आरजीबी [ए] (<लाल>, <हरा>, <नीला> [, <अल्फा>])
• रंग: hsl [a] (<hue>, <saturation%>, <lightness%> [, <अल्फा>])
• रंग: colorkeyword / * हरा, नीला, पीला, नारंगी, लाल, ..etc * /

रंग खोजशब्द

अधिकांश ब्राउज़र एक रंग निर्दिष्ट करने के लिए रंग खोजशब्दों का उपयोग करते हैं। उदाहरण के लिए, नीले color में एक तत्व का color सेट करने के लिए, blue कीवर्ड का उपयोग करें:

.some-class {
    color: blue;
}

CSS कीवर्ड संवेदनशील नहीं हैं- blue , Blue और BLUE सभी परिणाम #0000FF ।

रंग खोजशब्द

रंग का नाम	हेक्स मान	RGB मान	रंग
AliceBlue	# F0F8FF	rgb (240,248,255)
पीले और सफेद रंग का मिश्रण	# FAEBD7	rgb (250,235,215)
पानी	# 00FFFF	rgb (0,255,255)
अक्वामरीन	# 7FFFD4	rgb (127,255,212)
नीला	# F0FFFF	rgb (240,255,255)
बेज	# F5F5DC	rgb (245,245,220)
सूप	# FFE4C4	rgb (255,228,196)
काली	# 000000	rgb (0,0,0)
BlanchedAlmond	#FFEBCD	rgb (255,235,205)
नीला	# 0000FF	rgb (0,0,255)
नीला बेंगनी	# 8A2BE2	rgb (138,43,226)
भूरा	# A52A2A	rgb (165,42,42)
स्थूल लकड़ी	# DEB887	rgb (222,184,135)
CadetBlue	# 5F9EA0	rgb (95,158,160)
षाट्रेज़	# 7FFF00	rgb (127,255,0)
चॉकलेट	# D2691E	rgb (210,105,30)
मूंगा	# FF7F50	rgb (255,127,80)
नीले फूलों वाला जंगली पेड़ जैसा नीला रंग	# 6495ED	rgb (100,149,237)
मकई के भुट्टे के बाल	# FFF8DC	rgb (255,248,220)
गहरा लाल	# DC143C	rgb (220,20,60)
सियान	# 00FFFF	rgb (0,255,255)
गहरा नीला	# 00008B	rgb (0,0,139)
DarkCyan	# 008B8B	rgb (0,139,139)
DarkGoldenRod	# B8860B	rgb (184,134,11)
अंधेरे भूरा	# A9A9A9	rgb (169,169,169)
गहरा भूरा	# A9A9A9	rgb (169,169,169)
गहरा हरा	# 006,400	rgb (0,100,0)
DarkKhaki	# BDB76B	rgb (189,183,107)
DarkMagenta	# 8B008B	rgb (139,0,139)
DarkOliveGreen	# 556B2F	rgb (85,107,47)
गहरा नारंगी	# FF8C00	rgb (255,140,0)
DarkOrchid	# 9932CC	rgb (153,50,204)
गहरा लाल	# 8B0000	rgb (139,0,0)
DarkSalmon	# E9967A	rgb (233,150,122)
DarkSeaGreen	# 8FBC8F	rgb (143,188,143)
DarkSlateBlue	# 483D8B	rgb (72,61,139)
DarkSlateGray	# 2F4F4F	rgb (47,79,79)
DarkSlateGrey	# 2F4F4F	rgb (47,79,79)
DarkTurquoise	# 00CED1	rgb (0,206,209)
DarkViolet	# 9400D3	rgb (148,0,211)
गहरा गुलाबी	# FF1493	rgb (255,20,147)
DeepSkyBlue	# 00BFFF	rgb (0,191,255)
DimGray	# 696,969	rgb (105,105,105)
DimGrey	# 696,969	rgb (105,105,105)
चालाक नीला	# 1E90FF	rgb (30,144,255)
firebrick	# B22222	rgb (178,34,34)
FloralWhite	# FFFAF0	rgb (255,250,240)
हरे वन	# 228B22	rgb (34,139,34)
फ्यूशिया	# FF00FF	rgb (255,0,255)
Gainsboro	#DCDCDC	rgb (220,220,220)
GhostWhite	# F8F8FF	rgb (248,248,255)
सोना	# FFD700	rgb (255,215,0)
Goldenrod	# DAA520	rgb (218,165,32)
धूसर	# 808,080	rgb (128,128,128)
धूसर	# 808,080	rgb (128,128,128)
हरा	# 008000	rgb (0,128,0)
हरा पीला	# ADFF2F	rgb (173,255,47)
खरबूज़ा	# F0FFF0	rgb (240,255,240)
गरम गुलाबी	# FF69B4	rgb (255,105,180)
IndianRed	# CD5C5C	rgb (205,92,92)
नील	# 4B0082	rgb (75,0,130)
हाथी दांत	# FFFFF0	rgb (255,255,240)
हाकी	# F0E68C	rgb (240,230,140)
लैवेंडर	# E6E6FA	rgb (230,230,250)
LavenderBlush	# FFF0F5	rgb (255,240,245)
LawnGreen	# 7CFC00	rgb (124,252,0)
LemonChiffon	#FFFACD	rgb (255,250,205)
हल्का नीला	# ADD8E6	rgb (173,216,230)
LightCoral	# F08080	rgb (240,128,128)
हल्का हरित - नील	# E0FFFF	rgb (224,255,255)
LightGoldenRodYellow	# FAFAD2	rgb (250,250,210)
हल्का भूरा	# D3D3D3	rgb (211,211,211)
हल्का भूरा रंग	# D3D3D3	rgb (211,211,211)
हल्का हरा	# 90EE90	rgb (144,238,144)
हल्का गुलाबी	# FFB6C1	rgb (255,182,193)
LightSalmon	# FFA07A	rgb (255,160,122)
LightSeaGreen	# 20B2AA	rgb (32,178,170)
LightSkyBlue	# 87CEFA	rgb (135,206,250)
LightSlateGray	# 778,899	rgb (119,136,153)
LightSlateGrey	# 778,899	rgb (119,136,153)
LightSteelBlue	# B0C4DE	rgb (176,196,222)
पीली रोशनी	# FFFFE0	rgb (255,255,224)
चूना	# 00FF00	rgb (0,255,0)
पीला हरा रंग	# 32CD32	rgb (50,205,50)
लिनन	# FAF0E6	rgb (250,240,230)
मैजेंटा	# FF00FF	rgb (255,0,255)
लाल रंग	# 800000	rgb (128,0,0)
MediumAquaMarine	# 66CDAA	rgb (102,205,170)
MediumBlue	# 0000CD	rgb (0,0,205)
MediumOrchid	# BA55D3	rgb (186,85,211)
MediumPurple	# 9370DB	rgb (147,112,219)
MediumSeaGreen	# 3CB371	rgb (60,179,113)
MediumSlateBlue	# 7B68EE	rgb (123,104,238)
MediumSpringGreen	# 00FA9A	rgb (0,250,154)
MediumTurquoise	# 48D1CC	rgb (72,209,204)
MediumVioletRed	# C71585	rgb (199,21,133)
आधी रात जैसा नीला	# 191,970	rgb (25,25,112)
MintCream	# F5FFFA	rgb (245,255,250)
MistyRose	# FFE4E1	rgb (255,228,225)
Moccasin	# FFE4B5	rgb (255,228,181)
NavajoWhite	#FFDEAD	rgb (255,222,173)
नौसेना	# 000,080	rgb (0,0,128)
OldLace	# FDF5E6	rgb (253,245,230)
जैतून	# 808,000	rgb (128,128,0)
ऑलिव ड्रैब	# 6B8E23	rgb (107,142,35)
संतरा	# FFA500	rgb (255,165,0)
नारंगी लाल	# FF4500	rgb (255,69,0)
आर्किड	# DA70D6	rgb (218,112,214)
PaleGoldenRod	# EEE8AA	rgb (238,232,170)
हल्का हरा	# 98FB98	rgb (152,251,152)
पेप	#AFEEEE	rgb (175,238,238)
PaleVioletRed	# DB7093	rgb (219,112,147)
PapayaWhip	# FFEFD5	rgb (255,239,213)
PeachPuff	# FFDAB9	rgb (255,218,185)
पेरू	# CD853F	rgb (205,133,63)
गुलाबी	# FFC0CB	rgb (255,192,203)
बेर	# DDA0DD	rgb (221,160,221)
PowderBlue	# B0E0E6	rgb (176,224,230)
बैंगनी	# 800,080	rgb (128,0,128)
RebeccaPurple	# 663399	rgb (102,51,153)
लाल	# FF0000	rgb (255,0,0)
RosyBrown	# BC8F8F	rgb (188,143,143)
शाही नीला	# 4169E1	rgb (65,105,225)
ब्राउन जीन	# 8B4513	rgb (139,69,19)
सैल्मन	# FA8072	rgb (250,128,114)
SandyBrown	# F4A460	rgb (244,164,96)
समुद्र हरा	# 2E8B57	rgb (46,139,87)
सागर की कौड़ी	# FFF5EE	rgb (255,245,238)
सिएना	# A0522D	rgb (160,82,45)
चांदी	# C0C0C0	rgb (192,192,192)
आसमानी नीला	# 87CEEB	rgb (135,206,235)
स्लेटी छाया वाला नीला रंग	# 6A5ACD	rgb (106,90,205)
तखती स्लेटी	# 708,090	rgb (112,128,144)
ग्रे तख्ती	# 708,090	rgb (112,128,144)
हिमपात	#FFFAFA	rgb (255,250,250)
हरा बसंत	# 00FF7F	rgb (0,255,127)
इस्पात नीला	# 4682B4	rgb (70,130,180)
टैन	# D2B48C	rgb (210,180,140)
टील	# 008,080	rgb (0,128,128)
थीस्ल	# D8BFD8	rgb (216,191,216)
टमाटर	# FF6347	rgb (255,99,71)
फ़िरोज़ा	# 40E0D0	rgb (64,224,208)
बैंगनी	# EE82EE	rgb (238,130,238)
गेहूँ	# F5DEB3	rgb (245,222,179)
सफेद	#FFFFFF	rgb (255,255,255)
सफेद धुआं	# F5F5F5	rgb (245,245,245)
पीला	# FFFF00	rgb (255,255,0)
पीला हारा	# 9ACD32	rgb (154,205,50)

नामित रंगों के अलावा, transparent कीवर्ड भी है, जो पूरी तरह से पारदर्शी काले रंग का प्रतिनिधित्व करता है: rgba(0,0,0,0)

हेक्साडेसिमल मान

पृष्ठभूमि

सीएसएस रंगों को हेक्स ट्रिपल के रूप में भी दर्शाया जा सकता है, जहां सदस्य एक रंग के लाल, हरे और नीले घटकों का प्रतिनिधित्व करते हैं। इनमें से प्रत्येक मान 00 से FF की सीमा में एक संख्या या दशमलव संकेतन में 0 से 255 का प्रतिनिधित्व करता है। अपरकेस और / या निचले हेक्सिडेसिमल मानों का उपयोग किया जा सकता है (यानी #3fc = #3FC = #33ffCC )। ब्राउज़र #369 को #336699 रूप में व्याख्या #336699 । यदि वह ऐसा नहीं है जो आप चाहते थे, बल्कि #306090 चाहते थे, तो आपको स्पष्ट रूप से निर्दिष्ट करने की आवश्यकता है।

हेक्स नोटेशन के साथ प्रतिनिधित्व किए जाने वाले रंगों की कुल संख्या 256 ^ 3 या 16,777,216 है।

वाक्य - विन्यास

color: #rrggbb;
color: #rgb

.some-class {
    /* This is equivalent to using the color keyword 'blue' */
    color: #0000FF;
}

.also-blue {
    /* If you want to specify each range value with a single number, you can!
       This is equivalent to '#0000FF' (and 'blue') */
    color: #00F;
}

हेक्साडेसिमल नोटेशन का उपयोग आरजीबी रंग प्रारूप में, डब्ल्यू 3 सी के 'न्यूमेरिकल रंग मूल्यों' के अनुसार रंग मूल्यों को निर्दिष्ट करने के लिए किया जाता है।

हेक्साडेसिमल (या बस हेक्स) रंग मूल्यों को देखने के लिए इंटरनेट पर बहुत सारे उपकरण उपलब्ध हैं।

विकल्पों का एक समूह खोजने के लिए अपने पसंदीदा वेब ब्राउज़र के साथ " हेक्स कलर पैलेट " या " हेक्स कलर पिकर " खोजें!

हेक्स मान हमेशा एक पाउंड साइन (#) के साथ शुरू होते हैं, छह "अंकों" तक लंबे होते हैं, और केस-असंवेदनशील होते हैं: अर्थात, वे पूंजीकरण के बारे में परवाह नहीं करते हैं। #FFC125 और #ffc125 एक ही रंग के हैं।

rgb () संकेतन

RGB एक एडिटिव कलर मॉडल है जो लाल, हरे और नीले प्रकाश के मिश्रण के रूप में रंगों का प्रतिनिधित्व करता है। संक्षेप में, आरजीबी प्रतिनिधित्व हेक्साडेसिमल नोटेशन के दशमलव बराबर है। हेक्साडेसिमल में प्रत्येक संख्या 00-एफएफ से होती है जो दशमलव में 0-255 और प्रतिशत में 0% -100% के बराबर होती है।

.some-class {
    /* Scalar RGB, equivalent to 'blue'*/
    color: rgb(0, 0, 255);
}

.also-blue {
    /* Percentile RGB values*/
    color: rgb(0%, 0%, 100%);
}

वाक्य - विन्यास

rgb(<red>, <green>, <blue>)

hsl () संकेतन

एचएसएल का अर्थ है ह्यू ("कौन सा रंग"), संतृप्ति ("कितना रंग") और लपट ("कितना सफेद")।

ह्यू को 0 ° से 360 ° (इकाइयों के बिना) के कोण के रूप में दर्शाया गया है, जबकि संतृप्ति और लपट को प्रतिशत के रूप में दर्शाया गया है।

p {
    color: hsl(240, 100%, 50%); /* Blue */
}

वाक्य - विन्यास

color: hsl(<hue>, <saturation>%, <lightness>%);

टिप्पणियाँ

• 0% की संतृप्ति हमेशा एक ग्रेस्केल रंग का उत्पादन करती है; रंग बदलने से कोई प्रभाव नहीं पड़ता है।

• 0% की हल्कापन हमेशा काला पैदा करता है, और 100% हमेशा सफेद पैदा करता है; ह्यू या संतृप्ति को बदलने का कोई प्रभाव नहीं है।

currentColor

currentColor वर्तमान तत्व की गणना रंग मान देता है।

एक ही तत्व में उपयोग करें

वर्तमान में color संपत्ति red करने के लिए सेट होने के बाद से वर्तमान color लाल का मूल्यांकन करता है:

div {
   color: red;     
   border: 5px solid currentColor;
   box-shadow: 0 0 5px currentColor;
}

इस स्थिति में, बॉर्डर के लिए करंट को निर्दिष्ट करने की संभावना सबसे अधिक बेमानी है क्योंकि इसे छोड़ने पर समान परिणाम प्राप्त होने चाहिए। केवल उसी तत्व के भीतर बॉर्डर प्रॉपर्टी के अंदर करेंट-चॉकोर का उपयोग करें यदि वह अधिक विशिष्ट चयनकर्ता के कारण अन्यथा अधिलेखित हो जाएगा।

चूंकि यह गणना का रंग है, इसलिए पहला नियम ओवरराइड करने वाले दूसरे नियम के कारण सीमा निम्न उदाहरण में हरा होगा:

div {
   color: blue;
   border: 3px solid currentColor; 
   color: green;
}

मूल तत्व से निहित

माता-पिता का रंग विरासत में मिला है, यहाँ वर्तमान रंग 'ब्लू' का मूल्यांकन करता है, जिससे बाल तत्व का बॉर्डर-रंग नीला हो जाता है।

.parent-class {
    color: blue;
}

.parent-class .child-class {
    border-color: currentColor;
}

currentColor का उपयोग अन्य नियमों द्वारा भी किया जा सकता है जो सामान्य रूप से रंग संपत्ति से विरासत में नहीं आते हैं, जैसे कि पृष्ठभूमि-रंग। नीचे दिए गए उदाहरण में बच्चों को इसकी पृष्ठभूमि के रूप में माता-पिता में रंग सेट का उपयोग करते हुए दिखाया गया है:

.parent-class {
    color: blue;
}

.parent-class .child-class {
    background-color: currentColor;
}

संभावित परिणाम:

rgba () संकेतन

आरजीबी () संकेतन के समान , लेकिन एक अतिरिक्त अल्फा (अस्पष्टता) मूल्य के साथ।

.red {
    /* Opaque red */
    color: rgba(255, 0, 0, 1);
}

.red-50p {
    /* Half-translucent red. */
    color: rgba(255, 0, 0, .5);
}

वाक्य - विन्यास

rgba(<red>, <green>, <blue>, <alpha>);

hsla () संकेतन

Hsl () संकेतन के समान , लेकिन एक अतिरिक्त अल्फा (अस्पष्टता) मान के साथ।

hsla(240, 100%, 50%, 0)     /* transparent */
hsla(240, 100%, 50%, 0.5)   /* half-translucent blue */
hsla(240, 100%, 50%, 1)     /* fully opaque blue */

वाक्य - विन्यास

hsla(<hue>, <saturation>%, <lightness>%, <alpha>);