طرق تحديد الألوان
عدد الألوان التي يمكنك اختيارها في عالم الويب هو بالملايين، بالإضافة إلى أنك تستطيع اختيار اللون الأساسي و من بعدها تحدد درجة قوته و شفافيته حتى تختار اللون الذي تريده بالضبط.
أنت لست مضطر أبداً إلى حفظ أسماء الألوان أو درجاتها و هذا أساساً أمر مستحيل، فعلياً عند الحاجة لاختيار أي لون فإنك بالعادة تستخدم أدوات جاهزة تعطيك كود اللون الذي تريده.
فمثلاً يمكنك استخدام أداة الألوان الخاصة بموقع هرمش للحصول على كود الذي تريده بكل سهولة، كل ما عليك فعله النقر على اللون و سيظهر لك الكود الخاص به كما في الصورة التالية.
أداة اختيار الألوان
مكونات الألوان
بشكل عام هناك ثلاث ألوان رئيسية هي الأحمر ( 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>
سنحصل على النتيجة التالية عند التشغيل.
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>
سنحصل على النتيجة التالية عند التشغيل.
First paragraph
Second paragraph
Third paragraph
جرب الكود
التلوين بأسلوب RGB
هذا الأسلوب يكون بتمرير ثلاث أعداد بين 0-255 للدالة rgb() مع وضع فاصلة بين كل عددين.
العدد الأول الذي يتم تمريره لها يمثل درجة الأحمر و الثاني درجة الأخضر و الثالث درجة الأزرق كالتالي.
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>
سنحصل على النتيجة التالية عند التشغيل.
First paragraph
Second paragraph
Third paragraph
جرب الكود
التلوين بأسلوب RGBA
هذا الأسلوب يكون باستخدام الدالة rgba() حيث نقوم بتمرير ثلاث أعداد لها بين 0-255 يمثلون درجة اللون بالإضافة إلى عدد بين 0-1 يمثل درجة الشفافية مع وضع فاصلة بين كل عددين.
العدد الأول الذي يتم تمريره لها يمثل درجة الأحمر و الثاني درجة الأخضر و الثالث درجة الأزرق و العدد الرابع يمثل درجة الشفافية كالتالي.
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>
سنحصل على النتيجة التالية عند التشغيل.
Transparency 1
Transparency 0.8
Transparency 0.8
Transparency 0.8
Transparency 0.8
جرب الكود
التلوين بأسلوب 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 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>
سنحصل على النتيجة التالية عند التشغيل.
First paragraph
Second paragraph
Third paragraph
جرب الكود
التلوين بأسلوب HSLA
هذا الأسلوب هو نفسه أسلوب HSL مضافاً إليه خاصيّة الشفافية.
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>
سنحصل على النتيجة التالية عند التشغيل.
Transparency 1
Transparency 0.8
Transparency 0.6
Transparency 0.4
Transparency 0.2
جرب الكود
