Theme
Primary Color
أكاديمية الزيرو

الدرس 24

التحكم في درجة اللون باستخدام HSL و HSLA

معنى المصطلحات

المعنىStand ForName
درجة اللون والتشبع والإضاءةHue Saturation LightnessHSL
درجة اللون والتشبع والإضاءة مع درجة ظهور اللونHue Saturation Lightness AlphaHSLA

بدل ما تختار كمية الأحمر والأخضر والأزرق تقدر تختار اللون نفسه وبعدها تتحكم في قوة لونه وإضاءته باستخدام hsl

مثال على لون أزرق

<p class="color-example">HSL Color Example</p>
.color-example {
  color: white;
  background-color: hsl(240, 100%, 50%);
}

القيمة الأولى Hue

دي مكان اللون على دايرة الألوان بنستخدم درجات زي 0 للأحمر و 120 للأخضر و 240 للأزرق وعند 360 بنرجع للأحمر تاني

القيمة الثانية Saturation

دي قوة اللون 100% لون كامل و 0% من غير لون فبيبقى درجة رمادي حسب قيمة الإضاءة

القيمة الثالثة Lightness

دي الإضاءة 0% أسود و 100% أبيض و 50% قيمة وسطية بتظهر اللون بوضوح لما التشبع يكون 100%

درجات من نفس اللون

جرب كل سطر مكان background-color لوحده

/* Dark Blue */
background-color: hsl(240, 100%, 25%);

/* Blue */
background-color: hsl(240, 100%, 50%);

/* Light Blue */
background-color: hsl(240, 100%, 75%);

/* Gray */
background-color: hsl(240, 0%, 50%);

في أول تلات أمثلة غيرنا الإضاءة بس ففضلنا في نفس اللون بدرجات مختلفة وفي الأخير شيلنا التشبع فبقى رمادي

إضافة Alpha

background-color: hsla(240, 100%, 50%, 0.5);

القيمة الرابعة بتخلي اللون نصف شفاف من غير ما تغير لون النص تقدر تكتب نفس القيمة بالمسافات وعلامة / بالشكل ده

background-color: hsl(240 100% 50% / 50%);

جرب بنفسك

اختار اللون الأخضر عند 120 وغير الإضاءة بين 25% و 50% و 75% وبعدها ثبت الإضاءة وغير التشبع علشان تلاحظ الفرق بين الاتنين

آخر تعديل للدرس: