مقادیر HSL

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
< CSS:رنگ‌ها(تغییرمسیر از رنگ hsl در CSS۳)
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
۱خانه
۲مقدمه
۳شیوهٔ نوشتار
۴انتخابگرها
۵اضافه‌کردن CSS
۶نظرات
۷رنگ‌ها
۸پس‌زمینه‌ها
۹کادرها
۱۰حاشیه‌ها
۱۱Padding
۱۲ارتفاع/عرض
۱۳Box Model
۱۴Outline
۱۵متن
۱۶قلم‌ها
۱۷آیکن‌ها
۱۸لینک‌ها
۱۹لیست‌ها
۲۰جداول
۲۱ویژگی Display
۲۲ویژگی Max-Width
۲۳ویژگی Position
۲۴ویژگی Overflow
۲۵ویژگی Float
۲۶مقدار Inline-block
۲۷ترازکردن
۲۸ترکیب کننده‌ها
۲۹شبه کلاس
۳۰شبه عنصر
۳۱ویژگی Opacity
۳۲نوار Navigation
۳۳منو آبشاری
۳۴گالری تصویر
۳۵Image Sprites
۳۶انتخاب‌گرهای خاصیت
۳۷فرم‌ها
۳۸شمارنده‌ها
۳۹چیدمان وب‌سایت
۴۰واحدها
۴۱اولویت‌بندی
CSS پیشرفته
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

مقدار 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 امتحان کنید:


منابع آموزشی