Skip to main content

مُحَوِّل HEX إلى HSL قم بتحويل رموز الألوان HEX إلى قيم HSL (درجة اللون، التشبع، الإضاءة).

مُحَوِّل HEX إلى HSL illustration
🎨

مُحَوِّل HEX إلى HSL

قم بتحويل رموز الألوان HEX إلى قيم HSL (درجة اللون، التشبع، الإضاءة).

1

أدخل لون HEX

اكتب رمز اللون HEX أو استخدم محدد الألوان لتحديد لونك.

2

اقرأ قيم HSL

انظر إلى قيم Hue (0-360°) و Saturation (0-100%) و Lightness (0-100%) في الحال.

3

انسخ إخراج HSL

انسخ قيمة دالة CSS hsl() لاستخدامها مباشرة في أوراق الأنماط الخاصة بك.

Loading tool...

What Is مُحَوِّل HEX إلى HSL?

مُحَوِّل HEX إلى HSL يُغيّر رموز الألوان السداسية عشرية إلى نموذج لون HSL (درجة اللون، التشبع، الإضاءة). على عكس RGB الذي يصف الألوان من خلال مزيج الضوء الأحمر والأخضر والأزرق، يصف HSL الألوان بطريقة أكثر直ورة للإنسان. درجة اللون هي اللون نفسه (مُقاس بالدرجات حول عجلة الألوان: 0° هو أحمر، 120° هو أخضر، 240° هو أزرق). التشبع يصف شدة أو نقاء اللون (0% هو رمادي، 100% هو مُبهِر تمامًا). الإضاءة تصف مدى إضاءة أو ظلمة اللون (0% هو أسود، 50% هو لون نقي، 100% هو أبيض). هذا يجعل HSL لا غنى عنه لإنشاء لوحات الألوان، وتعديل السطوع دون تغيير درجة اللون، وإنشاء مخططات ألوان متناسقة. يحتاج المصممون والمطورون بشكل متكرر إلى تحويل من HEX (التنسيق القياسي للويب) إلى HSL لإجراء تعديلات ذات معنى. على سبيل المثال، إنشاء ظل أغمق هو أمر简单 في HSL - فقط قم بتقليل الإضاءة - بينما في HEX أو RGB، ستحتاج إلى تعديل جميع القنوات تناسبيًا.

Why Use مُحَوِّل HEX إلى HSL?

  • انظر إلى اللون مُفصلاً إلى مكونات متوافقة من الناحية الحسية
  • معاينة لون حية تحدث تحديثًا عند كتابة رمز HEX
  • إخراج دالة CSS hsl() جاهزة للاستخدام المباشر في أوراق الأنماط
  • يدعم رموز HEX ثلاثية وسداسية الأرقام
  • مفيد لفهم وتعديل العلاقات اللونية

Common Use Cases

تصميم لوحة الألوان

تحويل ألوان HEX الخاصة بالعلامة التجارية إلى HSL لإنشاء متغيرات بسهولة عن طريق تعديل التشبع والإضاءة.

توليد السمات

بناء متغيرات سمة خفيفة وغامقة bằng تعديل قيمة الإضاءة مع الحفاظ على زاوية اللون الثابتة.

خصائص CSS المخصصة

تخزين قيم HSL كمتغيرات CSS مرنة للتحكم في الألوان: --primary-h، --primary-s، --primary-l.

تعديلات إمكانية الوصول

تعديل قيم الإضاءة لضمان نسب التباين الكافية بين النص والخلفيات.

Technical Guide

التحويل من HEX إلى HSL يتم أولاً بفك تشفير السلسلة السداسية عشرية إلى قيم RGB (0-255)، ثم التحويل إلى HSL. يُ нормي الخوارزمية RGB إلى مدى 0-1، ويجد القيمة القصوى والقيمة الدنيا للقناة، ويهمل: الإضاءة = (القصوى + الدنيا) / 2. إذا كانت القيمة القصوى تساوي القيمة الدنيا، فإن اللون هو أكروماتيك (رمادي) مع درجة لون = 0 وتشبع = 0. خلاف ذلك، التشبع = دلتا / (1 - |2L - 1|) حيث دلتا = القصوى - الدنيا. تعتمد الدرجة على القناة التي هي القيمة القصوى: إذا كان الأحمر هو القيمة القصوى، H = (G-B)/دلتا؛ إذا كان الأخضر، H = (B-R)/دلتا + 2؛ إذا كان الأزرق، H = (R-G)/دلتا + 4. النتيجة تُضرب في 60 لتحويلها إلى درجات (0-360). HSL هو تمثيل أسطواني لمكعب RGB، مما يجعله أكثر直ورة للتعامل مع الألوان. هناك فرق مهم: إضاءة HSL بنسبة 50% تمثل الشكل الأكثر وضوحًا لأي درجة لون، بينما 0% هو دائمًا أسود و100% هو دائمًا أبيض. هذا يختلف عن HSV/HSB حيث تمثل القيمة 100% (السطوع) اللون الأكثر وضوحًا.

Tips & Best Practices

  • 1
    الإضاءة HSL بنسبة 50% تعطي نسخة純ة من أي زاوية لون - مفيدة لألوان القاعدة
  • 2
    إزالة التشبع (تقليل S) يخلق أطوارًا محترفة ومُهدهدة
  • 3
    HSL مثالية للتحكم في الألوان CSS لأن زاوية اللون والتشبع والإضاءة قابلة للت調節 بشكل مستقل
  • 4
    قيم R و G و B المتساوية دائمًا في HEX تنتج H=0، S=0 في HSL (رمادي نقي)
  • 5
    دعم CSS الحديث لدالة hsl() أصلاً في جميع المتصفحات - لا يلزم التحويل في وقت التشغيل

Related Tools

Frequently Asked Questions

Q ما هو نموذج اللون HSL؟
HSL يعني زاوية اللون (زاوية لونية 0-360°) و التشبع (كثافة 0-100%) و الإضاءة (سطوع 0-100%). إنه تمثيل أسطواني أكثر直ورة للبشر من RGB.
Q لماذا نتحول من HEX إلى HSL؟
HSL يجعل من السهل إنشاء متغيرات لونية. يمكنك إضاءة أو غامقة أو إزالة تشبع اللون عن طريق تغيير قيمة واحدة، بينما في HEX سوف تحتاج إلى تعديل جميع الأحرف الستة.
Q هل دعم hsl() متوفر في CSS؟
نعم، دعم hsl() متوفر في جميع المتصفحات الحديثة منذ IE9. يدعم CSS الحديث أيضًا بنية الصياغة الجديدة الفاصلة: hsl(217 91% 60%).
Q كيف أغ彡ر لون HEX باستخدام HSL؟
تحويل HEX إلى HSL، ثم تقليل قيمة الإضاءة. على سبيل المثال، hsl(217, 91%, 60%) مظلم إلى hsl(217, 91%, 40%) يخلق ظلًا أغمق لنفس اللون الأزرق.
Q ما الفرق بين HSL و HSV؟
HSL و HSV يستخدمان زاوية اللون والتشبع، لكن يختلفان في المكون الثالث. HSL يستخدم الإضاءة (50% هي لون نقي)، بينما HSV يستخدم القيمة/السطوع (100% هو لون نقي). HSL أكثر شيوعًا في CSS.

About This Tool

مُحَوِّل HEX إلى HSL is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.