CSS الألوان

طرق تحديد الألوان

عدد الألوان التي يمكنك اختيارها في عالم الويب هو بالملايين، بالإضافة إلى أنك تستطيع اختيار اللون الأساسي و من بعدها تحدد درجة قوته و شفافيته حتى تختار اللون الذي تريده بالضبط.

أنت لست مضطر أبداً إلى حفظ أسماء الألوان أو درجاتها و هذا أساساً أمر مستحيل، فعلياً عند الحاجة لاختيار أي لون فإنك بالعادة تستخدم أدوات جاهزة تعطيك كود اللون الذي تريده.

فمثلاً يمكنك استخدام أداة الألوان الخاصة بموقع هرمش للحصول على كود الذي تريده بكل سهولة، كل ما عليك فعله النقر على اللون و سيظهر لك الكود الخاص به كما في الصورة التالية.

أداة اختيار الألوان

مكونات الألوان

بشكل عام هناك ثلاث ألوان رئيسية هي الأحمر ( Red ) و الأخضر ( Green ) و الأزرق ( Blue ).
من هنا جاء إسم RGB الذي يعني أن اللون عبارة عن خليط من هذه الألوان.

الآن هناك 6 طرق يمكنك اتباعها لتحديد الألوان في CSS هي التالية:

• كتابة إسم اللون ( Color Name ).
• تحديد درجة اللون بأسلوب HEX.
• تحديد درجة اللون بأسلوب RGB.
• تحديد درجة اللون و شفافيته بأسلوب RGBA.
• تحديد درجة اللون و التشبّع و الإضاءة بأسلوب HSL.
• تحديد درجة اللون و التشبّع و الإضاءة و الشفافية بأسلوب HSLA .

الأشياء القابلة للتلوين

كل ما يظهر في صفحة الويب يمكن تلوينه حيث يمكنك تلوين النصوص، خلفية أي عنصر، بالإضافة إلى أنه يمكنك وضع حدود ملونة حول العنصر.

تلوين نص العنصر

فيما يلي قمنا بتلوين خطوط النصوص بألوان مختلفة.

نص لونه أزرق

نص لونه أحمر

نص لونه أخضر

تلوين خلفية العنصر

فيما يلي قمنا بتلوين خلفيات النصوص بألوان مختلفة.

تلوين حدود العنصر

فيما يلي قمنا بتلوين حدود النصوص بألوان مختلفة.

التلوين بأسلوب Color Names

هذا الأسلوب يكون بكتابة إسم اللون فقط مع العلم أن CSS فيها 140 لون جاهز يمكنك استخدامهم بواسطة أسمائهم.

فيما يلي بعض أسماء الألوان:

Red - Blue - Green - Yellow - Orange - Brown - Purple - Cyan - Crimson - Cadetblue - OrangeRed - Tomato - DodgerBlue - MediumSeaGreen - SlateBlue - Pink - Violet - Black

في المثال التالي قمنا بتلوين نصوص الفقرات بألوان مختلفة.

<p style="color:Tomato;">Tomato color</p>
<p style="color:DodgerBlue;">DodgerBlue color</p>
<p style="color:MediumSeaGreen;">MediumSeaGreen color</p>
        

التلوين بأسلوب HEX

هذا الأسلوب يكون بوضع رمز المربع # و يليه 3 أو 6 أرقام و أحرف تمثّل اللون الذي سيتم عرضه.

هنا الرقم الذي تمرره مسموح أن يكون بين 0-9 و الحرف الذي تمرره مسموح أن يكون بين A-F.

معلومة تقنية

• إذا قمت بتمرير 3 أحرف، فهنا الحرف الأول يمثل درجة الأحمر و الحرف الثاني درجة الأخضر و الثالث درجة الأزرق.
• إذا قمت بتمرير 6 أحرف، فهنا أول حرفين يمثلان درجة الأحمر و ثاني حرفين يمثلان درجة الأخضر و ثالث حرفين يمثلان درجة الأزرق.

بشكل عام إستخدام 6 أحرف يعطيك المزيد من درجات الألوان التي يمكنك الحصول عليها.

فيما يلي بعض أكواد الألوان المعروفة بأسلوب HEX.

في المثال التالي قمنا بتلوين نصوص الفقرات بألوان مختلفة بأسلوب HEX.

<p style="color:#FF6347;">First paragraph</p>
<p style="color:#1E90FF;">Second paragraph</p>
<p style="color:#3CB371;">Third paragraph</p>
        

التلوين بأسلوب RGB

هذا الأسلوب يكون بتمرير ثلاث أعداد بين 0-255 للدالة rgb() مع وضع فاصلة بين كل عددين.

العدد الأول الذي يتم تمريره لها يمثل درجة الأحمر و الثاني درجة الأخضر و الثالث درجة الأزرق كالتالي.

rgb(Red, Green, Blue)

فيما يلي بعض أكواد الألوان المعروفة بأسلوب RGB.

في المثال التالي قمنا بتلوين نصوص الفقرات بألوان مختلفة بأسلوب RGB.

<p style="color:rgb(255, 99, 71)">First paragraph</p>
<p style="color:rgb(30, 144, 255);">Second paragraph</p>
<p style="color:rgb(60, 179, 113);">Third paragraph</p>
        

التلوين بأسلوب RGBA

هذا الأسلوب يكون باستخدام الدالة rgba() حيث نقوم بتمرير ثلاث أعداد لها بين 0-255 يمثلون درجة اللون بالإضافة إلى عدد بين 0-1 يمثل درجة الشفافية مع وضع فاصلة بين كل عددين.

العدد الأول الذي يتم تمريره لها يمثل درجة الأحمر و الثاني درجة الأخضر و الثالث درجة الأزرق و العدد الرابع يمثل درجة الشفافية كالتالي.

rgb(Red, Green, Blue, Alpha)

إذاً الدالة rgba() هي نفسها الدالة rgb() و لكنها تملك خاصية إضافية هي الشفافية.

معلومة تقنية

درجة الشفافية حين تكون 1 فهذا يعني أن العنصر سيظهر بدون أي شفافية و كلما قللناها سيصبح لونه شفّاف (باهت) أكثر.

درجة الشفافية إذا وضعتها 0 فهذا يعني أن اللون سيصبح شفاف بالكامل، أي غير مرئي.

فيما يلي قمنا بوضع كود اللون الأزرق مع تقليل درجة شفافيته تدريجياً بأسلوب RGBA.

في المثال التالي قمنا بتلوين نصوص الفقرات بألون واحد و لكن بدرجة شفافية مختلفة بأسلوب RGBA.

<p style="color:rgba(255, 0, 0, 1)">Transparency 1</p>
<p style="color:rgba(255, 0, 0, 0.8)">Transparency 0.8</p>
<p style="color:rgba(255, 0, 0, 0.6)">Transparency 0.8</p>
<p style="color:rgba(255, 0, 0, 0.4)">Transparency 0.8</p>
<p style="color:rgba(255, 0, 0, 0.2)">Transparency 0.8</p>
        

التلوين بأسلوب HSL

هذا الأسلوب يكون بتمرير ثلاث أعداد على النحو التالي.

hsl(Hue, Saturation, Lightness)

مفهوم القيمة Hue

Hue تعني اللون الأساسي و هنا يجب أن تضع عدد بين 0-360 يمثل اللون الذي تريده كالتالي:

• عند العدد 0 يبدأ اللون الأحمر.
• عند العدد 120 يبدأ اللون الأخضر.
• عند العدد 240 يبدأ اللون الأزرق.

مفهوم القيمة Saturation

Saturation تعني نسبة التشبّع و هنا يجب أن تضع عدد بين 0-100% يمثل درجة الرمادية في اللون. كلما قلّت هذه النسبة كلما مال اللون إلى الرمادي.

مفهوم القيمة Lightness

Lightness تعني نسبة الإضاءة و هنا يجب أن تضع عدد بين 0-100% يمثل درجة الإضاءة في اللون كالتالي.

• 0 تعني أن اللون ليس عليه أي ضوء و بالتالي سيظهر كأسود.
• 50% تعني أن اللون متوازن بين العتمة و الضوء، هنا لا يحدث أي تأثير على اللون.
• 100% تعني أن اللون مضيء لأقصى حد و بالتالي فإنه سيظهر كأبيض.

فيما يلي بعض أكواد الألوان بأسلوب HSL.

في المثال التالي قمنا بتلوين نصوص الفقرات بألوان مختلفة بأسلوب HSL.

<p style="color:hsl(248, 53%, 58%);">First paragraph</p>
<p style="color:hsl(147, 50%, 47%);">Second paragraph</p>
<p style="color:hsl(39, 100%, 50%);">Third paragraph</p>
        

التلوين بأسلوب HSLA

هذا الأسلوب هو نفسه أسلوب HSL مضافاً إليه خاصيّة الشفافية.

hsl(Hue, Saturation, Lightness, Alpha)

قيمة الشفافية يمكن أن تكون بين 0-1.

فيما يلي قمنا بوضع كود اللون الأزرق مع تقليل درجة شفافيته تدريجياً بأسلوب HSLA.

في المثال التالي قمنا بتلوين نصوص الفقرات بألون واحد و لكن بدرجة شفافية مختلفة بأسلوب HSLA.

<p style="color:hsla(240, 100%, 50%, 1)">Transparency 1</p>
<p style="color:hsla(240, 100%, 50%, 0.8)">Transparency 0.8</p>
<p style="color:hsla(240, 100%, 50%, 0.6)">Transparency 0.6</p>
<p style="color:hsla(240, 100%, 50%, 0.4)">Transparency 0.4</p>
<p style="color:hsla(240, 100%, 50%, 0.2)">Transparency 0.2</p>