رنگ ها

از موتو کد، دانشنامهٔ برنامه‌نویسی

CSS بیشتر از ۱۴۰ نام رنگ، مقادیر HEX، مقادیر RGB، مقادیر RGBA، مقادیر HSL، مقادیر HSLA و opacity (به فارسی: کدری) را پشتیبانی می‌کند.[۱]

رنگ های RGBA[ویرایش | ویرایش]

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

یک مقدار رنگ RGBA به صورت زیر مشخص می‌شود: rgba(red, green, blue, alpha). پارامتر آلفا عددی بین ۰٫۰ (تمام شفاف) و ۱٫۰ (تمام کدر) است.

مثال زیر رنگ‌های RGBA مختلف را تعریف می‌کند:

مثال
#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* blue with opacity */

رنگ های HSL[ویرایش | ویرایش]

HSL (سرواژهٔ: lightness (به فارسی: روشنی)، saturation (به فارسی: اشباع رنگ)، hue (به فارسی: رنگ)) است.

یک مقدار رنگ HSL به صورت زیر تعریف می‌شود: hsl(رنگ، میزان اشباع، میزان روشنی) ↔ hsl(hue, saturation, lightness).

  1. hue درجه‌ای از رنگ (color) است (از ۰ تا ۳۶۰)
    • ۰ (یا ۳۶۰) قرمز است
    • ۱۲۰ سبز است
    • ۲۴۰ آبی است
  2. اشباع، مقداری بر حسب درصد است: ۱۰۰٪ رنگ کامل است.
  3. میزان روشنایی نیز بر حسب درصد است؛ ۰٪ تیره (سیاه) و ۱۰۰٪ سفید است.

مثال زیر مقادیر رنگ hsl متفاوت را تعریف می‌کند:

مثال
#p1 {background-color: hsl(120, 100%, 50%);}  /* green */
#p2 {background-color: hsl(120, 100%, 75%);}  /* light green */
#p3 {background-color: hsl(120, 100%, 25%);}  /* dark green */
#p4 {background-color: hsl(120, 60%, 70%);}   /* pastel green */

رنگ های HSLA[ویرایش | ویرایش]

مقدارهای رنگ HSLA افزونه ای از مقدارهای رنگ HSL با یک کانال آلفا هستند که میزان کدری رنگ را مشخص می کند.

یک مقدار رنگ HSLA اینگونه تعریف می‌شود: hsla(رنگ، میزان اشباع رنگ، میزان روشنایی، میزان آلفا) ↔ hsla(hue, saturation, lightness, alpha). که پارامتر آلفا میزان کدری را تعریف می‌کند. پارامتر آلفا عددی بین ۰٫۰ (تمام شفاف) و ۱٫۰ (تمام کدر) است.

مثال زیر مقادیر رنگ HSLA متفاوت را تعریف می‌کند:

مثال
#p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* pastel green with opacity */

Opacity (به فارسی: میزان کدری)[ویرایش | ویرایش]

ویژگی opacity میزان کدری را برای کل عنصر تنظیم می‌کند (هم رنگ پس زمینه و هم متن کدر/شفاف خواهند بود)

مقدار ویژگی opacity می‌بایست عددی بین ۰٫۰ (تمام شفاف) و ۱٫۰ (کاملاً کدر) باشد.

توجه داشته باشید که متن بالا هم شفاف/کدر خواهد بود.

مثال زیر عناصر متفاوت را با opacity را نشان می‌دهد:

مثال
#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* red with opacity */
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* green with opacity */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* blue with opacity */

منابع آموزشی[ویرایش]