رنگ‌های HSL و HSLA
محتویات
مقدار HSL
در HTML یک رنگ را می‌توان با استفاده از hue (به فارسی: رنگ)، saturation (به فارسی: اشباع) و lightness (به فارسی: روشنایی) (HSL) در فرم مشخص کرد:[۱]
hsl(hue, saturation, lightness)
Hue درجه‌ای در چرخ رنگ (به انگلیسی: color wheel) است با محدودهٔ ۰ تا ۳۶۰. ۰ قرمز است، ۱۲۰ سبز و ۲۴۰ آبی است.
Saturation یک مقدار به درصد است، ۰٪ یعنی سایه ای از خاکستری، ۱۰۰٪ یعنی رنگ کامل.
Lightness هم به درصد است، ۰٪ یعنی سیاه، ۵۰٪ یعنی نه روشن و نه تیره، ۱۰۰٪ یعنی سفید.
با ترکیب مقادیر HSL زیر آزمایش کنید:
مثال
اشباع (به انگلیسی: Stauration)
اشباع را می‌توان بعنوان شدت رنگ تعریف کرد.
- %۱۰۰ رنگ خالص است، بدون هیچ سایهٔ خاکستری
- ٪۵۰ خاکستری است، اما هنوز می‌توان رنگ را دید
- ٪۰ کاملاً خاکستری است، هیچ رنگی را دیگر نمی‌توان دید
مثال
40px ساخت نمونه مثال این بخش در دست اقدام است.
روشنایی (به انگلیسی: Lightness)
روشنایی یک رنگ را می‌توان بعنوان اینکه چقدر نور می‌خواهید به رنگ بدهید تعریف می‌شود، بطوریکه ۰٪ یعنی بدون نور (سیاه)، ۵۰٪ یعنی ۵۰٪ نور (نه تاریک و نه روشن) ۱۰۰٪ یعنی نور کامل (سفید).
مثال
40px ساخت نمونه مثال این بخش در دست اقدام است.
سایه‌های خاکستری اغلب با تنظیم hue و saturation برابر با ۰ و تطبیق lightness از ۰٪ تا ۱۰۰٪ برای سایه‌های تاریکتر / روشنتر مشخص می‌شوند:
مثال
40px ساخت نمونه مثال این بخش در دست اقدام است.
مقدار HSLA
مقادیر رنگ HSLA افزونه‌ای از مقدارهای رنگ HSL با یک کانال آلفا هستند که مقدار تاری رنگ را تعیین می‌کند.
یک رنگ HSLA به شکل زیر مشخص می‌شود:
hsla(hue, saturation, lightness, alpha)
پارامتر آلفا یک عدد بین ۰/۰ (کاملاً شفاف) و ۱/۰ (کاملاً تار) است.
با ترکیب مقادیر HSLA زیر آزمایش کنید:
مثال
منابع آموزشی