ألوان CSS3 (Color)

يقدم CSS3 عدة طرق جديدة لتعريف قيم الألوان.

تعريف الألوان في CSS3

في القسم السابق، تعلمت كيفية استخدامكلمة color وتمثيل RGBتعريف اللون. بالإضافة إلى ذلك، أضاف CSS3 رموزًا جديدة لتحديد قيم الألوان كعناصر، مثل rgba()، hsl() و hsla().

في الجزء التالي، سنناقش هذه النماذج اللونية واحدة تلو الأخرى.

قيمة اللون RGBA

يمكن استخدام رمز rgba() في نموذج RGBA (الأحمر - الأخضر - الأزرق - ألفا) لتعريف اللون. نموذج لون RGBA هو امتداد لنموذج لون RGB يحتوي على قناة ألفا، ويستخدم لتعريف شفافية اللون.

يقبل معامل alpha قيم من 0.0 (شفاف تمامًا) إلى 1.0 (غير شفاف تمامًا).

h1 {
　　　　color: rgba(0,0,255,0.5);
}
p {
　　　　background-color: rgba(0%,0%,100%,0.3);
}

قيمة الألوان HSL

يمكن أيضًا تعريف الألوان باستخدام رمز hsl() في نموذج HSL (اللون - السطوع - اللمعان). يمثل اللون زاوية على دائرة اللون أو الدائرة (أي دائرة تمثل قوس قزح) بالزاوية (من 0 إلى 360). يقدم هذا الزاوية كوحدة أقل، لأن الزاوية عادة ما يتم قياسها بالدرجات، مما يترتب عليه وجود هذه الوحدة داخل CSS.

تمثل السطوع واللمعان كنسبة مئوية. تمثل 100% السطوع الألوان الكاملة، و0% الظلال الرمادية. ومع ذلك، تمثل 100% اللمعان الأبيض، و0% اللمعان الأسود، و50% اللمعان العادي. انظر إلى المثال التالي:

h1 {
　　　　color: hsl(360,70%,60%);
}
p {
　　　　background-color: hsl(480,50%,80%);
}

قيمة الألوان HSLA

يمكن استخدام رمز hsla() في نموذج HSLA (اللون - السطوع - اللمعان - alpha) لتعريف الألوان. نموذج الألوان HSLA هو نسخة مدمجة من نموذج الألوان HSL، حيث يحتوي على قناة Alpha التي تحدد شفافية الألوان.

يقبل معامل alpha قيم من 0.0 (شفاف تمامًا) إلى 1.0 (غير شفاف تمامًا).

h1 {
　　　　color: hsla(360,80%,50%,0.5);
}
p {
　　　　background-color: hsla(480,60%,30%,0.3);
}