CSS از اسامی رنگ ها، رنگ ها به صورت hexadecimal (هگزا) و RGB پشتیبانی می کند.
CSS3 علاوه بر موارد فوق گزینه های زیر را نیز پشتیبانی می کند :
-
RGBA colors
-
HSL colors
-
HSLA colors
-
opacity
پشتیبانی مرورگرها
در جدول زیر اسامی مرورگرهایی که بطور کامل خاصیت color را در CSS3 پشتیبانی می کنند به همراه ورژن آنها آورده شده:
|
Color value/Property |
|
|
|
|
|
|
RGBA, HSL, and HSLA |
9.0 |
4.0 |
3.0 |
3.1 |
10.1 |
|
opacity |
9.0 |
4.0 |
2.0 |
3.1 |
10.1
|
رنگ های RGBA
رنگ های RGBA شکل گسترده تری از رنگ های RGB هستند که به همراه یک کانال آلفا ( برای مشخص کردن شفافیت رنگ ) می آیند:
(rgba (red, green, blue, alpha
پارامتر alpha عددی است بین صفر ( کاملا شفاف ) و یک (رنگ کامل و بدون شفافیت).
مثال :
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue with opacity */
رنگ های HSL
HSL مخفف Hue، Saturation و Lightness .
مقدار HSL به این صورت مشخص می شود: (hsl (hue, saturation, lightness
1. Hue درجه رنگ است ( از 0 تا 360 )
-
0 (یا 360 ) : قرمز
-
120 : سبز
-
240 : آبی
2. Saturation مقدار بر حسب درصد است: ( 100%، رنگ کامل است )
3. Lightness نیز بر حسب درصد می باشد: (0% سیاه و 100% سفید )
مثال :
#p1 {background-color: hsl(120, 100%, 50%);} /* green */
#p2 {background-color: hsl(120, 100%, 75%);} /* light green */
#p3 {background-color: hsl(120, 100%, 25%);} /* dark green */
#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */
رنگ های HSLA
رنگ های HSLA شکل گسترده تری از رنگ های HSL هستند که به همراه یک کانال آلفا ( برای مشخص کردن شفافیت رنگ ) می آیند:
(hsla (hue, saturation, lightness, alpha
پارامتر alpha که شفافیت رنگ را تعیین می کند عددی است بین صفر ( کاملا شفاف ) و یک (رنگ کامل و بدون شفافیت).
مثال :
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green with opacity */
خاصیت Opacity در CSS3
خاصیت Opacity میزان شفافیت را برای رنگ های RGB تنظیم می کند.
مقدار این خاصیت باید عددی باشد بین صفر ( کاملا شفاف ) و یک (رنگ کامل و بدون شفافیت) .
مثال :
#p1 {background-color:rgb(255,0,0);opacity:0.6;} /* red with opacity */
#p2 {background-color:rgb(0,255,0);opacity:0.6;} /* green with opacity */
#p3 {background-color:rgb(0,0,255);opacity:0.6;} /* blue with opacity */