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