सीएसएस रंग

CSS समर्थन 140 से अधिक रंग नामऔर हेक्साडेसिमल मान, RGB मान, RGBA मान, HSL मान, HSLA मान और अविरतता शामिल हैं。

RGBA रंग

RGBA रंग रंगशूला रंग के विस्तार है, जिसमें alpha चैनल है - इस चैनल द्वारा रंग की अविरतता परिभाषित की जाती है。

RGBA रंग इस तरह से निर्धारित किया जाता है: rgba(लाल, हरा, नीला, अल्फा)。 अल्फा पारामीटर 0.0 (पूर्ण ट्रांसपरेंट) और 1.0 (पूर्ण अविरत) के बीच के अंक हैं。

rgba(255, 0, 0, 0.2);
rgba(255, 0, 0, 0.4);
rgba(255, 0, 0, 0.6);
rgba(255, 0, 0, 0.8);

नीचे के उदाहरण में अलग-अलग RGBA रंग को परिभाषित किया गया है:

इंस्टेंस

#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(hue, saturation, lightness).

रंग रूप रूपण पर के डिग्री है (0 से 360 तक):

  • 0 (या 360) लाल है
  • 120 हरा है
  • 240 नीला है

सातत्य एक प्रतिशत मान है: 100% पूर्ण रंग है。

चमकीलाई भी एक प्रतिशत मान है: 0% गहरा रंग (काला) है और 100% श्वेत है。

hsl(0, 100%, 30%);
hsl(0, 100%, 50%);
hsl(0, 100%, 70%);
hsl(0, 100%, 90%);

नीचे के उदाहरण में विभिन्न 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%);}   /* हल्का हरा */

स्वयं प्रयोग करें

HSLA रंग

HSLA रंग मान HSL रंग मानों का एक विस्तार है - यह रंग की अवरोधकता को परिभाषित करता है।

HSLA रंग मान HSLA(hue, saturation, lightness, alpha) पारामीटरों द्वारा निर्धारित होती है, जहां alpha पारामीटर अवरोधकता को परिभाषित करता है। alpha पारामीटर 0.0 (पूर्ण ट्रांसपरेंट) और 1.0 (पूर्ण अटोक्ल्यूरेंट) के बीच का संख्या है।

hsla(0, 100%, 30%, 0.3);
hsla(0, 100%, 50%, 0.3);
hsla(0, 100%, 70%, 0.3);
hsla(0, 100%, 90%, 0.3);

नीचे के उदाहरण में विभिन्न HSLA रंगों को परिभाषित किया गया है:

इंस्टेंस

#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);}   /* अवरोधकता वाला हल्का हरा */

स्वयं प्रयोग करें

अवरोधकता

CSS opacity गुणवैशिष्ट्य पूरे एलिमेंट की अवरोधकता (पृष्ठभूमि रंग और लिखाई अवरोधक/ट्रांसपरेंट होंगे) सेट करता है।

opacity गुणवैशिष्ट्य की मान होनी चाहिए 0.0 (पूर्ण ट्रांसपरेंट) और 1.0 (पूर्ण अटोक्ल्यूरेंट) के बीच का संख्या होना चाहिए。

rgb(255, 0, 0); opacity:0.2;
rgb(255, 0, 0); opacity:0.4;
rgb(255, 0, 0); opacity:0.6;
rgb(255, 0, 0); opacity:0.8;

ध्यान दें कि ऊपरी लेख भी पारदर्शी/अवरोधकता वाला होगा!

नीचे का उदाहरण अवरोधकता वाले विभिन्न एलिमेंटों को दिखाता है:

इंस्टेंस

#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* अवरोधकता वाला लाल */
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* अवरोधकता वाला हरा */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* अवरोधकता वाला नीला */

स्वयं प्रयोग करें