مُحَوِّل HEX إلى HSL قم بتحويل رموز الألوان HEX إلى قيم HSL (درجة اللون، التشبع، الإضاءة).
مُحَوِّل HEX إلى HSL
قم بتحويل رموز الألوان HEX إلى قيم HSL (درجة اللون، التشبع، الإضاءة).
أدخل لون HEX
اكتب رمز اللون HEX أو استخدم محدد الألوان لتحديد لونك.
اقرأ قيم HSL
انظر إلى قيم Hue (0-360°) و Saturation (0-100%) و Lightness (0-100%) في الحال.
انسخ إخراج HSL
انسخ قيمة دالة CSS hsl() لاستخدامها مباشرة في أوراق الأنماط الخاصة بك.
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) يخلق أطوارًا محترفة ومُهدهدة
-
3HSL مثالية للتحكم في الألوان CSS لأن زاوية اللون والتشبع والإضاءة قابلة للت調節 بشكل مستقل
-
4قيم R و G و B المتساوية دائمًا في HEX تنتج H=0، S=0 في HSL (رمادي نقي)
-
5دعم CSS الحديث لدالة hsl() أصلاً في جميع المتصفحات - لا يلزم التحويل في وقت التشغيل
Related Tools
مُحَوِّل HEX إلى RGB
قم بتحويل رموز الألوان HEX إلى قيم RGB في الحال مع معاينة مباشرة للعينة.
🎨 Color Tools
مُحَوِّل HSL إلى HEX
احول قيم الألوان HSL إلى رموز HEX باستخدام الشرائح التفاعلية.
🎨 Color Tools
مُحَوِّل RGB إلى HSL
قم بتحويل قيم RGB إلى تنسيق لون HSL باستخدام شريحة تفاعلية.
🎨 Color Tools
محدد اللون
محدد لون تفاعلي مع مخرجات HEX و RGB و HSL و CMYK.
🎨 Color Tools
مُولِد درجات الألوان
إنشاء درجات أغمق لأي لون مع عدد خطوات قابل للتعديل.
🎨 Color ToolsFrequently Asked Questions
Q ما هو نموذج اللون HSL؟
Q لماذا نتحول من HEX إلى HSL؟
Q هل دعم hsl() متوفر في CSS؟
Q كيف أغ彡ر لون HEX باستخدام HSL؟
Q ما الفرق بين HSL و HSV؟
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.