محوّل الألوان (HEX / RGB / HSL)

كيف تعمل الأداة

يعمل المصممون عمومًا بأكواد HEX (مثل تلك المنسوخة من Figma أو برنامج تصميم)، بينما يستفيد CSS الحديث غالبًا من صيغة HSL لتعديل درجة اللون (hue) أو التشبع أو السطوع بسهولة دون إعادة حساب كود HEX يدويًا — مفيد لإنشاء نسخ أفتح أو أغمق من نفس لون العلامة التجارية لحالات hover أو disabled أو السمات الداكنة. تكتشف هذه الأداة تلقائيًا ما إذا كنت قد لصقت كود HEX أو RGB أو HSL وتحوّله إلى الصيغة التي تحتاجها.

ما الفرق بين HEX وRGB وHSL؟

يصف كل من HEX ( #rrggbb ) وRGB ( rgb(r, g, b) ) اللون بمكوّناته الأحمر والأخضر والأزرق — HEX بالنظام السداسي عشري، وRGB بالنظام العشري — ويمثلان نفس المعلومة تمامًا بترميزين مختلفين. أما HSL (hsl(h, s%, l%)) فيصف نفس اللون بطريقة أخرى: عبر درجته (زاوية على عجلة الألوان)، وتشبعه، وسطوعه، مما يجعل من الأسهل بكثير "الاحتفاظ بنفس اللون مع تفتيحه" أو "الاحتفاظ بنفس السطوع مع تغيير الدرجة".

لماذا تُستخدم HSL بدلًا من HEX في CSS؟

لأنه من السهل اشتقاق نسخ متجانسة من لون ما بتعديل مكوّن السطوع فقط (على سبيل المثال hsl(217, 91%, 60%) للون الأساسي و hsl(217, 91%, 40%) لحالة hover أغمق)، دون الحاجة لإعادة حساب كود HEX جديد في كل مرة أو تخمين بالعين ما إذا كانت الدرجة لا تزال نفسها.

معالجة محلية 100%: يتم التحويل مباشرة في متصفحك عبر WebAssembly، دون أي اتصال بخادم خارجي.