HSL طريقة ودية لاختيار لون، بينما RGB هو ما تستهلكه الشاشات وواجهات canvas وكود الصور فعليًا. هذا المحول يحول أي ثلاثية من hue و saturation و lightness إلى قنوات دقيقة من 0–255.
كيف يعمل تحويل HSL إلى RGB
- حوّل S و L إلى كسور واحسب الـ chroma C = (1 − |2L − 1|) × S.
- اقسم الـ hue على 60 لتعرف مقطعها على عجلة الألوان واحسب القيمة الوسيطة X = C × (1 − |(H/60 mod 2) − 1|).
- عيّن C و X و 0 إلى خانة R و G و B وفقًا لذلك المقطع.
- أضف تعويض الإضاءة L − C/2 إلى الثلاث قنوات واضرب الناتج في 255.
مثال عملي
النتيجة دقيقة حتى التقريب النهائي إلى قنوات صحيحة. قيم الـ hue أو saturation الكسرية مدعومة وستقع ببساطة على أقرب ثلاثي 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) |