محوّل رموز الألوان
الصق لونًا بصيغة HEX (#ff6600 أو #f60)، أو rgb(255, 102, 0)، أو مفصولًا بفواصل 255, 102, 0، أو hsl(24, 100%, 50%)، وسيعيده المحوّل فورًا بالصيغتين الأخريين، مع معاينة مباشرة لعيّنة اللون ونسخ كل صيغة بنقرة واحدة.
كيف يعمل تحويل رموز الألوان
-
1
أدخِل لونًا بصيغة مدعومة
HEX (#abc و#abcdef)، أو rgb(r, g, b)، أو مفصولًا بفواصل r, g, b، أو hsl(h, s%, l%).
-
2
يُحلَّل إلى تمثيل داخلي
تحوّل الأداة القيمة إلى RGB داخليًا، ثم تشتق منها ما يعادلها بصيغتي HEX وHSL.
-
3
تُعرَض كل الصيغ
تُعرض سلاسل HEX وRGB وHSL المطابقة جنبًا إلى جنب.
-
4
معاينة مباشرة للعيّنة
تُظهر اللون الناتج في لمحة، لتتأكد من التحويل قبل النسخ.
الصيغ المدعومة
| الصيغة | مثال | الاستخدام |
|---|---|---|
| HEX من 3 خانات | #F66 |
اختصار؛ للألوان ذات الأرقام المتكررة فقط |
| HEX من 6 خانات | #FF6B6B |
الافتراضي في CSS والتصميم الجرافيكي |
| RGB | rgb(255, 107, 107) |
CSS وJS وبرامج التصميم |
| مفصول بفواصل | 255, 107, 107 |
نفس RGB دون صيغة الدالة |
| HSL | hsl(0, 100%, 71%) |
أسهل في التفكير بدلالة درجة اللون/التشبّع/الإضاءة |
متى تستخدم أيًّا منها
- HEX لـ CSS الثابت وتسليم التصميم.
- RGB عند تمرير القنوات إلى JavaScript أو برامج التصميم.
- HSL عند ضبط الإضاءة أو التشبّع، فالنموذج الذهني أوضح من RGB.
توجد صيغ أخرى مثل HSV وCMYK وLAB وLCH وOKLCH في أدوات التصميم. تصف جميعها اللون نفسه بطرق مختلفة، لكن هذا المحوّل يركّز على الصيغ الثلاث الأساسية للويب أعلاه.
الدقة
- التحويلات بين HEX وRGB وHSL دقيقة: HEX وRGB هما نموذج اللون نفسه، وHSL تُشتق من RGB بمعادلة قياسية.
- تُقرَّب قيم HSL إلى أعداد صحيحة، لذا قد تنتقل الخانة الأخيرة عند التحويل ذهابًا وإيابًا. اللون المرئي متطابق؛ استخدم HEX عندما تحتاج إلى نسخة مطابقة بدقة تامة.
الأسئلة الشائعة
استخدم HEX أو rgb() لتوافق واسع، وhsl() عندما تريد سهولة القراءة. تدعم المتصفحات الحديثة أيضًا oklch() وصيغًا أخرى، لكن HEX يبقى الخيار الافتراضي الأكثر أمانًا.
لا، يقبل المحوّل الألوان المعتمة فقط: HEX من 3 أو 6 خانات، وrgb() وhsl() دون قناة ألفا. استخدم rgba() أو HEX من 8 خانات مباشرة في CSS.
لا، يقبل المحوّل الصيغ الرقمية الثلاث فقط. حوِّل اسم اللون إلى HEX أولًا باستخدام منتقي الألوان أو البحث عبر الإنترنت.
تُعرض HSL بدرجة لون وتشبّع وإضاءة بأعداد صحيحة، لذا قد يتحرك الرقم بمقدار نقطة واحدة عند التحويل ذهابًا وإيابًا. اللون المرئي متطابق؛ استخدم HEX عندما تحتاج إلى نسخة مطابقة تمامًا.
أدوات ذات صلة
مرجع جدول ASCII
جدول ASCII كامل من 0 إلى 127 مع التمثيل العشري والست عشري والثماني والثنائي والمرجع الرقمي في HTML لكل محرف، بما في ذلك أكواد التحكم مثل NUL وLF وDEL.
مرجع أحرف HTML
قائمة قابلة للبحث بكيانات HTML، مع رموزها المسمّاة والرقمية، بالإضافة إلى خيار النسخ بنقرة واحدة للأحرف والرموز الخاصة.
منسق JSON
الصق JSON لتنسيقه بمسافتين أو أربع مسافات، أو تصغيره إلى ناتج مضغوط، أو فحص بنيته بسرعة قبل نسخ النتيجة.
مرجع اختصارات لوحة المفاتيح
ابحث في الاختصارات الافتراضية الموثقة لـ VS Code وChrome وBash مع GNU Readline على macOS وWindows وLinux.
مولد لوحة الألوان
أنشئ لوحات ألوان أحادية أو متجاورة أو مكملة أو ثلاثية أو رباعية من لون HEX أساسي، ثم صدّر متغيرات CSS جاهزة للنسخ.
عدّاد FPS
قِس معدل الإطارات FPS في المتصفح عبر requestAnimationFrame: تنعيم، وأدنى وأقصى معدل إطارات، وحد تنبيه، ورسم بياني اختياري. يعمل محليًا بلا رفع ملفات وبلا API.