CodeKitHubما هي هذه الأداة؟
تُكتب الألوان على الويب بعدة صيغ متكافئة، جميعها معرّفة في مواصفات ألوان CSS على MDN. صيغة HEX (#4f46e5) هي الشكل المختصر المستخدم في كل مكان في CSS وفي تسليم التصاميم. صيغة RGB (rgb(79, 70, 229)) تحدد مكونات الأحمر والأخضر والأزرق مباشرة، وهو ما يحتاجه الكود غالبًا. صيغة HSL (hsl(243, 75%, 59%)) تصف تدرج اللون والتشبع والإضاءة — وهي الصيغة الأسهل فهمًا عند تعديل لون، مثل جعله أغمق أو أقل تشبعًا.
الصيغ الثلاث تصف اللون نفسه تمامًا؛ هذه الأداة تحوّل بينها بدقة وتعرض معاينة لتتأكد أنه اللون الذي تقصده.
لماذا تستخدمها؟
- تقبل أي صيغة إدخال — HEX (3 أو 6 خانات) أو RGB أو HSL — وتعطيك جميع الصيغ كمخرجات.
- معاينة حية للون بحيث ترى اللون نفسه، لا الأرقام فقط.
- منتقي ألوان بصري عندما تفضّل الاختيار بالعين.
- نسخ بنقرة واحدة لكل صيغة، جاهزة لـ CSS أو الكود.
- مجاني وفوري وبدون رفع ملفات.
كيفية الاستخدام
- اكتب أو الصق لونًا: #4f46e5 أو rgb(79, 70, 229) أو hsl(243, 75%, 59%) كلها تعمل.
- أو انقر على منتقي الألوان واختر بصريًا.
- اقرأ الصيغ الثلاث في النتائج وتحقق من معاينة اللون.
- انقر "نسخ" بجانب الصيغة التي تحتاجها.
مثال
الإدخال
#4f46e5الناتج
HEX: #4f46e5
RGB: rgb(79, 70, 229)
HSL: hsl(243, 75%, 59%)ثلاث صيغ للترميز، ولون واحد مطابق.
أي صيغة يجب أن تستخدم؟
الصيغ الثلاث تصف اللون نفسه بدقة تامة — والاختيار بينها يتعلق بأيها أسهل للعمل بها في المهمة الحالية، وليس بالدقة.
| الصيغة | الأنسب لـ | السبب |
|---|---|---|
| HEX (#4f46e5) | CSS، تسليم التصاميم، النسخ واللصق السريع | الأقصر كتابة ولصقًا؛ الصيغة الشائعة عالميًا في أدوات التصميم مثل Figma. |
| RGB (rgb(79,70,229)) | الكود الذي يتعامل مباشرة مع القنوات، العمل مع الرسوميات والصور | تطابق طريقة تخزين واجهات برمجة الرسوميات وبيانات بكسل الصور للألوان فعليًا. |
| HSL (hsl(243,75%,59%)) | تعديل لون — أفتح أو أغمق أو أكثر أو أقل تشبعًا | الإضاءة والتشبع أرقام منفصلة يمكن ضبطها مباشرة، بخلاف HEX/RGB حيث تتغير كل قناة. |
حالات استخدام شائعة
- اختيار لون بصريًا في أداة تصميم، ثم تحويله إلى قيمة HEX أو RGB الدقيقة المطلوبة في CSS أو الكود.
- توليد مجموعة من التدرجات المرتبطة (أفتح/أغمق) بتحويل اللون إلى HSL وتعديل الإضاءة ثم التحويل مرة أخرى.
- مطابقة لون العلامة التجارية عبر أدوات مختلفة يتوقع كل منها صيغة مختلفة — ملف شعار بصيغة RGB، دليل تصميم بصيغة HEX، متغير CSS يحتاج HSL للتصميم الديناميكي.
- التحقق من أن لونًا مأخوذًا من لقطة شاشة أو ملف تصميم (غالبًا بصيغة RGB) يطابق قيمة HEX في ورقة الأنماط.
الأسئلة الشائعة
متى يجب أن أستخدم HSL بدلًا من HEX أو RGB؟
عندما تريد التفكير في اللون منطقيًا. جعل لون أغمق بنسبة 10% في HSL يعني تقليل الإضاءة بمقدار 10 نقاط؛ أما في HEX أو RGB فعليك إعادة حساب جميع القنوات. لهذا السبب غالبًا ما تُعرَّف أنظمة الألوان التصميمية بصيغة HSL.
هل تدعم الأداة صيغة HEX المختصرة من 3 خانات مثل #fff؟
نعم. #fff هي اختصار لـ #ffffff — كل خانة تُكرَّر مرتين. كلا الشكلين مقبول، والمخرجات تعرض الصيغة الكاملة من 6 خانات.
ماذا عن الشفافية (alpha)؟
هذه الأداة تحوّل الألوان المعتمة (قيم RGB/HSL). إذا احتجت للشفافية، أضف قيمة الألفا بنفسك: rgba(79, 70, 229, 0.5) أو #4f46e580 — ويبقى جزء اللون كما هو.
لماذا تختلف قيم HSL عندي بمقدار 1 عن أداة أخرى؟
بسبب التقريب. تحويل HSL↔RGB ينتج قيمًا كسرية، وكل أداة تقرّبها بطريقة مختلفة. فرق ±1 في التدرج أو النسبة المئوية غير مرئي وطبيعي.
هل أسماء الألوان مثل 'red' مدعومة؟
ليس في المرحلة الأولى — تركز الأداة على الصيغ الرقمية الثلاث التي يحوّلها المطورون أكثر. أدخل قيمة اللون بصيغة HEX/RGB/HSL، أو اختره بصريًا عبر المنتقي.
متى يجب أن أستخدم HEX أو RGB أو HSL؟
إذا احتجت للشفافية، استخدم HEX من 8 خانات (#RRGGBBAA) أو rgba() — فصيغة HEX من 6 خانات لا تحتوي قناة ألفا. وإذا أردت تدرجات أفتح أو أغمق من نفس اللون، فـ HSL هي الأسهل: أبقِ التدرج والتشبع ثابتين وغيّر فقط رقم الإضاءة. أما للنسخ واللصق المباشر في CSS أو أدوات التصميم، تبقى صيغة HEX من 6 خانات الأكثر قبولًا عالميًا.