HSL و HSLA

فکر کردن به رنگ مثل یک طراح: HSL و HSLA

در دو درس قبل، رنگ رو بر اساس ترکیب سه نور پایه (قرمز، سبز، آبی) تعریف کردیم. این روش برای مرورگر و کامپیوتر منطقیه، ولی برای ذهن انسان همیشه شهودی نیست؛ مثلاً اگه بخوای یه رنگ آبی رو کمی روشن‌تر کنی، با RGB باید هر سه عدد رو همزمان و با محاسبه دستی تغییر بدی. HSL دقیقاً برای حل همین مشکل طراحی شده و به روشی نزدیک‌تر به نحوه فکر کردن طراح‌ها درباره رنگ عمل می‌کنه.

HSL چیست؟

HSL مخفف سه مفهومه: Hue (فام یا نوع رنگ)، Saturation (اشباع یا شدت رنگ) و Lightness (روشنایی). به‌جای فکر کردن به ترکیب سه نور، اینجا به رنگ به‌عنوان یک طیف دایره‌ای فکر می‌کنیم که می‌شه شدت و روشنایی‌ش رو جدا تنظیم کرد.

.box {
  background-color: hsl(0, 100%, 50%);
}

hsl(Hue, Saturation, Lightness)

Hue: جایگاه روی چرخ رنگ

Hue (رنگ) عددی بین 0 تا 360 است که نشون‌دهنده جایگاه رنگ روی یک دایره رنگ (Color Wheel) است؛ دقیقاً مثل واحد deg که در فصل قبل با زاویه دیدیم.

مقدار Hue	رنگ تقریبی
0 (یا 360)	قرمز
60	زرد
120	سبز
180	فیروزه‌ای (Cyan)
240	آبی
300	صورتی/بنفش (Magenta)

Saturation: میزان خلوص رنگ

Saturation (اشباع) درصدیه بین 0% تا 100% که مشخص می‌کنه رنگ چقدر «خالص و پررنگ» یا چقدر «خاکستری و کدر» به‌نظر برسه.

.vivid {
  background-color: hsl(0, 100%, 50%); /* قرمز کاملاً پررنگ */
}

.muted {
  background-color: hsl(0, 30%, 50%); /* قرمز کدر و مایل به خاکستری */
}

.gray {
  background-color: hsl(0, 0%, 50%); /* بدون هیچ اشباعی، فقط خاکستری خالص */
}

وقتی Saturation برابر 0% باشه، مقدار Hue دیگه هیچ اهمیتی نداره؛ نتیجه همیشه یک خاکستری خالص خواهد بود، چون هیچ رنگی «اشباع» نشده.

Lightness: میزان روشنایی

Lightness (روشنایی) هم درصدیه بین 0% تا 100%؛ 0% همیشه مشکی کامل، 100% همیشه سفید کامله، و 50% حالت «معمولی» و کامل همون رنگه.

.dark {
  background-color: hsl(220, 80%, 20%); /* آبی خیلی تیره */
}

.normal {
  background-color: hsl(220, 80%, 50%); /* آبی معمولی */
}

.light {
  background-color: hsl(220, 80%, 80%); /* آبی خیلی روشن */
}

نکته مهم اینجاست: برخلاف Hue و Saturation، هر عدد Lightness که به سمت ۰٪ یا ۱۰۰٪ نزدیک بشه، صرف‌نظر از مقدار Hue، نهایتاً به مشکی یا سفید مطلق ختم می‌شه.

چرا HSL برای طراحان کاربردی‌تر است؟

فرض کن می‌خوای یه رنگ آبی پایه رو، بدون تغییر «نوع» رنگ، فقط کمی روشن‌تر یا تیره‌تر کنی. با HSL این کار خیلی ساده‌ست:

.base-blue {
  background-color: hsl(220, 70%, 50%);
}

.lighter-blue {
  background-color: hsl(220, 70%, 70%); /* فقط Lightness تغییر کرده */
}

.darker-blue {
  background-color: hsl(220, 70%, 30%); /* فقط Lightness تغییر کرده */
}

در این مثال، فقط با تغییر یک عدد (Lightness)، سه سایه مختلف از دقیقاً همون رنگ آبی به‌دست میاد؛ بدون نیاز به محاسبه دستی سه کانال RGB جداگانه. این مزیت، HSL رو مخصوصاً برای ساخت پالت‌های رنگی (مثل حالت‌های Hover تیره‌تر یک دکمه، یا سایه‌های مختلف یک رنگ برند) بسیار کاربردی می‌کنه.

hsla(): اضافه شدن کانال شفافیت

.box {
  background-color: hsla(220, 70%, 50%, 0.5);
}

hsla(Hue, Saturation, Lightness, Alpha)

درست مثل رابطه rgb() و rgba() که در درس قبل دیدیم، hsla() دقیقاً همون سه پارامتر HSL رو داره، به‌علاوه یک پارامتر چهارم Alpha (بین 0 تا 1) برای کنترل شفافیت.

Syntax مدرن: hsl() با پشتیبانی مستقیم از Alpha

.modern-syntax {
  background-color: hsl(220 70% 50% / 0.5);
}

.older-syntax {
  background-color: hsla(220, 70%, 50%, 0.5);
}

دقیقاً مشابه چیزی که در درس قبل درباره rgb() دیدیم، در استاندارد مدرن CSS، خود hsl() هم می‌تونه پارامتر Alpha رو مستقیماً (با فاصله به‌جای کاما و یک اسلش قبل از Alpha) بپذیره؛ بدون نیاز به تابع جداگانه hsla(). هر دو Syntax کاملاً معتبر و پشتیبانی‌شده هستن.

مقایسه HSL و RGB در یک نگاه

ویژگی	RGB	HSL
مبنای فکری	ترکیب نور (فنی و ماشینی)	رنگ، اشباع، روشنایی (شهودی و طراحانه)
تغییر روشنایی یک رنگ	نیاز به تغییر هر سه عدد	فقط تغییر یک عدد (Lightness)
ساخت سایه‌های مختلف یک رنگ	پیچیده و غیرشهودی	ساده و مستقیم

نکات مهم

• Hue عددی بین 0 تا 360 و مبتنی بر جایگاه روی چرخ رنگ است.
• Saturation و Lightness هر دو درصدی بین 0% تا 100% هستند.
• تغییر تنها مقدار Lightness، ساده‌ترین راه برای ساخت سایه‌های روشن‌تر یا تیره‌تر از یک رنگ پایه است.

اشتباهات رایج

• فراموش کردن علامت درصد (%) بعد از مقادیر Saturation و Lightness.
• تصور اینکه Hue هم باید با درصد نوشته شود؛ در حالی که Hue فقط یک عدد ساده بین 0 تا 360 است.
• عدم توجه به این‌که با Saturation صفر، مقدار Hue هیچ تأثیری در نتیجه نهایی نخواهد داشت.

جمع‌بندی

HSL رنگ را بر اساس سه مفهوم شهودی‌تر تعریف می‌کند: Hue (جایگاه روی چرخ رنگ)، Saturation (میزان خلوص رنگ) و Lightness (میزان روشنایی). این روش، مخصوصاً برای ساخت سایه‌های مختلف از یک رنگ پایه (فقط با تغییر Lightness)، بسیار کاربردی‌تر از RGB است. hsla()، مشابه rgba()، امکان کنترل شفافیت را هم به این مدل اضافه می‌کند.