يعد استخدام الألوان في CSS (اختصارًا لأوراق الأنماط المتتالية) أمرًا سهلاً للغاية. سنوضح لك في هذا البرنامج التعليمي كيفية استخدام جميع تنسيقات الألوان المختلفة في CSS

، بما في ذلك رموز الألوان Hex وأسماء ألوان HTML وقيم RGB و HSL.

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

أسماء ألوان CSS

في CSS ، يمكن تحديد لون باستخدام اسم لون:

 لون خلفية CSS

يمكنك ضبط لون الخلفية لعناصر HTML:

مثال:

<h1 style="background-color:DodgerBlue;">مرحبا</h1>
<p style="background-color:Tomato;"> ...... تعتبر الخلفية هي عرض العنصر وارتفاعه  CSS في</p>

لون نص CSS

يمكنك ضبط لون النص:

مرحبا

هذا التص باللون الازرق.

هذا النص باللون الزهري.

 مثال:

<h1 style="color:Tomato;">مرحبا</h1>
<p style="color:DodgerBlue;">هذا النص باللون الازرق</p>
<p style="color:violet;">هذا النص باللون الزهري</p>

لون الحدود CSS 

مرحبا

مرحبا

مرحبا

 مثال:

<h1 style="border:2px solid Tomato;">مرحبا</h1>
<h1 style="border:2px solid DodgerBlue;">مرحبا</h1>
<h1 style="border:2px solid Violet;">مرحبا</h1>

قيم الألوان CSS

في CSS ، يمكن أيضًا تحديد الألوان باستخدام قيم RGB وقيم HEX وقيم HSL وقيم RGBA وقيم HSLA:

نفس اسم اللون "Tomato":

 مماثل لاسم اللون "Tomato" ، لكن 50٪ شفاف:

 مثال:

<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
 
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>