مدل HSL (HSL)
در «مدل HSL (HSL)»، رنگ با «فام (Hue)»، «اشباع (Saturation)» و «روشنی (Lightness)» تعریف می شود. مثل کم وکثر کردن نور و رنگ روی یک چراغ رنگی.
مدل HSL چیست؟
HSL یعنی hsl(hue, saturation, lightness). فام از 0 تا 360 درجه است. اشباع و روشنی درصدی هستند.
<div style="background-color:hsl(0, 100%, 50%);\n">hsl(0, 100%, 50%)</div>
<div style="background-color:hsl(240, 100%, 50%);\n">hsl(240, 100%, 50%)</div>
<div style="background-color:hsl(147, 50%, 47%);\n">hsl(147, 50%, 47%)</div>
<div style="background-color:hsl(300, 76%, 72%);\n">hsl(300, 76%, 72%)</div>
<div style="background-color:hsl(39, 100%, 50%);\n">hsl(39, 100%, 50%)</div>
<div style="background-color:hsl(248, 53%, 58%);\n">hsl(248, 53%, 58%)</div>
اشباع (Saturation) در مدل HSL
اشباع یعنی شدت رنگ. 100٪ خالص است. 0٪ خاکستری کامل است.
<div style="background-color:hsl(0, 100%, 50%);\n">hsl(0, 100%, 50%)</div>
<div style="background-color:hsl(0, 80%, 50%);\n">hsl(0, 80%, 50%)</div>
<div style="background-color:hsl(0, 60%, 50%);\n">hsl(0, 60%, 50%)</div>
<div style="background-color:hsl(0, 40%, 50%);\n">hsl(0, 40%, 50%)</div>
<div style="background-color:hsl(0, 20%, 50%);\n">hsl(0, 20%, 50%)</div>
<div style="background-color:hsl(0, 0%, 50%);\n">hsl(0, 0%, 50%)</div>
روشنی (Lightness) در مدل HSL
روشنی یعنی میزان نور رنگ. 0٪ سیاه است. 100٪ سفید است.
<div style="background-color:hsl(0, 100%, 0%);\n">hsl(0, 100%, 0%)</div>
<div style="background-color:hsl(0, 100%, 25%);\n">hsl(0, 100%, 25%)</div>
<div style="background-color:hsl(0, 100%, 50%);\n">hsl(0, 100%, 50%)</div>
<div style="background-color:hsl(0, 100%, 75%);\n">hsl(0, 100%, 75%)</div>
<div style="background-color:hsl(0, 100%, 90%);\n color:#555555;\n">hsl(0, 100%, 90%)</div>
<div style="background-color:hsl(0, 100%, 100%);\n color:#555555;\n">hsl(0, 100%, 100%)</div>
طیف های خاکستری با HSL
برای خاکستری، فام و اشباع را 0 بگذار. سپس روشنی را کم وزیاد کن.
<div style="background-color:hsl(0, 0%, 20%);\n">hsl(0, 0%, 20%)</div>
<div style="background-color:hsl(0, 0%, 30%);\n">hsl(0, 0%, 30%)</div>
<div style="background-color:hsl(0, 0%, 40%);\n">hsl(0, 0%, 40%)</div>
<div style="background-color:hsl(0, 0%, 60%);\n">hsl(0, 0%, 60%)</div>
<div style="background-color:hsl(0, 0%, 70%);\n color:#555555;\n">hsl(0, 0%, 70%)</div>
<div style="background-color:hsl(0, 0%, 90%);\n color:#555555;\n">hsl(0, 0%, 90%)</div>
مدل HSLA و شفافیت (Alpha)
HSLA مثل HSL است، اما با آلفا (Alpha). آلفا از 0 تا 1 است.
<div style="background-color:hsla(9, 100%, 64%, 0);\n color:#555555;\n">hsla(9, 100%, 64%, 0)</div>
<div style="background-color:hsla(9, 100%, 64%, 0.2);\n color:#555555;\n">hsla(9, 100%, 64%, 0.2)</div>
<div style="background-color:hsla(9, 100%, 64%, 0.4);\n">hsla(9, 100%, 64%, 0.4)</div>
<div style="background-color:hsla(9, 100%, 64%, 0.6);\n">hsla(9, 100%, 64%, 0.6)</div>
<div style="background-color:hsla(9, 100%, 64%, 0.8);\n">hsla(9, 100%, 64%, 0.8)</div>
<div style="background-color:hsla(9, 100%, 64%, 1);\n">hsla(9, 100%, 64%, 1)</div>
گام های عملی
- یک عنصر بساز، مثلاً <div>.
- خاصیت style را باز کن.
- background-color:hsl(…); یا hsla(…); بنویس.
نکته: برای مطالعه بیشتر رنگ ها، صفحه رنگ ها را ببین. همچنین با مدل RGB و مدل HEX مقایسه کن تا انتخاب دقیق تری داشته باشی.
جمع بندی سریع
- فام زاویه چرخه رنگ است.
- اشباع شدت رنگ را نشان می دهد.
- روشنی میزان نور را تعیین می کند.
- HSLA شفافیت را هم اضافه می کند.