مقادیر HSL
محتویات
مقدار HSL
در CSS، یک رنگ را می‌توان با استفاده از دما (Hue)، میزان خلوص رنگ، و میزان روشنی رنگ (HSL) به فرم زیر مشخص کرد:[۱]
hsl(hue, saturation, lightness)
hsl(روشنی، میزان خلوص، رنگ)
دما (به انگلیسی: hue) میزان درجه ای از رنگ از ۰ تا ۳۶۰ است. ۰ رنگ قرمز است، ۱۲۰ رنگ سبز است، و ۲۴۰ رنگ آبی است.
میزان خلوص رنگ یک مقدار درصدی است، ۰٪ به معنای سایه ای از رنگ خاکستری، و ۱۰۰٪ رنگ کامل است.
میزان روشنی (Lightness) نیز یک مقدار درصدی است، ۰٪ رنگ سیاه، ۵۰٪ نیز روشن یا تیره است، ۱۰۰٪ رنگ سفید است.
با ترکیب مقادیر HSL امتحان کنید:
hsl(0, 100%, 50%)
مقدار خلوص رنگ
خلوص رنگ را می‌توان به عنوان میزان شدت یک رنگ تعریف کرد.
۱۰۰٪ رنگ خالص است، بدون سایه ای از رنگ خاکستری.
مقدار ۵۰٪ دارای ۵۰٪ سایه رنگ خاکستری است، اما همچنان می‌توان رنگ را دید.
مقدار ۰٪ به‌طور کامل خاکستری است، دیگر نمی توان رنگ را دید.
میزان روشنی رنگ
میزان روشنی رنگ را می‌توان به عنوان مقدار نوری که می‌خواهید به رنگ بدهید تعریف کرد، که ۰٪ به معنی عدم وجود نور (سیاه) است، ۵۰٪ به معنی ۵۰٪ نور (نه سیاه و نه روشن) ۱۰۰٪ به معنای نور کامل (سفید) است.
سایه‌های خاکستری رنگ اغلب با تنظیم ویژگی‌های دما (به انگلیسی: hue) و میزان خلوص (به انگلیسی: saturation) برابر با صفر تعریف می‌شوند، و تنظیم روشنی (به انگلیسی: ligthness) رنگ از ۰٪ تا ۱۰۰٪ برای ایجاد سایه‌های تیره‌تر/روشن‌تر استفاده می‌شود:
مقدار HSLA
مقدارهای رنگ HSLA تعمیمی از مقادیر رنگ HSL با یک کانال آلفا هستند - که میزان کدری یک رنگ را مشخص می‌کنند.
مقدار HSLA رنگ به شکل زیر تعیین می‌شود:
hsla(hue, saturation, lightness, alpha)
پارامتر آلفا عددی بین ۰٫۰ (کاملاً شفاف) و ۱٫۰ (کاملاٌ کدر) است:
با ترکیب مقادیر HSLA امتحان کنید:
منابع آموزشی