تحويل HSL إلى HSLA مع الشفافية

أدخل الصبغة والتشبع والإضاءة ونسبة الشفافية، فتحصل على كل صيغ CSS الشائعة للون شبه الشفاف.

جارٍ تحميل الأداة…

المعالجة والخصوصية: تُحسب النتيجة داخل متصفحك ولا تُرسل بياناتك إلى أي خادم.

طريقة الاستخدام

  1. أدخل الصبغة H، التشبع S، الإضاءة L والشفافية (alpha).
  2. تظهر النتيجة فورًا وتتحدّث مع كل تعديل.
  3. انسخ النتيجة، أو انسخ رابطًا يحفظ القيم نفسها لمشاركتها.

طريقة الحساب

HSL إلى RGB وفق CSS Color 4: a = S × min(L, 1 − L)، والقناة = L − a × max(−1, min(k − 3, 9 − k, 1)) حيث k = (n + H ÷ 30) mod 12 وn = 0 و8 و4. الشفافية تصبح بايتًا round(alpha × 255).

مثال

المدخلات: الصبغة H = 210 درجة، التشبع S = ⁦50 %⁩، الإضاءة L = ⁦40 %⁩، الشفافية (alpha) = 0.8 من 0 إلى 1. النتيجة: صيغة hsla(): hsla(210, ⁦50%⁩, ⁦40%⁩, 0.8).

الحدود والملاحظات

  • رمز HEX وrgba() مقربان إلى أعداد صحيحة، فقد يختلفان بدرجة واحدة عن الحساب الدقيق.

أسئلة شائعة عن هذه الأداة

ما الفرق بين hsl() وhsla()؟

hsla() تضيف قيمة الشفافية. في CSS الحديثة تقبل hsl() الشفافية أيضًا بعد شرطة مائلة.

هل الشفافية بالنسبة المئوية أم من 0 إلى 1؟

CSS تقبل الصيغتين، وهذه الأداة تستخدم 0 إلى 1، فالقيمة 0.8 تساوي ⁦80%⁩.

هل تغير الشفافية الصبغة أو الإضاءة؟

لا، الشفافية تحدد فقط مقدار ظهور الخلفية من خلف اللون.