تحويل HSV (HSB) إلى HSL

أدخل الصبغة والتشبع والسطوع لتحصل على قيم HSL، وهي صيغة تسهّل صنع درجات أفتح وأغمق في CSS.

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

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

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

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

طريقة الحساب

الصبغة H لا تتغير، وL = V × (1 - S / 2)، وتشبع HSL = (V - L) / min(L, 1 - L) ويساوي صفرا عند L = 0 أو L = 1، مع S وV كسورا من 0 إلى 1.

مثال

المدخلات: الصبغة (H) = 200 °، التشبع (S) = ⁦60 %⁩، السطوع (V) = ⁦80 %⁩. النتيجة: كود HSL: hsl(200, ⁦54.5%⁩, ⁦56%⁩)، الصبغة (H): 200 °، التشبع (S): ⁦54.5 %⁩.

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

  • تُقرّب القيم في الكود إلى منزلة عشرية واحدة، لذلك قد يختلف التحويل العكسي بمقدار 1 في إحدى قنوات RGB.
  • تُعامل كل القيم على أنها في فضاء sRGB، وهو الفضاء الافتراضي للويب، وليس Display P3 أو Adobe RGB.

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

لماذا يختلف التشبع بعد التحويل إلى HSL؟

لأن النموذجين يقيسان التشبع نسبة إلى مرجع مختلف، فاللون hsv(200, ⁦60%⁩, ⁦80%⁩) يصبح hsl(200, ⁦54.5%⁩, ⁦56%⁩).

أين أجد قيم HSV في برامج التصميم؟

في منتقي الألوان في Photoshop تظهر الحقول H وS وB، وفي Figma يمكنك اختيار HSB من قائمة صيغ اللون.

هل أستطيع لصق نتيجة HSL في CSS مباشرة؟

نعم، الدالة hsl() مدعومة في كل المتصفحات الحديثة، وسطر CSS في النتائج جاهز للنسخ كما هو.