رنگ‌های HSL و HSLA

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
< HTML:Tutorial‏ | رنگ ها(تغییرمسیر از مقدار HSL در html)
پرش به ناوبری پرش به جستجو

مقدار HSL

در HTML یک رنگ را می‌توان با استفاده از hue (به فارسی: رنگ)، saturation (به فارسی: اشباع) و lightness (به فارسی: روشنایی) (HSL) در فرم مشخص کرد:[۱]

hsl(hue, saturation, lightness)

Hue درجه‌ای در چرخ رنگ (color wheel) است با محدودهٔ ۰ تا ۳۶۰. ۰ قرمز است، ۱۲۰ سبز و ۲۴۰ آبی است.

Saturation یک مقدار به درصد است، ۰٪ یعنی سایه‎ ای از خاکستری، ۱۰۰٪ یعنی رنگ کامل.

Lightness هم به درصد است، ۰٪ یعنی سیاه، ۵۰٪ یعنی نه روشن و نه تیره، ۱۰۰٪ یعنی سفید.

با ترکیب مقادیر HSL زیر آزمایش کنید:

مثال


مشاهدهٔ نتیجه


اشباع (Stauration)

اشباع را می‌توان بعنوان شدت رنگ تعریف کرد.

  • %۱۰۰ رنگ خالص است، بدون هیچ سایهٔ خاکستری
  • ٪۵۰ خاکستری است، اما هنوز می‌توان رنگ را دید
  • ٪۰ کاملاً خاکستری است، هیچ رنگی را دیگر نمی‌توان دید

مثال

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


مشاهدهٔ نتیجه


روشنایی (Lightness)

روشنایی یک رنگ را می‌توان بعنوان اینکه چقدر نور می‌خواهید به رنگ بدهید تعریف می‌شود، بطوریکه ۰٪ یعنی بدون نور (سیاه)، ۵۰٪ یعنی ۵۰٪ نور (نه تاریک و نه روشن) ۱۰۰٪ یعنی نور کامل (سفید).

مثال

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.



مشاهدهٔ نتیجه


سایه‌های خاکستری اغلب با تنظیم hue و saturation برابر با ۰ و تطبیق lightness از ۰٪ تا ۱۰۰٪ برای سایه‌های تاریکتر / روشنتر مشخص می‌شوند:

مثال

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


مشاهدهٔ نتیجه


مقدار HSLA

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

یک رنگ HSLA به شکل زیر مشخص می‌شود:

hsla(hue, saturation, lightness, alpha)

پارامتر آلفا یک عدد بین ۰/۰ (کاملاً شفاف) و ۱/۰ (کاملاً تار) است.

با ترکیب مقادیر HSLA زیر آزمایش کنید:

مثال


مشاهدهٔ نتیجه



منابع آموزشی