آموزش رنگ های RGB در CSS

Ratings
(0)

یک رنگ RGB ،سه منبع نور قرمز(RED) و سبز(GREEN) و آبی(BLUE) را مشخص می کند. یک رنگ RGBA از رنگ های RGB توسعه یافته است و از یک کانال آلفا(شفافیت) برخوردار است.


مقادیر رنگ های RGB

در HTML، یک رنگ(color) می تواند با استفاده از فرمول زیر، بعنوان یک رنگ RGB ایجاد شود:

rgb(red, green, blue)

 هریک از پارامترهای فرمول بالا(یعنی red و green و blue) شدت آن رنگ را تعریف می کند و می تواند یک مقدار از 0 تا 255 باشد. این یعنی اینکه تعداد رنگ هایی که می توانیم با RGB تعریف کنیم، به صورت زیر است:

256 x 256 x 256 = 16777216

بعنوان مثال، رنگ rgb(255, 0, 0) قرمز خواهد بود، زیرا میزان رنگ قرمز(red) به صورت ماکسیمم(255) است و مقدار دو رنگ دیگر، یعنی سبز و آبی، برابر با 0 تعیین شده است. بعنوان یک مثال دیگر، مقدار rgb(0, 255, 0) سبز خواهد بود، زیرا میزان رنگ سبز(green) به صورت ماکسیمم(255) است و مقدار دو رنگ دیگر، یعنی قرمز و آبی، برابر با 0 تعیین شده است.

برای نمایش دادن رنگ مشکی، کافیست تمام پارامترها را برابر با 0 قرار دهیم. مانند rgb(0, 0, 0). برای نشان داده رنگ سفید، کافیست تمام پارامترها را برابر با 255 قرار دهید، مانند rgb(255, 255, 255). در زیر می توانید با مخلوط کردن مقادیر مختلف رنگ های RGB رنگ های متفاوتی ایجاد کنید:

rgb(255, 99, 71)

RED

255

GREEN

99

BLUE

71

 

مثال شماره 1

rgb(255, 0, 0)
rgb(0, 0, 255)
rgb(60, 179, 113)
rgb(238, 130, 238)
rgb(255, 165, 0)
rgb(106, 90, 205)

امتحان کنید

 ایجاد سایه های خاکستری

سایه های خاکستری اغلب با تنظیم سه مقدار مساوی برای سه پارامتر فرمول RGB ایجاد می شوند:

مثال شماره 2

rgb(60, 60, 60)
rgb(100, 100, 100)
rgb(140, 140, 140)
rgb(180, 180, 180)
rgb(200, 200, 200)
rgb(240, 240, 240)

امتحان کنید

استفاده از رنگ های RGBA در HTML

مقادیر رنگ های RGBA از رنگ های RGB توسعه یافته اند و از یک کانال آلفا برخوردار هستند. این کانال، یک opacity (مات بودن) را برای رنگ مشخص می کند. یک مقدار رنگ RGBAبا استفاده از فرمول زیر مشخص می شود:

rgba(red, green, blue, alpha)

پارامتر alpha یک عدد بین 0.0 (کاملا شفاف) و 1.0 (عدم شفافیت) می باشد. با استفاده از ابزار زیر، می توانید انواع رنگ های RGBA را ایجاد کنید:

rgba(255, 99, 71, 0.5)

RED

255

GREEN

99

BLUE

71

ALPHA

0.5

مثال شماره 3

rgba(255, 99, 71, 0)
rgba(255, 99, 71, 0.2)
rgba(255, 99, 71, 0.4)
rgba(255, 99, 71, 0.6)
rgba(255, 99, 71, 0.8)
rgba(255, 99, 71, 1)

امتحان کنید

 

 

  • بازدید: 184

نوشتن دیدگاه

لطفا نظرات خود را بیان کنید. به سوالات در سریع ترین زمان پاسخ داده خواهد شد.اما به نکات زیر توجه کنید:
1. سعی کنید نظرات شما مرتبط با مقاله ی مورد نظر باشد، در غیر این صورت پاسخ داده نخواهد شد.
2. سوالات خود را به صورت کوتاه بیان کنید و از پرسیدن چند سوال به طور همزمان خودداری کنید.
3. سوال خود را به طور واضح بیان کنید و از کلمات مبهم استفاده نکنید.

ارسال