رنگ‌های HSL و HSLA

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
< HTML:رنگ‌ها(تغییرمسیر از مقدار HSL در HTML)
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Html-menu.png
موارد آموزشی
۱خانه
۲مقدمه
۳ویرایشگرها
۴پایه
۵عنصرها
۶ویژگی‌ها
۷عنوان‌ها
۸پاراگراف‌ها
۹استایل‌ها
۱۰قالب‌بندی
۱۱نقل‌قول‌ها
۱۲توضیحات
۱۳رنگ‌ها
۱۴CSS
۱۵لینک‌ها
۱۶تصاویر
۱۷جداول
۱۸لیست‌ها
۱۹بلوک‌ها
۲۰کلاس‌ها
۲۱شناسه
۲۲Iframeها
۲۳جاوا اسکریپت
۲۴مسیرهای فایل
۲۵سرصفحه
۲۶چیدمان‌ها
۲۷واکنش‌گرا
۲۸کد کامپیوتری
۲۹معنایی‌ها
۳۰راهنمای استایل
۳۱موجودیت‌ها
۳۲نماد‌ها
۳۳ایموجی‌ها
۳۴مجموعه کاراکترها
۳۵رمزگذاری URL
۳۶HTML و XHTML
فرم‌های HTML
گرافیک در HTML
رسانه در HTML
APIها در HTML
مثال‌ها
مرجع 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 زیر آزمایش کنید:

مثال


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



منابع آموزشی