محول الألوان (HEX/RGB/HSL)
حوّل الألوان بين صيغ HEX و RGB و HSL. يتضمن منتقي ألوان مرئي ومعاينة.
طريقة الاستخدام
- أدخل قيمة لون بأي تنسيق (HEX أو RGB أو HSL)
- اطلع فورًا على القيم المحولة في جميع التنسيقات الأخرى
- استخدم منتقي الألوان لاختيار لون بصريًا
- انسخ أي تنسيق بزر النسخ
الأسئلة الشائعة
-
ما الفرق بين HEX وRGB وHSL؟
يستخدم HEX التدوين الست عشري (#FF5733). يُعرّف RGB الألوان بقيم الأحمر والأخضر والأزرق (0-255). يُعرّف HSL الألوان بالتدرج اللوني (0-360) والتشبع (0-100%) والإضاءة (0-100%).
-
أي تنسيق لون يجب استخدامه في CSS؟
الأنسيقات الثلاثة صالحة في CSS. HEX هو الأكثر إيجازًا، وRGB سهل الفهم لمزج الألوان، وHSL هو الأفضل لإنشاء تغييرات في الألوان عن طريق ضبط الإضاءة أو التشبع.
-
هل يدعم قناة ألفا/الشفافية؟
يحوّل الإصدار الحالي الألوان غير الشفافة. من المخطط دعم قنوات ألفا (RGBA وHSLA وHEX ذو 8 أرقام) في تحديث مستقبلي.
-
هل يمكنني استخدام منتقي الألوان على الهاتف المحمول؟
نعم، يستخدم حقل الألوان منتقي الألوان الأصلي على جميع الأجهزة، بما في ذلك متصفحات الهاتف المحمول.
نماذج الألوان في التصميم الرقمي
يعتمد العالم الرقمي على عدة نماذج لوصف الألوان، ولكل منها فلسفة مختلفة في تمثيل اللون. فهم هذه النماذج يجعلك مصممًا أو مطورًا أكثر كفاءة وفهمًا للأدوات التي تستخدمها.
نموذج HEX: الأكثر شيوعًا في الويب
نموذج HEX هو تمثيل مختصر للقيم الست عشرية لمكونات RGB. كل لون يُكتب كستة أرقام ست عشرية تسبقها علامة #، حيث:
- أول رقمان: مكوّن الأحمر (00 إلى FF)
- الرقمان الوسطيان: مكوّن الأخضر
- آخر رقمين: مكوّن الأزرق
مثلًا، #FF5733 يعني الأحمر 255، الأخضر 87، الأزرق 51.
الصيغة المختصرة
حين تتطابق كل زوج من الأرقام، يمكن اختصار HEX إلى ثلاثة أرقام. #FF0000 تُكتب اختصارًا #F00، و#FFFFFF تُكتب #FFF.
متى تستخدمه: في كود CSS/HTML حين تُريد قيمة مدمجة وقصيرة، وعند مشاركة الألوان مع مصممين آخرين.
نموذج RGB: المكونات الضوئية
RGB يُمثّل الألوان بثلاثة مكونات ضوئية: Red (أحمر)، Green (أخضر)، Blue (أزرق). كل مكوّن يتراوح بين 0 و255.
يعتمد على المزج التوافقي (Additive Mixing): مزج الأحمر والأخضر والأزرق بأقصى قيمهم ينتج الأبيض. هذا عكس مزج أصباغ الرسم التقليدي.
RGB في CSS
color: rgb(255, 87, 51);
color: rgba(255, 87, 51, 0.8); /* مع شفافية */
متى تستخدمه: حين تحتاج إلى تعديل مكوّن لوني برمجيًا، أو حين تعمل مع canvas أو WebGL أو معالجة الصور.
نموذج HSL: الأقرب للتفكير البشري
HSL هو النموذج الأكثر توافقًا مع الإدراك البشري للألوان. يُعرّف كل لون بثلاثة محاور:
- التدرج اللوني (Hue): زاوية على عجلة الألوان من 0 إلى 360 درجة. 0° أحمر، 120° أخضر، 240° أزرق.
- التشبع (Saturation): نسبة من 0% (رمادي) إلى 100% (لون زاهٍ مكتمل).
- الإضاءة (Lightness): نسبة من 0% (أسود) إلى 100% (أبيض).
قوة HSL في التصميم
الميزة الكبرى لـ HSL أنه يُسهّل إنشاء متغيرات للألوان. لإنشاء ظل أفتح للون ما، زد قيمة الإضاءة. لإنشاء ظل داكن، خفّضها. للحصول على لون مكمّل (Complementary)، أضف 180 درجة لقيمة التدرج.
:root {
--primary: hsl(200, 80%, 50%);
--primary-light: hsl(200, 80%, 70%);
--primary-dark: hsl(200, 80%, 30%);
}
متى تستخدمه: في تصميم أنظمة الألوان وإنشاء درجات اللون، وفي CSS Variables لمنظومات تصميم متسقة.
اختيار النموذج الصحيح حسب السياق
| السياق | النموذج المُوصى به |
|---|---|
| قيم CSS ثابتة | HEX |
| معالجة صور برمجيًا | RGB |
| أنظمة تصميم ومتغيرات | HSL |
| تطبيقات CSS Variables | HSL |
| مشاركة قيم مع مصممين | HEX أو RGB |
دور الشفافية (Alpha Channel)
الامتدادات RGBA وHSLA تُضيف قناة رابعة للشفافية تتراوح بين 0 (شفاف كليًا) و1 (معتم كليًا). HEX ذو 8 أرقام يُضيف بايتًا إضافيًا للشفافية (مثل #FF5733CC). فهم الشفافية ضروري للتراكبات والظلال وتأثيرات التصميم الحديثة.