این تابع سه مقدار که توسط ویرگول از هم جدا می شوند می پذیرد. این سه مقدار به ترتیب گرمای رنگ (Hue), اشباع رنگ (Saturation) و درخشندگی یا روشنایی رنگ (Lightness) می باشند.

از rgba() برای اعمال رنگ از طریق ترکیب رنگ های قرمز(r), سبز(g) و آبی(b) و آلفا برای خاصیت شفافیت استفاده می شود.

rgba() همان ()rgb است با این تفاوت که به جای سه مقدار چهار مقدار می پذیرد. که مقدار چهارم همان آلفا می باشد که برای تنظیم مقدار شفافیت به کار گرفته می شود. (یعنی همان شیشه ای کردن رنگ ها)

مقدار آلفا می تواند یک عدد بین 0 تا 1 باشد, بطوریکه 0 نشانگر شفافیت کامل است (یک شیشه خیلی تمیز که دیده نمیشه :) ) و 1 نمایانگر خود رنگ بدون هیچگونه شفافیت است.

حال اگر بخوایم یک رنگ قرمز نیمه شفاف داشته باشیم می نویسیم:

rgba(255, 0, 0, 0.5)

که نتیجه بصورت زیر خواهد بود:

در مثال زیر عنصری با پس زمینه نیمه شفاف بنفش و رنگ متن سفید را داریم:

.element {
  color: rgba(255, 255, 255, 1);
  background-color: rgba(255, 0, 255, 0.5);
}

دموی زیر را بررسی کنید و با تغییر رنگ ها بهتر با این تابع آشنا شوید:
 

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

مقادیر رنگی در تمام مرورگرهای اصلی پشتیبانی می شود.

اما hsl(), hsla(), rgba(), transparentو currentColor از اینترنت اکسپلورر نسخه 9 به بعد (شامل 9) پشتیبانی می شوند.

color: rgb(255,0,0); /* قرمز */
color: rgb(0,255,0); /* سبز */
color: rgb(0,0,255); /* آبی */

همانطور که گفته شد می توان بصورت زیر هم عمل کرد (یعنی با علامت %) و نتیجه یکسان خواهد بود:

color: rgb(255%,255%,0%); /* زرد */
background-color: rgb(255%,255%,255%); /* سفید */

برای تبدیل رنگ های اعداد پایه ۱۶ (هِگزادِسیمال) به rgb به راحتی می توان بصورت زیر عمل کرد.

رنگ های هگزادسیمال بصورت سه جفت عدد در کنار هم هستند (مثلا #1a99ff). برای تبدیل کافی است عدد اول هر جفت را در 16 ضرب کنیم سپس عدد دوم را به حاصل اضافه کنیم.

فرض کنید رنگ مورد نظر #1a99ff باشد:

جفت اول 1a است که 1 را در 16 ضرب می کنیم و حاصل را با a که نشان دهنده عدد 10 می باشد جمع می کنیم که نتیجه 26 می باشد.

جفت دوم 99 است که 9 را در 16 ضرب می کنیم و حاصل را با 9 جمع می کنیم که نتیجه 153 می باشد.

جفت آخر ff است که f (نشان دهنده عدد 15) را در 16 ضرب می کنیم و حاصل را با f جمع می کنیم و نتیجه 255 را خواهیم داشت:

#1a99ff = rgb(26, 153, 255)

البته نیاز نیست هر دفعه این تبدیل را خودمان انجام دهیم ابزارهای زیادی برای این کار وجود دارند و در دسترس ترین آنها ابزار devtools کروم است که به راحتی این کار را انجام می دهد.

در مثال زیر چند رنگی که از ترکیب مستقیم قرمز, سبز و آبی به وجود می آید بیان شده اند:

rgb(255,255,0)   /* قرمز + سبز = زرد */
rgb(255,0,255)   /* قرمز + آبی  = بنفش */
rgb(0,255,255)   /* سبز + آبی  = سبزآبی */
rgb(0,0,0)       /* سیاه */
rgb(255,255,255) /* قرمز + سبز + آبی = سفید */

اگر قصد ساخت رنگهای نیمشه شفاف (شیشه ای) را توسط این تابع رنگی دارید باید از ()rgba استفاده کنید.