آموزش HTML - رنگ‌های RGB و RGBA

رنگ‌های RGB و RGBA در HTML توسط همه مرورگرها پشتیبانی می‌شوند. مقدار رنگ RGB شدت رنگ‌های قرمز، سبز و آبی را مشخص می‌کند. RGBA نسخه‌ای گسترش‌یافته از RGB است که یک کانال آلفا نیز برای تعیین میزان شفافیت رنگ مشخص می‌کند.

ما می‌توانیم با ترکیب رنگ‌های قرمز، سبز و آبی، هر رنگی را ایجاد کنیم. اگر شدت هر سه رنگ را روی حداکثر مقدار تنظیم کنیم، رنگ حاصل سفید خواهد بود. به همین ترتیب، اگر شدت تمام مقادیر RGB را صفر قرار دهیم، رنگ سیاه به دست می‌آید.

رنگ‌های RGB در HTML

در HTML، عبارت RGB مخفف قرمز (Red)، سبز (Green) و آبی (Blue) است و روشی برای تعیین رنگ‌ها بر اساس مقادیر شدت آن‌ها به شمار می‌رود. این رنگ‌ها را می‌توان در عناصر HTML، مانند پس‌زمینه‌ها، حاشیه‌ها و فونت‌ها، استفاده کرد. برای استفاده از رنگ‌های RGB در HTML، باید از تابع rgb() درون style ویژگی یک عنصر استفاده کنیم.

تابع rgb()

تابع rgb() سه پارامتر دریافت می‌کند: مقدار قرمز، مقدار سبز و مقدار آبی. هر مقدار با استفاده از یک عدد صحیح در بازه ۰ تا ۲۵۵ مشخص می‌شود؛ عدد ۰ به معنای نبود آن رنگ و عدد ۲۵۵ به معنای حداکثر شدت آن رنگ است. ترکیب این مقادیر، رنگ‌های متفاوت دیگری ایجاد می‌کند.

نحو

rgb(red, green, blue)

مثال

در اینجا مثالی آورده شده است که نشان می‌دهد چگونه می‌توان با استفاده از مقادیر rgb() و کد رنگ، رنگ پس‌زمینه تگ‌های HTML را تنظیم کرد.

<!DOCTYPE html>
<html>
<head>
  <title>HTML Colors by RGB code</title>
</head>
<body style = "background-color: rgb(255,255,0);">
  <p>Use different color code for body and table and see the result. </p>
  <table style = "background-color: rgb(0,0,0);">
     <tr>
        <td>
           <p style = "color: rgb(255,255,255);">This text will appear white on black background.</p>
        </td>
     </tr>
  </table>
</body>
</html>

با اجرای کد HTML بالا، نتیجه‌ای شامل متن‌هایی با پس‌زمینه‌های متفاوت نمایش داده می‌شود.

رنگ‌های RGBA در HTML

در HTML، عبارت RGBA مخفف قرمز (Red)، سبز (Green)، آبی (Blue) و آلفا (Alpha) است. این روش، نسخه گسترش‌یافته RGB محسوب می‌شود که یک کانال اضافی برای تعیین میزان شفافیت دارد. کانال آلفا میزان شفاف یا مات بودن رنگ را با عددی بین ۰٫۰ تا ۱٫۰ مشخص می‌کند.

برای مثال، rgba(255, 0, 0, 1.0) رنگ قرمز کاملاً مات، rgba(255, 0, 0, 0.5) رنگ قرمز نیمه‌شفاف و rgba(255, 0, 0, 0.0) رنگ قرمز کاملاً شفاف است.

برای مشخص کردن مقادیر رنگ RGBA در HTML، از تابع rgba() درون ویژگی style یا فایل CSS استفاده می‌شود.

تابع rgba()

تابع rgba() چهار پارامتر دریافت می‌کند. پارامتر آلفا یک مقدار اعشاری بین ۰ تا ۱ می‌پذیرد تا میزان شفافیت یک رنگ RGB را تعیین کند. مقدار ۰ نشان می‌دهد که رنگ قابل مشاهده نیست و مقدار ۱ نشان می‌دهد که رنگ کاملاً قابل مشاهده است.

نحو

rgba(red, green, blue, alpha)

برای مثال، rgba(255, 0, 0, 1.0) رنگ قرمز کاملاً مات، rgba(255, 0, 0, 0.5) رنگ قرمز نیمه‌شفاف و rgba(255, 0, 0, 0.0) رنگ قرمز کاملاً شفاف است.

مثال

در این مثال، رنگ پس‌زمینه و رنگ متن را با استفاده از کد رنگ RGBA تنظیم کرده‌ایم:

<!DOCTYPE html>
<html>
<head>
  <title>HTML Colors by RGBA code</title>
</head>
<body style = "width:300px; height:100px;">
  <h2 style = "background-color: rgba(128 ,128 ,128 ,1.0);">Setting the Background using rgba()</h2>
  <table style = "background-color: rgba(255, 0 ,0 ,0.8);">
     <tr>
        <td>
           <p style = "color: gba(255, 255, 255, 1.0);">The text color of the paragraph is styled using rgba()</p>
        </td>
     </tr>
  </table>
</body>
</html>

با اجرای کد، HTML بالا یک عنوان و یک پاراگراف با رنگ‌های پس‌زمینه متفاوت ایجاد می‌کند.

مقایسه رنگ‌های RGB و RGBA

جدول زیر مقایسه‌ای بین رنگ‌های RGB و RGBA را با استفاده از مقادیر RGB و شکل کاهش‌یافته شفافیت آن‌ها به کمک تابع rgba() نشان می‌دهد:

تفاوت رنگ‌های RGB و RGBA

رنگ RGB با استفاده از تنها سه مؤلفه رنگی (قرمز، سبز و آبی) و مقادیر بین ۰ تا ۲۵۵ تعریف می‌شود. رنگ RGB از شفافیت پشتیبانی نمی‌کند. در مقابل، رنگ RGBA مشابه RGB است، اما یک مقدار آلفا نیز برای تعیین شفافیت به آن اضافه می‌کند؛ در این حالت، مقدار ۰ نشان‌دهنده رنگ کاملاً شفاف و مقدار ۱ نشان‌دهنده رنگ کاملاً مات است. به‌طور خلاصه، از RGB برای رنگ‌های یکدست و از RGBA زمانی استفاده می‌شود که به شفافیت نیاز داشته باشیم.