تابع ()hsl در CSS

hsl() Function

تابع ()hsl در CSS رنگ‌ها را بر مبنای hue-sturation-lightness تعریف می‌کند.

نحوه نوشتار

color: hsl(16, 100%, 66%); }  /* coral */
color: hsl(210, 100%, 56%); } /* dodgerblue */
color: hsl(0, 0%, 75%); }     /* silver */

hsl(hue, saturation, lightness)

مقادیر

hue​

درجه را روی چرخه رنگ (color wheel) تنظیم می‌کند. این درجه ( از 0 تا 360 ) روی دایره‌ایست که تمام رنگهای اصلی به همراه طیف های آنها بر روی آن قرار دارد.

saturation​

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

lightness​

میزان روشنایی رنگ را مشخص می کند. ٪0 کاملا سیاه و  ٪100 سفید است.

رنگ :hue – اشباع رنگ :saturation – روشنایی رنگ :lightness

در مثال زیر نحوه عملکرد این تابع CSS را میبینیم:

html

<h2 id="color1">This is a sample text.</h1>
<h2 id="color2">This is a sample text.</h1>
<h2 id="color3">This is a sample text.</h1>

css

#color1 {
    color: hsl(16, 100%, 66%); 
}
#color2 {
    color: hsl(210, 100%, 56%); 
}
#color3 {
    color: hsl(0, 0%, 75%);
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این تابع CSS پشتیبانی می‌کنند.