css از نام رنگ ها ، مقادیر هگزادسیمال و RGB پشتیبانی می کند.
علاوه بر آن ، css3 از موارد زیر نیز پشتیبانی می کند :

- رنگ های RGBA
- رنگ های HSL
- رنگ های HSLA
- opacity

پشتیبانی مرورگر

اعداد داخل جدول نشان دهنده اولین نسخه ای از همان مرورگر است که از صفات و مقادیر رنگ های css3 پشتیبانی می کند :

رنگ های RGBA

رنگ های RGBA فرمتی از رنگ های RGB است با یک کانال آلفا ( که شفافیت رنگ را مشخص می کند ).
مقدار رنگ RGBA با rgba(red,green,blue,alpha) مشخص می شود. پارامتر آلفا عددی بین 0.0 (مات) و 1.0 (شفاف) است.

مثال زیر رنگ های متفاوت RGBA را تعریف می کند.

مثال :

#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% سفید است.

مثال زیر رنگ های متفاوتی از HSL را نمایش می دهد.

مثال :

#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 با hsla(hue, saturation, lightness, alpha) مشخص می شود.
مثال زیر رنگ های متفاوت HSLA را نمایش می دهد.

مثال :

#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 باید عددی بین 0.0 (کاملا شفاف) و 1.0 (کاملا مات) باشد.
مثال زیر عناصر مختلف با شفافیت متفاوت را نشان می دهد. به شفاف یا مات بودن همزمان متن و رنگ زمینه توجه کنید.

مثال :

#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 */