تحويل اللون بين HEX وRGB وHSL
نُشر في · آخر تحديث في 2 دقائق للقراءة
HEX وRGB وHSL تصف اللون نفسه بثلاث طرق. تعرض الأداة الثلاثة معًا وتقبل الكتابات الشائعة؛ وتدوير HSL إلى عدد صحيح يفسر فروق الدرجة الواحدة التي تراها عند العودة إلى HEX.
ثلاث كتابات للون نفسه
تعرض أداة استكشاف الألوان الصيغ الثلاث افتراضيًا مع معاينة اللون. للون الأخضر #2F4A3F:
| الصيغة | النتيجة |
|---|---|
| HEX | #2f4a3f |
| RGB | rgb(47, 74, 63) |
| HSL | hsl(156, 22%, 24%) |
تختصر أزرار HEX وRGB وHSL الثلاثة في اللوحة النتيجة إلى صيغة واحدة، وهو مفيد للنسخ كما هي.
الكتابات المقبولة
| الكتابة | مثال | نتيجة HEX |
|---|---|---|
| HEX مختصر | #fff | #ffffff |
| HEX مع الشفافية | #2F4A3F80 | #2f4a3f80 |
| RGB بفواصل | rgb(47, 74, 63) | #2f4a3f |
| RGB بمسافات | rgb(47 74 63) | #2f4a3f |
| RGB بنسب مئوية | rgb(100%, 0%, 0%) | #ff0000 |
| HSL بمسافات | hsl(156 22% 24%) | #304b40 |
أسماء الألوان مثل “rouge” والقنوات خارج النطاق من 0 إلى 255 مثل rgb(300, 0, 0) تُرفض برسالة تسرد الكتابات المقبولة.
الشفافية
تُكتب الشفافية في HEX بثمانية أرقام، أو بعد شرطة مائلة مع مسافات. اللون rgb(47 74 63 / 50%) يعطي #2f4a3f80 في HEX وrgba(47, 74, 63, 0.5) في RGB. وبالعكس يعطي #2F4A3F80 عتامة 0.502، لأن 80 بالنظام الست عشري تساوي 128 من 255.
لماذا تتغير الدرجة عند الذهاب والعودة
يُعرض HSL بأعداد صحيحة: التدرج اللوني بالدرجات والتشبع والإضاءة بالنسب المئوية. لذلك فالعودة من HSL إلى HEX تصل إلى لون مجاور لا إلى لون الانطلاق.
| الانطلاق | HSL المعروض | العودة إلى HEX |
|---|---|---|
| #2F4A3F | hsl(156, 22%, 24%) | #304b40 |
| #B5532E | hsl(16, 59%, 45%) | #b6532f |
الفرق درجة واحدة في كل قناة، لا تراها العين. ولرمز تصميم أو لعلامة تجارية احتفظ بـ HEX الأصلي مرجعًا ولا تمر عبر HSL مجددًا.
الرمادي
الرمادي تشبعه صفر ولا أثر للتدرج اللوني فيه: #808080 يعطي rgb(128, 128, 128) وhsl(0, 0%, 50%).
ما لا تقيسه الأداة
تحويل الصيغة لا يقول شيئًا عن سهولة القراءة. والأداة لا تحسب التباين بين نص وخلفيته: تحقق منه على حدة قبل النشر. وحالة رمز QR، حيث يحدد التباين سهولة القراءة، تجدها في إنشاء رمز QR يُقرأ من أول مرة.
تحقق من تحويل
- الصق اللون في الحقل: يجب أن تطابق المعاينة ما تتوقعه.
- انسخ الصيغة التي يطلبها نظامك.
- للحفاظ على اللون الدقيق احتفظ بـ HEX أو RGB بدل HSL.