إحضار لوحة طباعة إلى الويب أسهل في HSL: بمجرد أن تُعبَّر نسب الحبر كـ hue و saturation و lightness، يمكنك بناء حالات hover و tints و shades منها في ثوانٍ.
كيف يعمل تحويل CMYK إلى HSL
- حوّل نسب CMYK المئوية إلى قنوات RGB بين 0 و255.
- اقسم القنوات على 255 وخذ القيمتين العظمى والصغرى.
- متوسط العظمى والصغرى هو الإضاءة L، وفارقهما يحدد التشبع S.
- القناة التي تحمل القيمة العظمى تحدد الـ hue 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%) |