CSS3 Color Property Hindi – RGB, RGBA, HSL, HSLA property CSS

by
Table of Contents hide
1 CSS3 Color Property
1.1 rgb (red green blue)
1.2 rgba color property
1.3 hsl color property
1.4 hsla color property
2 अन्य CSS3 Tutorial

CSS3 Color Property

CSS में किसी element को color देने के लिए colorname या फिर hexacode का इस्तेमाल किया जाता था | कुछ वेबब्राउज़र सारे colorname को support नहीं कर पाता है | इसीलिए CSS3 में और नए color properties को लाया गया | जिससे user को ज्यादा option मिली color इस्तेमाल करने के लिए |

नए CSS3 color properties हैं

  1. rgb (red green blue)
  2. rgba (red green blue alpha)
  3. hsl (hue saturation lightness)
  4. hsla (hue saturation lightness alpha)

rgb (red green blue)

html में सारे colors 3 color के combination से बनती है वो है red, green और blue | इन 3 color की intensity को 0 से लेकर 255 के अंदर दी जाती है जिससे अलग अलग color बनती है | अगर सारे values 0 दी जाए तो black color बनेगा और अगर सारे values 255 दी जाए तो white color बनेगा |

उदाहरण:

<!doctype html>
<html>
 <head>
   <title>CSS3 Color Example</title>
   <style>
    p{padding:15px; margin:15px;color:white;}
    body{background-image:url("backgroundimage.jpg");
   </style>
 </head>
 <body>
   <p style="background-color: rgb(0,0,0);">RGB Color Example</p>
   <p style="background-color: rgb(255,255,255); color:black;">RGB Color Example</p>
   <p style="background-color: rgb(100,100,0);">RGB Color Example</p>   
 </body>
</html>

output

css rgb color example

rgba color property

rgba color property rgb की तरह है पर इसमें एक extra value दी जाती है opacity के लिए |

rgb (red green blue alpha)

a यानि alpha value दर्शाता है color की opacity को | color की transparency कितनी रहेगी उसे 0.0 से लेकर 1 के बिच लिखी जाती है | अगर value 1 दी गयी तो opacity बिलकुल नहीं रहेगी | और 1 से कम की value opacity यानि color की transparency बताएगी |

जितनी कम value दी जायेगी उतना ही color transparent होता जाएगा और पीछे की background दिखेगी |

उदाहरण:

<!doctype html>
<html>
 <head>
   <title>CSS3 Color Example</title>
   <style>
        p{padding:15px; margin:15px;color:white;}
	body{background-image:url("backgroundimage.jpg");
   </style>
 </head>
 <body>
   <p style="background-color: rgb(0,0,255);">RGB Color Example</p>
   <p style="background-color: rgba(0,0,255,0.2);">RGBA Color Example</p>
 </body>
</html>

output

उदाहरण में देखिये दोनों पैराग्राफ की background color blue दी गयी है | पर दूसरी पैराग्राफ में opacity 0.2 देने की वजह से color transparent हो कर दिख रहा है और पीछे की background image दिखाई दे रही है |

hsl color property

hsl जो denote करता है hue, saturation और lightness को |

hue से color की value दी जाती है और इसे 0 से 360 डिग्री के हिसाब से दी जाती है |

0 दर्शाता है red color को, 120 दर्शाता है green color को और 240 दर्शाता है blue color को |

saturation का इस्तेमाल shade देने के लिए किआ जाता है और इसकी value percentage से बताई जाती है | saturation से color की intensity सेट की जाती है | ये gray shade, color में देता है | अगर इसकी value 0% रखी गयी तो पूरी तरह से gray shade आएगी color पे और अगर 100% रखी गयी तो कोई भी gray shade नहीं दिखेगी, color सिर्फ दिखेगी बिना shade के|

lightness का इस्तेमाल color में light डालने के लिए होता है | इसे भी percentage से सेट की जाती है | 0% lightness मतलब color पे पूरी light आती है और color बिलकुल नहीं दीखता, वैसे ही अगर 100% lightness दी जाए तो darkness सेट हो जाती है | और color हट कर सिर्फ काला रंग दिखेगा | darkness से lightness करने के lightness value का इस्तेमाल होता है |

उदाहरण:

<!doctype html>
<html>
 <head>
   <title>CSS3 Color Example</title>
   <style>
    p{padding:15px; margin:15px;}
    body{background-image:url("backgroundimage.jpg");
   </style>
 </head>
 <body>
   <p style="background-color: hsl(0, 100%, 50%);">HSL Color Example</p>
   <p style="background-color: hsl(0, 60%, 80%);">HSL Second Example</p>
 </body>
</html>

output

hsla color property

hsla दर्शाता है hue saturation lightness alpha को | ये hsl color property की तरह काम करता है | पर इसमें color में transparency दी जा सकती है जिसके लिए alpha value का इस्तेमाल होता है |

इसीलिए hsla की a (alpha) value opacity या transparency को दर्शाता है | और इस value को 0.0 से लेकर 1.0 के अंदर सेट की जाती है | 1.0 मतलब कोई transparency नहीं रहेगी और जैसे value 1.0 से कम होती जाएगी वैसे ही transparency बढती जायेगी |

उदाहरण:

<!doctype html>
<html>
 <head>
   <title>CSS3 Color Example</title>
   <style>
        p{padding:15px; margin:35px; color:white;}
	body{background-image:url("backgroundimage.jpg");
   </style>
 </head>
 <body>
   <p style="background-color: hsla(240,60%,50%,1);">HSLA Color With No Opacity</p>
   <p style="background-color: hsla(240,60%,50%, 0.6);">HSLA Color With 0.6 Opacity</p>
   <p style="background-color: hsla(240,60%,50%, 0.4);">HSLA Color With 0.4 Opacity</p>
   <p style="background-color: hsla(240,60%,50%, 0.2);">HSLA Color With 0.2 Opacity</p>
 </body>
</html>

output

hsla color property example

अन्य CSS3 Tutorial