كيفية التحويل من HEX إلى HSL
حوّل رموز الألوان من HEX إلى HSL فورًا. أدخل قيمة HEX أو RGB أو استخدم أشرطة التمرير، فتتحدث كل الصيغ معًا، مع معاينة للون والمعادلة وجدول بالألوان الشائعة.
- اكتب قيمة HEX مثل #3B82F6 أو الصقها في الحقل المخصص لها أعلاه.
- تتحدث قيمة HSL فورًا: #3B82F6 يساوي hsl(217, 91%, 60%). وتتحدث الصيغ الأخرى ومعاينة اللون أيضًا.
- انسخ قيمة HSL إلى ملف CSS أو أداة التصميم أو الكود.
معادلة التحويل من HEX إلى HSL
حوّل الأحمر والأخضر والأزرق إلى نطاق 0–1. الإضاءة هي متوسط أكبر قناة وأصغرها، ويزداد التشبع بازدياد الفرق بينهما، ودرجة اللون هي موقع القناة الأقوى على دائرة الألوان ذات 360°:
#3B82F6 → hsl(217, 91%, 60%)
ألوان شائعة بصيغتي HEX وHSL
| HEX | HSL |
|---|---|
#000000 | hsl(0, 0%, 0%) |
#FFFFFF | hsl(0, 0%, 100%) |
#FF0000 | hsl(0, 100%, 50%) |
#00FF00 | hsl(120, 100%, 50%) |
#0000FF | hsl(240, 100%, 50%) |
#FFFF00 | hsl(60, 100%, 50%) |
#00FFFF | hsl(180, 100%, 50%) |
#FF00FF | hsl(300, 100%, 50%) |
#808080 | hsl(0, 0%, 50%) |
#FFA500 | hsl(39, 100%, 50%) |
#800080 | hsl(300, 100%, 25%) |
#3B82F6 | hsl(217, 91%, 60%) |
ما هما HEX وHSL
لون HEX هو علامة # يليها ستة أرقام ست عشرية: رقمان لكل من الأحمر والأخضر والأزرق، من 00 (لا شيء) إلى FF (الحد الأقصى). وهو أشهر طريقة لكتابة الألوان في CSS وأدوات التصميم.
يصف HSL اللون بدرجة اللون (زاوية من 0 إلى 360 على دائرة الألوان) والتشبع والإضاءة (كلاهما بالنسبة المئوية)، فيسهل إنشاء درجات أفتح أو أغمق أو أهدأ من اللون نفسه.
الأسئلة الشائعة
هل يتغير اللون عند التحويل؟
تصف HEX وRGB وHSL ألوان الشاشة نفسها، لذا فالتحويل بينها دقيق (تُقرَّب قيم HSL إلى أعداد صحيحة). أما CMYK فللطباعة، والنتيجة المطبوعة تعتمد على ملف ألوان الطابعة، فاعتبر قيم CMYK المحسوبة من الشاشة نقطة بداية.
هل يمكنني استخدام النتيجة في CSS؟
نعم. يقبل CSS مباشرة hex (#3B82F6) وrgb(59, 130, 246) وhsl(217, 91%, 60%). أما CMYK فليس صيغة CSS، ويُستخدم في الطباعة وبرامج التصميم.
ماذا عن الشفافية؟
أضف قيمة ألفا: hex من 8 أرقام (#3B82F680) أو rgba()/hsla() في CSS. يعمل المحوّل على اللون المعتم، وتبقى قيمة ألفا نفسها في كل الصيغ.
هل هذه الأداة مجانية؟
نعم، إنها مجانية. دون تسجيل أو بريد إلكتروني. تظهر النتيجة في هذه الصفحة.
كيف أحصل على النتيجة؟
استخدم الأداة في هذه الصفحة. تظهر النتيجة هنا دون الحاجة إلى إرسالها بالبريد الإلكتروني.