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