CSS3 RGBA, HSL এবং HSLA রঙ মান

CSS3-এ রঙ নির্ধারণের জন্য RGBA, HSL এবং HSLA ব্যবহার করা যায়।

RGBA রঙ মান

RGBA = Red, Green, Blue, Alpha। Alpha হলো অপাসিটি (০.০ থেকে ১.০)। ১.০ = পুরোপুরি অপেক (opaque)।

উদাহরণ: RGBA

<!DOCTYPE html> <html> <head> <style> #demo1 {background-color:rgba(108,111,35,0.6);} #demo2 {background-color:rgba(108,111,35,0.5);} #demo3 {background-color:rgba(108,111,35,0.4);} #demo4 {background-color:rgba(108,111,35,0.3);} #demo5 {background-color:rgba(108,111,35,0.2);} #demo6 {background-color:rgba(108,111,35,0.1);} </style> </head> <body> <h1>Cricketers</h1> <p id="demo1">David Warner</p> <p id="demo2">Steve Smith</p> <p id="demo3">Mark Waugh</p> <p id="demo4">Steve Waugh</p> <p id="demo5">David Johnson</p> <p id="demo6">Andy Bichel</p> </body> </html>

আউটপুট

HSL রঙ মান

HSL = Hue, Saturation, Lightness।

• Hue: ০ থেকে ৩৬০ (০/৩৬০ = লাল, ১২০ = সবুজ, ২৪০ = নীল)
• Saturation: শতাংশ (০% = গ্রে, ১০০% = পূর্ণ রঙ)
• Lightness: শতাংশ (০% = কালো, ১০০% = সাদা, ৫০% = সাধারণ)

উদাহরণ: HSL

<!DOCTYPE html> <html> <head> <style> #demo1 {background-color: hsl(150, 100%, 50%);} #demo2 {background-color: hsl(150, 100%, 50%);} #demo3 {background-color: hsl(140, 100%, 40%);} #demo4 {background-color: hsl(120, 100%, 40%);} #demo5 {background-color: hsl(120, 100%, 30%);} #demo6 {background-color:rgba(108,111,35,0.6);} </style> </head> <body> <h1>Cricketers</h1> <p id="demo1">David Warner</p> <p id="demo2">Steve Smith</p> <p id="demo3">Mark Waugh</p> <p id="demo4">Steve Waugh</p> <p id="demo5">David Johnson</p> <p id="demo6">Andy Bichel</p> </body> </html>

আউটপুট

HSLA রঙ মান

HSLA = Hue, Saturation, Lightness, Alpha। Alpha = অপাসিটি (০.০ = স্বচ্ছ, ১.০ = অপেক)।

উদাহরণ: HSLA

<!DOCTYPE html> <html> <head> <style> #demo1 {background-color: hsla(140, 100%, 50%, 0.8);} #demo2 {background-color: hsla(130, 100%, 50%, 0.6);} #demo3 {background-color: hsla(190, 100%, 50%, 0.4);} #demo4 {background-color: hsla(170, 100%, 50%, 0.3);} #demo5 {background-color: hsl(150, 100%, 60%);} #demo6 {background-color:rgba(108,111,35,0.6);} </style> </head> <body> <h1>Cricketers</h1> <p id="demo1">David Warner</p> <p id="demo2">Steve Smith</p> <p id="demo3">Mark Waugh</p> <p id="demo4">Steve Waugh</p> <p id="demo5">David Johnson</p> <p id="demo6">Andy Bichel</p> </body> </html>

আউটপুট

সারসংক্ষেপ