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; /* नीला बॉर्डर रंग */
}

स्वयं आयात करें