آوردن یک پالت چاپی به وب در HSL آسان‌تر است: وقتی ترکیب جوهر به هیو، سچوریشن و لایتنس تبدیل شد، می‌توانی از آن در عرض چند ثانیه حالت‌های hover، tint و shade بسازی.
چطور تبدیل CMYK به HSL کار میکند
- درصدهای CMYK را به کانالهای RGB بین 0 و 255 تبدیل کن.
- کانالها را بر 255 تقسیم کن و بیشینه و کمینهشان را بدست آور.
- میانگین بیشینه و کمینه، لایتنس L است و پراکندگی آنها سچوریشن S را تعیین میکند.
- کانالی که بیشینه را در اختیار دارد هیو H را بر حسب درجه روی چرخ رنگ مشخص میکند.
مثال عملی
مرحلهٔ CMYK به RGB خودش یک تقریب است و مقادیر HSL به اعداد صحیح گرد می‌شوند. نتیجه یک تطابق خیلی نزدیک است، نه تبدیل مدیریت‌شده با پروفایل رنگ.
CMYK و HSL توضیح داده‌شده
CMYK چیست؟
CMYK مدل چهار مرکب مورد استفاده در چاپ است: cyan، magenta، yellow و key (مشکی)، هر کدام به‌صورت درصدی از 0 تا 100. مرکب نور را کم میکند بهجای اینکه آن را منتشر کند، بنابراین CMYK دامنه رنگ کمتری نسبت به صفحه‌نمایش دارد — به همین دلیل رنگ‌های درخشان صفحه اغلب در چاپ کدرتر به‌نظر می‌رسند.
- نحو:
- cmyk(C%, M%, Y%, K%)
- دامنه:
- 0–100% برای هر مرکب
- مناسب برای:
- چاپ، بسته‌بندی، آثار آماده چاپ
HSL چیست؟
HSL یک رنگ را به هیو (Hue) — 0–360° روی چرخ رنگ — اشباع (Saturation) — میزان رنگی بودن، 0–100% — و روشنایی (Lightness) — میزان روشنایی، 0–100% تقسیم میکند. چون هر بخش هم‌خوانی بیشتری با نحوه توصیف رنگ توسط انسان دارد، HSL آسان‌ترین فرمت برای ساختِ تینت‌ها، شیب‌ها و پالت‌های منسجم است — دستی یا در کد.
- نحو:
- hsl(H, S%, L%)
- دامنه:
- 0–360°, 0–100%, 0–100%
- مناسب برای:
- پالت‌ها، تینت‌ها و شیب‌ها، تم‌سازی
جدول مرجع CMYK به HSL
متداول‌ترین رنگ‌های CSS، تبدیل‌شده از CMYK به HSL.
| رنگ | CMYK | HSL |
|---|---|---|
| black | cmyk(0%, 0%, 0%, 100%) | hsl(0, 0%, 0%) |
| white | cmyk(0%, 0%, 0%, 0%) | hsl(0, 0%, 100%) |
| red | cmyk(0%, 100%, 100%, 0%) | hsl(0, 100%, 50%) |
| lime | cmyk(100%, 0%, 100%, 0%) | hsl(120, 100%, 50%) |
| blue | cmyk(100%, 100%, 0%, 0%) | hsl(240, 100%, 50%) |
| yellow | cmyk(0%, 0%, 100%, 0%) | hsl(60, 100%, 50%) |
| orange | cmyk(0%, 35%, 100%, 0%) | hsl(39, 100%, 50%) |
| teal | cmyk(100%, 0%, 0%, 50%) | hsl(180, 100%, 25%) |
| purple | cmyk(0%, 100%, 0%, 50%) | hsl(300, 100%, 25%) |
| gray | cmyk(0%, 0%, 0%, 50%) | hsl(0, 0%, 50%) |