RGB به صفحه می‌گوید چقدر نور پخش کند؛ HSL می‌گوید رنگ واقعاً چگونه به نظر می‌رسد. تبدیل سه کانال به هیو، اشباع و روشنایی رنگ را برای تنظیم دستی آسان میکند.
چطور تبدیل RGB به HSL کار میکند
- R، G و B را بر 255 تقسیم کن تا هر مقدار بین 0 و 1 قرار بگیرد.
- بیشترین و کمترینِ سه مقدار را بگیر — میانگینشان روشنی L است.
- اگر بیشینه و کمینه برابر باشند، رنگ خاکستری است: هیو و اشباع هر دو 0 هستند.
- در غیر این صورت S را از پراکندگی بین بیشینه و کمینه استخراج کن و H را از همان کانالی که بیشینه را دارد بخوان.
مثال عملی
از نظر تئوری دقیق است. چون H، S و L معمولاً به اعداد گردشده نمایش داده می‌شوند، تبدیل برعکس ممکن است یک کانال را یک یا دو گام جابه‌جا کند.
RGB و HSL توضیح داده‌شده
RGB چیست؟
RGB یک رنگ را به‌صورت سه کانال نور — قرمز، سبز و آبی — هر کدام از 0 تا 255 توصیف میکند. این دقیقاً نحوه کار صفحه‌نمایش‌ها را بازتاب می‌دهد: هر سه در 255 سفید را می‌سازند و هر سه در 0 سیاه را. هر وقت لازم است با مقادیر حساب کنی، RGB انتخاب درستی است، و rgba() شفافیت را اضافه میکند.
- نحو:
- rgb(R, G, B)
- دامنه:
- 0–255 برای هر کانال
- مناسب برای:
- کدنویسی، canvas، شفافیت با rgba()
HSL چیست؟
HSL یک رنگ را به هیو (Hue) — 0–360° روی چرخ رنگ — اشباع (Saturation) — میزان رنگی بودن، 0–100% — و روشنایی (Lightness) — میزان روشنایی، 0–100% تقسیم میکند. چون هر بخش هم‌خوانی بیشتری با نحوه توصیف رنگ توسط انسان دارد، HSL آسان‌ترین فرمت برای ساختِ تینت‌ها، شیب‌ها و پالت‌های منسجم است — دستی یا در کد.
- نحو:
- hsl(H, S%, L%)
- دامنه:
- 0–360°, 0–100%, 0–100%
- مناسب برای:
- پالت‌ها، تینت‌ها و شیب‌ها، تم‌سازی
جدول مرجع RGB به HSL
متداول‌ترین رنگ‌های CSS، تبدیل‌شده از RGB به HSL.
| رنگ | RGB | HSL |
|---|---|---|
| black | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| white | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| red | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| lime | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| blue | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| yellow | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| orange | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| teal | rgb(0, 128, 128) | hsl(180, 100%, 25%) |
| purple | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| gray | rgb(128, 128, 128) | hsl(0, 0%, 50%) |