ImageColorPicker.com

محول HEX إلى HSL

حوّل أي لون من HEX إلى HSL — فورًا ومجانيًا

#2ECC71

ألصق أي قيمة لون — سنكشف عن الصيغة تلقائيًا.

نتيجة HSL
تدرج اللون
145°
تشبع
63%
سطوع
49%

هذا اللون بجميع الصيغ

ملف CMYK: Coated FOGRA39 (الإعداد الافتراضي لـ Photoshop في أوروبا)

HSL يصف اللون بالطريقة التي يتكلم بها الناس: أي درجة لونية، مدى التشبع، ومدى الإضاءة. تحويل كود HEX إلى HSL أسرع طريقة للحصول على شكل يمكن تعديله فعليًا — تفتيح، تخفيف التشبع، أو بناء سُلّم لوني كامل.

كيف يعمل تحويل HEX إلى HSL

  1. حوّل كود HEX إلى RGB واقسم كل قناة على 255، حتى تصبح القيم الثلاث بين 0 و1.
  2. ابحث عن أكبر وأصغر القيم من الثلاث. متوسطهما هو الإضاءة L.
  3. الفرق بينهما يحدد التشبع S: اقسمه على (2 − max − min) للألوان الفاتحة، أو على (max + min) للألوان الداكنة.
  4. القناة التي تحوي القيم القصوى تُحدد اللون H — الأحمر عند 0°، الأخضر عند 120°، الأزرق عند 240° — والقناتان الأخريان يحددان موضع الدرجة داخل ذلك القطاع.

مثال عملي

HEX #2ECC71=HSL hsl(145, 63%, 49%)

الرياضيات دقيقة، لكن قيم HSL عادةً تُقرب لدرجات كاملة ونسب مئوية. لذلك التحويل العكسي قد يبعد بضع خطوات RGB عن الأصل — غير مرئي عمليًا، لكن من الجيد معرفته إذا كررت التحويل ذهابًا وإيابًا.

شرح HEX و HSL

ما هو HEX؟

كود HEX هو رقم سداسي عشري مكوّن من ست خانات يعبّر عن قنوات الأحمر والأخضر والأزرق في اللون مسبوقًا بعلامة #. كل زوج من الخانات يغطي قناة واحدة من 00 (لا شيء) إلى FF (كامل)، مما يوفّر نفس 16.7 مليون لون مثل RGB بصيغة أقصر بكثير. تُستخدم HEX بشكل افتراضي في CSS وأدوات التصميم وإرشادات العلامات التجارية.

البناء:
#RRGGBB
النطاق:
00–FF لكل قناة
الأفضل لـ:
CSS، تسليم التصميم، إرشادات العلامة التجارية

ما هو HSL؟

HSL يقسّم اللون إلى درجة اللون (hue) من 0–360° على عجلة الألوان، التشبع (saturation) — مدى حيوية اللون من 0–100%، والسطوع (lightness) — مدى إشراقه من 0–100%. بما أن كل جزء يطابق طريقة وصف الناس للألوان، فـ HSL هي أسهل صيغة لبناء درجات اللون، الظلال، ولوحات ألوان متناسقة — يدويًا أو بالبرمجة.

البناء:
hsl(H, S%, L%)
النطاق:
0–360°, 0–100%, 0–100%
الأفضل لـ:
لوحات ألوان، درجات وظلال، التخصيص الموضوعي

جدول تحويل من HEX إلى HSL

أكثر ألوان CSS شيوعًا، محوّلة من HEX إلى HSL.

اللونHEXHSL
black#000000hsl(0, 0%, 0%)
white#FFFFFFhsl(0, 0%, 100%)
red#FF0000hsl(0, 100%, 50%)
lime#00FF00hsl(120, 100%, 50%)
blue#0000FFhsl(240, 100%, 50%)
yellow#FFFF00hsl(60, 100%, 50%)
orange#FFA500hsl(39, 100%, 50%)
teal#008080hsl(180, 100%, 25%)
purple#800080hsl(300, 100%, 25%)
gray#808080hsl(0, 0%, 50%)

مزيد من محولات الألوان

أسئلة شائعة

حوّل كود HEX إلى RGB واقسم كل قناة على 255، حتى تصبح القيم الثلاث بين 0 و1. ابحث عن أكبر وأصغر القيم من الثلاث. متوسطهما هو الإضاءة L. الفرق بينهما يحدد التشبع S: اقسمه على (2 − max − min) للألوان الفاتحة، أو على (max + min) للألوان الداكنة. القناة التي تحوي القيم القصوى تُحدد اللون H — الأحمر عند 0°، الأخضر عند 120°، الأزرق عند 240° — والقناتان الأخريان يحددان موضع الدرجة داخل ذلك القطاع.

الرياضيات دقيقة، لكن قيم HSL عادةً تُقرب لدرجات كاملة ونسب مئوية. لذلك التحويل العكسي قد يبعد بضع خطوات RGB عن الأصل — غير مرئي عمليًا، لكن من الجيد معرفته إذا كررت التحويل ذهابًا وإيابًا.

HSL يقسّم اللون إلى درجة اللون (hue) من 0–360° على عجلة الألوان، التشبع (saturation) — مدى حيوية اللون من 0–100%، والسطوع (lightness) — مدى إشراقه من 0–100%. بما أن كل جزء يطابق طريقة وصف الناس للألوان، فـ HSL هي أسهل صيغة لبناء درجات اللون، الظلال، ولوحات ألوان متناسقة — يدويًا أو بالبرمجة.

نعم. زر التبديل بجانب الحقل يأخذك إلى محول HSL إلى HEX، ويعمل بنفس الطريقة تمامًا. الاتجاهان يستخدمان نفس الصيغة، فقط مُطبقة بالعكس.

انتقل إلى HSL بمجرد حاجتك لتغييرات على لون ما. تثبيت H وS وتحريك L فقط يعطيك مقياسًا متناسقًا من ظلال وصبغات، وهو أصعب بكثير عمله يدويًا في HEX.