رنگ ها

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

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 */


منابع آموزشی