RGB و RGBA

رنگ با اعداد آشناتر: RGB و RGBA

در درس قبل با کدهای Hex آشنا شدیم که رنگ رو با اعداد مبنای ۱۶ نمایش می‌دن. اما خیلی وقت‌ها راحت‌تره که همون میزان قرمز، سبز و آبی رو با اعداد معمولی و آشنای مبنای ۱۰ (یعنی همون سیستم عددی روزمره خودمون) بنویسیم. اینجاست که تابع rgb() وارد کار می‌شه.

rgb(): تعریف رنگ با سه عدد

.box {
  color: rgb(255, 0, 0);
  background-color: rgb(0, 128, 0);
}

rgb() یک تابع CSS‌ه که سه عدد رو به‌عنوان ورودی می‌گیره: میزان قرمز (Red)، سبز (Green) و آبی (Blue)؛ هرکدوم عددی بین 0 تا 255.

rgb(Red, Green, Blue)

در مثال بالا، rgb(255, 0, 0) دقیقاً همون قرمز خالصیه که در درس قبل با #ff0000 دیدیم؛ فقط این‌بار به‌جای مبنای ۱۶، از اعداد معمولی مبنای ۱۰ استفاده کردیم.

چرا بازه هر عدد بین ۰ تا ۲۵۵ است؟

این بازه دقیقاً معادل همون بازه‌ای‌ست که در کد Hex دیدیم؛ فقط با نمایش متفاوت. 00 در Hex برابر 0 در RGB است، و ff در Hex برابر 255 در RGB. یعنی این دو روش، دقیقاً همون اطلاعات رو نشون می‌دن، فقط با دو سیستم عددی متفاوت.

چند مثال برای مقایسه با Hex

.example-a {
  background-color: rgb(255, 255, 255); /* معادل #ffffff */
}

.example-b {
  background-color: rgb(0, 0, 0); /* معادل #000000 */
}

.example-c {
  background-color: rgb(142, 68, 173); /* معادل #8e44ad */
}

همون‌طور که می‌بینی، هرکدوم از این مقادیر RGB، دقیقاً معادل یکی از کدهای Hex‌ای هستن که در درس قبل دیدیم؛ فقط بازنویسی‌شون به سبک متفاوت.

چرا rgb() گاهی خواناتر از Hex است؟

یکی از مزیت‌های rgb()، خوانایی بیشترش برای خیلی از افراده؛ چون اعداد مبنای ۱۰، برخلاف مبنای ۱۶، بخشی از تجربه روزمره همه‌مونن. مثلاً فهمیدن اینکه rgb(200, 200, 200) یه خاکستری روشنه، از فهمیدن مستقیم #c8c8c8 ساده‌تره؛ چون لازم نیست ذهنی مبنای ۱۶ رو به ۱۰ تبدیل کنیم.

rgba(): اضافه شدن کانال شفافیت

rgba() دقیقاً همون سه پارامتر rgb() رو داره، به‌علاوه یک پارامتر چهارم به اسم Alpha که میزان شفافیت رو مشخص می‌کنه.

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

rgba(Red, Green, Blue, Alpha)

پارامتر Alpha، عددی بین 0 (کاملاً شفاف و نامرئی) تا 1 (کاملاً غیرشفاف و کدر) است. در این مثال، rgba(255, 0, 0, 0.5) یه قرمز نیمه‌شفافه؛ یعنی رنگ پس‌زمینه‌ای که پشت این عنصر قرار داره، تا حدی از زیرش دیده می‌شه.

یک مثال بصری از تأثیر Alpha

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

.semi-transparent {
  background-color: rgba(0, 0, 255, 0.5);
}

.nearly-invisible {
  background-color: rgba(0, 0, 255, 0.1);
}

<div class="opaque">کاملاً غیرشفاف</div>
<div class="semi-transparent">نیمه‌شفاف</div>
<div class="nearly-invisible">تقریباً نامرئی</div>

هر سه جعبه، دقیقاً همون رنگ آبی پایه رو دارن؛ تنها تفاوت‌شون میزان Alpha است که مشخص می‌کنه چقدر از پس‌زمینه پشت‌شون قابل‌مشاهده باشه.

کاربرد رایج rgba(): پس‌زمینه‌های نیمه‌شفاف روی تصویر

.overlay {
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
}

<div style="background-image: url('photo.jpg');">
  <div class="overlay">متنی که روی تصویر خوانا باقی می‌ماند</div>
</div>

یکی از کاربردهای بسیار رایج rgba()، ایجاد یک لایه نیمه‌شفاف مشکی روی تصاویره تا متن سفید روش، بدون از‌بین‌رفتن کامل تصویر پس‌زمینه، به‌خوبی خوانا بمونه.

وضعیت فعلی rgba() در استاندارد مدرن CSS

نکته‌ای که خوبه بدونی: در نسخه‌های جدیدتر استاندارد CSS، تابع rgb() خودش هم می‌تونه پارامتر چهارم Alpha رو مستقیماً بپذیره؛ یعنی نیازی به تابع جداگانه rgba() نیست.

.modern-syntax {
  background-color: rgb(255 0 0 / 0.5);
}

.older-syntax {
  background-color: rgba(255, 0, 0, 0.5);
}

هر دو خط، دقیقاً نتیجه یکسانی تولید می‌کنن. Syntax مدرن‌تر (که از فاصله به‌جای کاما، و از یک اسلش قبل از Alpha استفاده می‌کنه) امروزه به‌عنوان روش ترجیحی در استانداردهای جدید معرفی شده، ولی rgba() با کاما هم همچنان کاملاً معتبر و پشتیبانی‌شده‌ست و در پروژه‌های بی‌شماری استفاده می‌شه.

جدول جمع‌بندی

تابع	Syntax	پشتیبانی از شفافیت
rgb()	rgb(R, G, B)	در استاندارد مدرن، بله (با / Alpha)
rgba()	rgba(R, G, B, A)	بله، همیشه به‌عنوان پارامتر چهارم

نکات مهم

• هر یک از سه مقدار R، G و B باید عددی بین 0 تا 255 باشد.
• پارامتر Alpha در rgba()، عددی بین 0 (کاملاً شفاف) تا 1 (کاملاً کدر) است.
• در استاندارد مدرن CSS، خود rgb() هم می‌تواند پارامتر Alpha را بپذیرد؛ نیازی به تابع جداگانه نیست، هرچند rgba() همچنان معتبر است.

اشتباهات رایج

• وارد کردن عددی بزرگ‌تر از 255 یا کوچک‌تر از 0 برای کانال‌های رنگی.
• قاطی کردن بازه Alpha (بین 0 و 1) با بازه رنگ‌ها (بین 0 و 255)؛ مثلاً نوشتن اشتباه rgba(255, 0, 0, 255) به‌جای rgba(255, 0, 0, 1).
• فراموش کردن اینکه Alpha برابر 0، عنصر را کاملاً نامرئی می‌کند، ولی همچنان فضای چیدمانش را حفظ می‌کند (دقیقاً مشابه opacity که در فصل قبل دیدیم).

جمع‌بندی

تابع rgb() امکان تعریف رنگ با سه عدد مبنای ۱۰ (بین 0 تا 255) برای قرمز، سبز و آبی را فراهم می‌کند؛ روشی که برای بسیاری از افراد از Hex خواناتر است. rgba() همین قابلیت را با یک پارامتر چهارم به اسم Alpha گسترش می‌دهد که میزان شفافیت رنگ را کنترل می‌کند. در استاندارد مدرن CSS، خود rgb() هم می‌تواند شفافیت را بپذیرد، ولی rgba() همچنان یک روش رایج و کاملاً معتبر است.