❮
Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing
❯
الدرس التالي❯ ❮الدرس السابق

CSSالألوان

  • طرق تحديد الألوان
  • الأشياء القابلة للتلوين
  • التلوين بأسلوب Color Names
  • التلوين بأسلوب HEX
  • التلوين بأسلوب RGB
  • التلوين بأسلوب RGBA
  • التلوين بأسلوب HSL
  • التلوين بأسلوب HSLA

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

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

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

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

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


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

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

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

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

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

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


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

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

نص لونه أزرق

نص لونه أحمر

نص لونه أخضر


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

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

نص لونه أبيض و خلفيته زرقاء

نص لونه أبيض و خلفيته حمراء

نص لونه أسود و خلفيته ذهبية


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

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

نص حدوده زرقاء

نص حدوده حمراء

نص حدوده رمادية


طرق تلوين الخلفيات و الحدود فيها خيارات كثيرة سنشرحها لك بالتفصيل في دروس لاحقة.
في هذا الدرس سنركّز بشكل خاص على طرق التلوين المتاحة في CSS و التي يمكنك اتباعها لتلوين أي شيء.

التلوين بأسلوب 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>
<p style="color:Tomato;">Tomato color</p> <p style="color:DodgerBlue;">DodgerBlue color</p> <p style="color:MediumSeaGreen;">MediumSeaGreen color</p>

سنحصل على النتيجة التالية عند التشغيل.

Tomato color
DodgerBlue color
MediumSeaGreen color
جرب الكود

أسماء الألوان يمكنك كتابتها بأحرف صغيرة أو أحرف كبيرة بدون أي مشكلة.
إذاً سواء كتبت red أو Red أو RED فإنه لا يوجد أي مشكلة.

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

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

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


معلومة تقنية

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

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


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

HEX Code 3 HEX Code 6 Color
#000 #000000
#F00 #FF0000
#0F0 #00FF00
#00F #0000FF
#FF0 #FFFF00
#0FF #00FFFF
#F0F #FF00FF
#CCC #CFCFCF
#FFF #FFFFFF

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

مثال

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

سنحصل على النتيجة التالية عند التشغيل.

First paragraph
Second paragraph
Third paragraph
جرب الكود

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

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

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

rgb(Red, Green, Blue)
rgb(Red, Green, Blue)

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

RGB Code Color
rgb(0, 0, 0)
rgb(255, 0, 0)
rgb(0, 255, 0)
rgb(0, 0, 255)
rgb(255, 255, 0)
rgb(0, 255, 255)
rgb(255, 0, 255)
rgb(204, 204, 204);
rgb(255, 255, 255)

في المثال التالي قمنا بتلوين نصوص الفقرات بألوان مختلفة بأسلوب 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>
<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>

سنحصل على النتيجة التالية عند التشغيل.

First paragraph
Second paragraph
Third paragraph
جرب الكود

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

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

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

rgb(Red, Green, Blue, Alpha)
rgb(Red, Green, Blue, Alpha)

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


معلومة تقنية

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

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


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

RGBA Code Color
rgba(0, 0, 255, 1)
rgba(0, 0, 255, 0.8)
rgba(0, 0, 255, 0.6)
rgba(0, 0, 255, 0.4)
rgba(0, 0, 255, 0.2)
rgba(0, 0, 255, 0.0)

في المثال التالي قمنا بتلوين نصوص الفقرات بألون واحد و لكن بدرجة شفافية مختلفة بأسلوب 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>
<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>

سنحصل على النتيجة التالية عند التشغيل.

Transparency 1
Transparency 0.8
Transparency 0.8
Transparency 0.8
Transparency 0.8
جرب الكود

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

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

hsl(Hue, Saturation, Lightness)
hsl(Hue, Saturation, Lightness)

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

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

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

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

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


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

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

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

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

HSL Code Color
hsl(0, 0%, 0%)
hsl(0, 100%, 50%)
hsl(120, 100%, 50%)
hsl(240, 100%, 50%)
hsl(360, 0%, 100%)
hsl(0, 0%, 100%)

في المثال التالي قمنا بتلوين نصوص الفقرات بألوان مختلفة بأسلوب 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>
<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>

سنحصل على النتيجة التالية عند التشغيل.

First paragraph
Second paragraph
Third paragraph
جرب الكود

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

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

hsl(Hue, Saturation, Lightness, Alpha)
hsl(Hue, Saturation, Lightness, Alpha)

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


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

HSLA Code Color
hsla(240, 100%, 50%, 1)
hsla(240, 100%, 50%, 0.8)
hsla(240, 100%, 50%, 0.6)
hsla(240, 100%, 50%, 0.4)
hsla(240, 100%, 50%, 0.2)
hsla(240, 100%, 50%, 0)

في المثال التالي قمنا بتلوين نصوص الفقرات بألون واحد و لكن بدرجة شفافية مختلفة بأسلوب 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>
<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>

سنحصل على النتيجة التالية عند التشغيل.

Transparency 1
Transparency 0.8
Transparency 0.6
Transparency 0.4
Transparency 0.2
جرب الكود
الدرس التالي❯ ❮الدرس السابق