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 پشتیبانی میکنند.