100% کامل شده تا
به‌روزرسانی شده در: ۲۸ روز پیش

رنگ‌های HSL و HSLA در اچ‌تی‌ام‌ال (HTML HSL and HSLA Colors)

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


HSL مخفف رنگ، اشباع و روشنایی است.[۱]

مقادیر رنگ HSLA فرمت HSL با کانال آلفا (کدورت (opacity)) است.


مقادیر رنگ HSL (HSL Color Values)

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

hsl(hue, saturation, lightness)

Hue یک درجه در دایره رنگ است با محدودهٔ ۰ تا ۳۶۰. ۰ قرمز است، ۱۲۰ سبز و ۲۴۰ آبی است.

اشباع: یک درصد است، ۰٪ به معنی سایه خاکستری و ۱۰۰٪ به معنی رنگ کامل است.

سبکی: نیز یک درصد است، ۰٪ یعنی سیاه و ۱۰۰٪ یعنی سفید.

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

Responsive demo.svg

مثال

Responsive demo.svg


اشباع (Saturation)

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

%۱۰۰ رنگ خالص است، بدون هیچ سایهٔ خاکستری.

۵۰٪ خاکستری است، اما هنوز می‌توان رنگ را دید.

۰٪ کاملاً خاکستری است، هیچ رنگی را دیگر نمی‌توان دید.

مثال

Responsive demo.svg


روشنایی (Lightness)

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

مثال

Responsive demo.svg


سایه‌های خاکستری (Shades of Gray)

سایه‌های خاکستری اغلب با تنظیم رنگ و میزان اشباع روی ۰ تعریف می‌شوند و روشنایی را از ۰ تا ۱۰۰ درصد برای ایجاد سایه‌های تیره‌تر/روشن‌تر مشخص می‌شوند:

مثال

Responsive demo.svg


مقادیر رنگ HSLA (HSLA Color Values)

مقادیر رنگ HSLA، فرمت ارزش رنگ HSL با یک کانال آلفا است - که تاری یک رنگ را مشخص می‌کند.

مقدار رنگ HSLA با موارد زیر مشخص شده‌است:

hsla(hue, saturation, lightness, alpha)

پارامتر آلفا یک عدد بین ۰٫۰ (کاملاً شفاف) و ۱٫۰ (به هیچ وجه شفاف نیست) است:

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

Responsive demo.svg

مثال

Responsive demo.svg


منابع آموزشی