رنگ‌های HSL

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

مثال


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



منابع آموزشی