في CSS يتم تحديد الألوان باستخدام أسماء ألوان محددة مسبقًا ، أو قيم RGB ، و HEX ، و HSL .

سنعرف الفرق بينهم بعد قليل من الوقت لكن الان يمكننا فهم انه يوجد طرق عدة لوصف الالوان لدي css

اسماء الألوان

يمكننا تلوين النصوص والعناصر في css فقط من خلال استعمال اسماء الألوان دون الحاجه لكتابة كود اللون نفسة

لكن كود اللون يكون اكثر دقه من اسم اللون مثل blue , green , red , black

مثال (تلوين خلفية النص)

في هذا المثال يقوم الكود بتلوين خلفية النص الي لون مختلف لكل نص من خلال الخاصية background-color

<html>
<body dir="rtl">

<h1>الوان css باستخدام اسم اللون</h1>
<!-- هذا يرمز للون خلفية نص حمراء -->
<h2 style="background-color:red;">red</h2>
  <!-- هذا يرمز للون خلفية نص زرقاء -->
<h2 style="background-color:blue;">blue</h2>
  <!-- هذا يرمز للون خلفية نص خضراء  -->
<h2 style="background-color:green;">green</h2>
  
</body>
</html>

مثال2 (تلوين النص)

في هذا المثال يقوم بتلوين الوان النص نفسه الي لون مختلف حسب كل نص من خلال الخاصية color

<html>
<body dir="rtl">

<h1>الوان css باستخدام اسم اللون</h1>
<!-- هذا يرمز للون نص احمر -->
<h2 style="color:red;">red</h2>
    <!-- هذا يرمز للون نص اخضر   -->
<h2 style="color:green;">green</h2>
  <!-- هذا يرمز للون نص ازرق -->
<h2 style="color:blue;">blue</h2>

  
</body>
</html>

حسنا بعد معرفة كيفية اضافة الوان باستخدام اسم اللون فقط الان يمكننا الانتقال الي اكواد الالوان والتي هي اكثر دقة لوصف اللون من استخدام الاسم فقط وسنتعرف علي الطرق بالشكل التالي

الوان RGB

لدي CSS عدة قيم لوصف الألوان منها rgb
وتعني rgb اختصارا للالوان الثلاث RED ,GREEN , BLUE

rgb(red, greenblue)

وترمز لألوان الاولية لانتاج الالوان المرئية في الطبيعة


يتم استعمال كود الوان rgb الذي يتكون من 3 الوان رئيسية كما ذكرنا اعلاه وهي الاحمر والاخضر والازرق من خلال دمج تلك الالوان بنسب من 1 الي 255 لكل لون في الوان ويكون الشكل النهائي بهذا الشكل RGB(237, 136, 184)

<html>
<body dir="rtl">
  
<h1>الوان الrgb</h1>
<!-- هذا يرمز للون الاحمر -->
<h2 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h2>
    <!-- هذا يرمز للون الاخضر  -->
<h2 style="background-color:rgb(0, 255, 0);">rgb(0, 255, 0)</h2>
  <!-- هذا يرمز للون الازرق -->
<h2 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h2>

  
</body>
</html>

تقوم هذه الأداه بإنشاء أكواد الوان RGB من خلال تحريك شريط كل لون للوصول للون المناسب

كلما تم زيادة رقم احد الألوان زاد قيمتة في اللون الناتج لإنتاج لون معين من خلال خلط الأحمر والأخضر والأصفر سويا
تستخدم الألوان جميعا في نفس الاستخدامات بلا تفرقه


الوان HEX

اللون السداسي عشر وهو اختصارا وهو مبني علي النظام العددي السداسي عشر والذي يتكون من

0-1-2-3-4-5-6-7-8-9-A-B-C-D-E-F

ودون الدخول في تفاصيل النظام العددي يتم تكوين تركيبة  من هذا النظام العددي للحصول علي اللون المطلوب من خلال الطريقة التالية RRGGBB#




يمكن استعمال الأداة في الأسفل للحصول علي اللون المطلوب دون مجهود  

Kelly Color Picker

تقوم الأداة أعلاه بعمل هذه العملية بشكل تلقائي وتنتج اللون الذي تريد دون الحاجه لتفاصيل كثيرة


مثال:

ك<html>
<body>

<h1>الوان الHEX</h1>
<!-- هذا يرمز للون الاحمر -->
<h2 style="background-color:#FF0000;">#FF0000</h2>
  <!-- هذا يرمز للون الاخضر  -->
  <h2 style="background-color:#00FF00;">#00FF00</h2>
  <!-- هذا يرمز للون الازرق -->
<h2 style="background-color:#0000FF;">#0000FF</h2>
  
</body>
</html>

الوان hls