CSS वैध रंग मान
- पिछला पृष्ठ सीएसएस रंग
- अगला पृष्ठ सीएसएस डिफ़ॉल्ट मान
सीएसएस रंग
CSS में रंग को निम्नलिखित तरीके से निर्धारित किया जा सकता है:
- शिष्टांकित रंग
- पारदर्शी HEX रंग
- RGB रंग
- RGBA रंग
- HSL रंग
- #p4 {background-color: hsl(120, 60%, 70%);} /* हल्का हरा रंग */
- पूर्व-डिफाइन्ड/ब्राउज़र-अविभाज्य रंग नाम
- इसे उपयोग करके
currentcolor
शब्द
शिष्टांकित रंग
द्वारा #RRGGBB शिष्टांकित रंग को निर्धारित करें, जहां RR (लाल), GG (हरा) और BB (नीला) शिष्टांकित पूर्णांक संख्या रंग के कंपोनेंट (घटक) को निर्धारित करती हैं। सभी मान 00 से FF तक होने चाहिए。
उदाहरण में, #0000ff मान नीला प्रदर्शित होता है, क्योंकि blue कंपोनेंट को अधिकतम मान (ff) निर्धारित किया गया है, अन्य कंपोनेंट 00 के रूप में निर्धारित किए गए हैं。
उदाहरण
अलग-अलग HEX रंग को परिभाषित करें
#p1 {background-color: #ff0000;} /* लाल */ #p2 {background-color: #00ff00;} /* हरा */ #p3 {background-color: #0000ff;} /* नीला */
पारदर्शी HEX रंग
द्वारा #RRGGBB शिष्टांकित रंग को निर्धारित करें। पारदर्शिता बढ़ाने के लिए 00 और FF के बीच दो अतिरिक्त संख्या जोड़ें。
उदाहरण
पारदर्शी HEX रंग को परिभाषित करें
#p1a {background-color: #ff000080;} /* पारदर्शी लाल */ #p2a {background-color: #00ff0080;} /* पारदर्शी हरा */ #p3a {background-color: #0000ff80;} /* पारदर्शी नीला */
RGB रंग
RGB रंग मान द्वारा परिभाषित होता है rgb() फ़ंक्शननिर्धारित करें, व्याकरणिक रूपरेखा निम्नलिखित है:
rgb(red, हरा, blue)
प्रत्येक पैरामीटर (red, हरा, blueरंग की तीव्रता को परिभाषित करता है, जो 0 से 255 तक का पूर्णांक या प्रतिशत मान (0% से 100% तक) हो सकता है。
उदाहरण में, रंग rgb(0,0,255) नीला प्रदर्शित होता है, क्योंकि blue पैरामीटर को अधिकतम मान (255) निर्धारित किया गया है, अन्य पैरामीटर 0 के रूप में निर्धारित किए गए हैं。
इसके अलावा, निम्नलिखित मान एक समान रंग को निर्धारित करते हैं: rgb(0,0,255) और rgb(0%,0%,100%)।
उदाहरण
विभिन्न RGB रंग निर्धारित करें:
#p1 {background-color: rgb(255, 0, 0);} /* लाल */ #p2 {background-color: rgb(0, 255, 0);} /* हरा */ #p3 {background-color: rgb(0, 0, 255);} /* नीला */
RGBA रंग
RGBA रंग मान RGB रंग मान का विस्तार है, जिसमें Alpha चैनल है - वस्तु की अस्पष्टता को निर्धारित करता है。
RGBA रंग rgba() फ़ंक्शननिर्धारित करें, व्याकरणिक रूपरेखा निम्नलिखित है:
rgba(red, हरा, blue, alpha)
alpha आयाम 0.0 (पूर्ण अस्पष्टता) और 1.0 (पूर्ण अविभाज्यता) के बीच की संख्या है।
उदाहरण
अस्पष्ट रंगों को निर्धारित करें:
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* अस्पष्ट लाल */ #p2 {background-color: rgba(0, 255, 0, 0.3);} /* अस्पष्ट हरा */ #p3 {background-color: rgba(0, 0, 255, 0.3);} /* अस्पष्ट नीला */
HSL रंग
HSL यानी स्पर्श (hue), संतृप्ति (saturation) और चमकीलापन (lightness) - रंग के गोलाकार स्थानांकन को प्रतिनिधित्व करता है。
इसे उपयोग करके hsl() फ़ंक्शनHSL रंग निर्धारित करने के लिए फ़ंक्शन की व्याकरणिक रूपरेखा निम्नलिखित है:
hsl(hue, saturation, lightness)
स्पर्श रंग चक्र पर का डिग्री (0 से 360 तक) है - 0 (या 360) लाल है, 120 हरा है, 240 नीला है。
संतृप्ति एक प्रतिशत मान है; 0% ग्रे शीट है और 100% पूर्ण रंग है。
चमकीलापन एक प्रतिशत है; 0% काला है और 100% श्वेत है。
उदाहरण
विभिन्न HSL रंग निर्धारित करें:
#p1 {background-color: hsl(120, 100%, 50%);} /* हरा */ #p2 {background-color: hsl(120, 100%, 75%);} /* कमली हरा */ #p3 {background-color: hsl(120, 100%, 25%);} /* गहरा हरा */ #p4 {background-color: hsl(120, 60%, 70%);} /* 柔和的绿色 */
#p4 {background-color: hsl(120, 60%, 70%);} /* हल्का हरा रंग */
HSLA रंग
HSLA रंग मान HSL रंग मान का विस्तार है, जिसमें Alpha चैनल है - ऑब्जैक्ट की अस्पष्टता निर्दिष्ट करता है。 hsla() फ़ंक्शननिर्दिष्ट करें, इस फ़ंक्शन के व्याकरण निम्नांकित है:
hsla(hue, saturation, lightness, alpha)
alpha आयाम 0.0 (पूर्ण अस्पष्टता) और 1.0 (पूर्ण अविभाज्यता) के बीच की संख्या है।
उदाहरण
अस्पष्टता सहित विभिन्न HSL रंग निर्धारित करें:
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* अस्पष्टता सहित हरा रंग */ #p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* अस्पष्टता सहित हल्का रंग */ #p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* अस्पष्टता सहित गहरा रंग */ #p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* अस्पष्टता सहित कोयला रंग */
पूर्व-डिफाइन्ड/ब्राउज़र-अविभाज्य रंग नाम
HTML और CSS रंग नियम में 140 रंग नाम पूर्व-डिफाइन्ड हैं。
उदाहरण के लिए:blue
、red
、coral
、brown
जैसे:
उदाहरण
विभिन्न रंग नाम निर्धारित करें:
#p1 {background-color: blue;} #p2 {background-color: red;} #p3 {background-color: coral;} #p4 {background-color: brown;}
सभी पूर्व-डिफाइन्ड नाम की सूची हमारे रंग नाम संदर्भ पुस्तक में पाई जा सकती है。
currentcolor कीवर्ड
currentcolor
कीवर्ड रेफरेंस एलीमेंट के color एट्रिब्यूट का मान उदाहरण देता है。
उदाहरण
नीला रंग का बॉर्डर रंग होगा <div> एलीमेंट के टेक्स्ट रंग के कारण जो नीला है:
#myDIV { color: blue; /* नीला टेक्स्ट रंग */ border: 10px solid currentcolor; /* नीला बॉर्डर रंग */ }
- पिछला पृष्ठ सीएसएस रंग
- अगला पृष्ठ सीएसएस डिफ़ॉल्ट मान