Skip to main content

مُحَوِّل HSL إلى HEX احول قيم الألوان HSL إلى رموز HEX باستخدام الشرائح التفاعلية.

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

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

احول قيم الألوان HSL إلى رموز HEX باستخدام الشرائح التفاعلية.

1

تعديل أدوات التحكم في HSL

حدد القيمة اللونية (0-360°)، التشبع (0-100%)، والإضاءة (0-100%) باستخدام أدوات التحكم.

2

معاينة اللون

انظر كيف يتم تحديث مربع العينة باللون في الوقت الفعلي مع كل تعديل تقوم به على القيم.

3

نسخ الإخراج HEX

انسخ رمز HEX الناتج لاستخدامه في CSS أو أدوات التصميم أو أي تطبيق آخر.

Loading tool...

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

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

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

  • أدوات تحكم直觉ية لتدوير اللون وتعديل التشبع والإضاءة
  • يعرض جهاز التحكم في اللون الطيف الكامل للألوان لسهولة اختيار الألوان
  • يتحديث مربع العينة باللون في الوقت الفعلي مع كل تعديل تقوم به على القيم
  • نسخ مباشر للرمز HEX الناتج لتطوير الويب
  • لا يتطلب التسجيل - يعمل完全ًا داخل متصفحك

Common Use Cases

استكشاف الألوان

استكشف عجلة الألوان بطرق直觉ية من خلال تعديل اللون، ثم ضبط التشبع والإضاءة للحصول على الظل المثالي.

بناء السمات

ابدأ بنظام تصميم يستند إلى HSL واهتم بالتحويل النهائي للألوان إلى HEX لاستخدامها في إنتاج CSS.

توليد لوحة الألوان

احتفظ بالقيمة اللونية ثابتة مع تغيير التشبع والإضاءة لإنشاء درجات وألوان متناسقة، ثم استخدم رمز HEX للتصدير.

توثيق ألوان العلامة التجارية

وثق ألوان العلامة التجارية في كل من تنسيقات HSL (لمرونتها) وHEX (للتطبيق).

Technical Guide

تحويل HSL إلى HEX هو عملية ثنائية: HSL → RGB → HEX. يُحسب خوارزمية HSL إلى RGB أولاً الشدة (كثافة اللون): C = (1 - |2L - 1|) × S ، حيث S و L في نطاق 0-1. القيمة الوسيط X = C × (1 - |(H/60) mod 2 - 1|) تحدد المكون الثاني للون. بناءً على القطاع 60° من عجلة الألوان الذي نحن فيه ، يتم تعيين R و G و B من C و X و 0. أخيرًا ، يُضاف تعديل الإضاءة m = L - C/2 إلى جميع القنوات. يتم تحويل قيم R و G و B الناتجة (0-1) إلى نطاق 0-255 وتحويلها إلى سلاسل سداسية عشرية مكونة من حرفين. تشمل الحالات الخاصة: الألوان غير الملوّنة (S=0) حيث R=G=B=L×255 ؛ الأسود الخالص (L=0) الذي ينتج #000000 ؛ والأبيض النقي (L=100٪) الذي ينتج #FFFFFF. الخوارزمية حتمية وخالية من الفقدان للألوان الـ 16.7 مليون التي يمكن تمثيلها في RGB بسعة قناة 8 بت. فهم هذه الأنابيب هو مفتاح التلاعب اللوني البرمجي في لغات JavaScript و Python وغيرها.

Tips & Best Practices

  • 1
    حدد الإضاءة إلى 50% للحصول على إصدار أكثر وضوحًا لأي لون
  • 2
    إن خفض التشبع نحو 0% يخلق درجات محترفة متوسطة للألوان في التصاميم
  • 3
    الألوان المكملة هي بالضبط 180° بعيدة عن بعضها البعض على عجلة الألوان
  • 4
    الإضاءة عند 0% تنتج دائمًا #000000 بغض النظر عن اللون والتشبع
  • 5
    من أجل سهولة الوصول إلى الويب، تأكد من وجود تحديد واضح بنسبة 4.5:1 على الأقل - قم بتعديل الإضاءة لتحقيق ذلك

Related Tools

Frequently Asked Questions

Q كيف تختلف HSL عن RGB?
RGB يحدد الألوان من خلال مزيج الضوء الأحمر والأخضر والأزرق. HSL يصف الألوان بواسطة قيمتها اللونية (اللون)، والتشبع (الشدة)، والإضاءة (السطوع). HSL أكثر直觉ية للبشر لفهمها وضبطها.
Q هل يمكنني الحصول على قيم HEX دقيقة من HSL?
نعم، التحويل حاسم. ومع ذلك، بسبب أن قيم HSL يمكن أن تكون كسور بينما يستخدم HEX الأعداد الصحيحة (0-255 لكل قناة)، بعض الفروقات الدقيقة في HSL قد تُستدل إلى نفس القيمة HEX.
Q أي قيم HSL تنتج اللون الأحمر النقي?
اللون الأحمر النقي هو hsl(0, 100%, 50%) والذي يتحول إلى #FF0000. القيمة اللونية 0° هي الحمرة، و100% تشبع يعني لونًا كاملاً، و50% إضاءة تعني عدم تحويلها إلى غامق أو فاتح.
Q هل HSL أفضل من RGB للتصميم?
لاستكشاف التصميم، نعم. HSL يسمح لك بالتحكم المستقل في اللون والشدة والسطوع. هذا يجعل إنشاء درجات وألوان متناسقة أكثر直觉ية من التعامل مع قيم RGB.
Q ما هو مدى كل قيمة HSL?
القيمة اللونية: 0-360 درجة (موقع عجلة الألوان). التشبع: 0-100% (رمادي إلى لون واضح). الإضاءة: 0-100% (أسود إلى أبيض). هذه الثلاث قيم تحدد بشكل فريد أي لون.

About This Tool

مُحَوِّل HSL إلى HEX 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.