تفاوت rgb() و rgba() در CSS چیست؟

در طراحی وب، رنگ‌ها نقش اساسی در ایجاد تجربه کاربری جذاب دارند. دو تابع پرکاربرد برای تعریف رنگ‌ها در CSS، rgb () و rgba () هستند. هر دو روش برای تعیین رنگ‌ها استفاده می‌شوند، اما یک تفاوت کلیدی بین آن‌ها وجود دارد که مربوط به شفافیت رنگ است.

تابع rgb() مخفف Red, Green, Blue است و از سه مقدار برای تعیین رنگ استفاده می‌کند. در مقابل، تابع rgba() یک مقدار اضافی به نام Alpha دارد که میزان شفافیت رنگ را مشخص می‌کند.

کاربردهای عملی

از rgb() زمانی استفاده می‌کنیم که نیاز به رنگ‌های جامد و بدون شفافیت داریم. این تابع برای عناصری مانند پس‌زمینه، متن یا حاشیه‌هایی که باید کاملاً مات باشند مناسب است.

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

ایجاد افکت‌های overlay روی تصاویر
ساخت منوهای شناور با پس‌زمینه نیمه‌شفاف
طراحی کارت‌ها یا باکس‌هایی که محتوای زیرشان دیده شود

نمونه کدهای مرتبط

در این بخش سه مثال عملی از استفاده از این توابع را بررسی می‌کنیم:

مثال ۱: استفاده از rgb()

.solid-box {
  background-color: rgb(255, 0, 0); /* رنگ قرمز خالص */
  width: 200px;
  height: 200px;
}

مثال ۲: استفاده از rgba() با شفافیت

.transparent-box {
  background-color: rgba(255, 0, 0, 0.5); /* قرمز با 50% شفافیت */
  width: 200px;
  height: 200px;
}

مثال ۳: ترکیب rgb() و rgba()

.card {
  background-color: rgb(240, 240, 240);
  border: 1px solid rgba(0, 0, 0, 0.1); /* حاشیه نیمه‌شفاف */
}

خلاصه درس

مقدار Alpha در rgba() بین 0 (کاملاً شفاف) تا 1 (کاملاً مات) متغیر است.
هر دو تابع از مقادیر 0 تا 255 برای کانال‌های قرمز، سبز و آبی استفاده می‌کنند.
در CSS سطح 4، rgb() نیز می‌تواند مقدار Alpha را بپذیرد (مثل rgb(255 0 0 / 0.5)).
برای سازگاری با مرورگرهای قدیمی، بهتر است از rgba() برای شفافیت استفاده شود.

در نهایت، انتخاب بین این دو تابع به نیاز طراحی شما بستگی دارد. اگر شفافیت لازم نیست، rgb() گزینه ساده‌تری است، اما برای افکت‌های زیبا و مدرن، rgba() انعطاف‌پذیری بیشتری ارائه می‌دهد.

توسعه دهندگان

نیما جاهد