رنگ‌های 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 زیر آزمایش کنید:
مثال[ویرایش | ویرایش]
منابع آموزشی[ویرایش | ویرایش]