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%) |