CSS / الألوان (Colors)

الناشر :كودا فوكس -

CSS / الألوان

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

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

CSS - الألوان


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

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

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

اختر أي لون لتغيير لون المربع

HEX
RGB
HSL
خط أبيض خط أسود

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

بشكل عام هناك ثلاث ألوان رئيسية هي الأحمر ( 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

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

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

<!DOCTYPE html>
<html>
	<head>
	</head>
	<body>
		<p style="color:Tomato;">Tomato color</p>
		<p style="color:DodgerBlue;">DodgerBlue color</p>
		<p style="color:MediumSeaGreen;">MediumSeaGreen color</p>
	</body>
</html>

النتيجة

Tomato color
DodgerBlue color
MediumSeaGreen color

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

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

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

الفرق بين استخدام 3 أو 6 أحرف

  • إذا قمت بتمرير 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.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

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

النتيجة

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.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

<!DOCTYPE html>
<html>
	<head>
	</head>
	<body>
		<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>
	</body>
</html>

النتيجة

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.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

<!DOCTYPE html>
<html>
	<head>
	</head>
	<body>
		<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>
	</body>
</html>

النتيجة

Transparency 1
Transparency 0.8
Transparency 0.6
Transparency 04
Transparency 0.2

التلوين بأسلوب 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.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

<!DOCTYPE html>
<html>
	<head>
	</head>
	<body>
		<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>
	</body>
</html>

النتيجة

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.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

<!DOCTYPE html>
<html>
	<head>
	</head>
	<body>
		<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>
	</body>
</html>

النتيجة

Transparency 1
Transparency 0.8
Transparency 0.6
Transparency 0.4
Transparency 0.2

التسميات

إرسال تعليق

أحدث أقدم

نموذج الاتصال