تؤدي الألوان في لغة CSS دوراً جوهرياً في تصميم صفحات الويب؛ فهي تعزز قابلية القراءة، وتضفي طابعاً معيناً على الصفحة، وتُحسّن تجربة المستخدم. ومن أبسط الطرق لتحديد الألوان في CSS استخدام "أسماء الألوان" (Named Colors)؛ وهي أسماء ألوان مُعرَّفة مسبقاً وتتعرف عليها المتصفحات. إليك مثال على استخدام اسم لون لعنصر فقرة (paragraph element) :

<link rel="stylesheet" href="styles.css">

<p>هذه فقرة.</p>
            

p {
 color: red;
}
            

معاينة:

في هذا المثال، نستخدم اللون المُسمَّى "أحمر" red لتنسيق النص داخل فقرة.

تُعد الألوان المُسماة (Named colors) في لغة CSS مجموعةً تضم 140 اسماً قياسياً للألوان، مثل الأحمر (red) ، والأزرق blue ، والأصفر yellow ، والأكوا aqua ، والفوشيا fuchsia ، والأسود black ، وغيرها. وتتميز هذه الأسماء بسهولة الاستخدام، كما أنها تجعل الكود البرمجي أكثر قابلية للقراءة، فضلاً عن كونها تعبّر عن نفسها بوضوح.

تُعد الألوان المُسماة مفيدة في النماذج الأولية السريعة (quick prototyping)، والتصاميم البسيطة، وتحسين قابلية قراءة الكود. إليك مثال آخر على استخدام الألوان المُسماة مع مُحدد (selector) من نوع h1 :

<link rel="stylesheet" href="styles.css">

<h1>هذا عنوان</h1>
            

h1 {
 color: navy;
 background-color: lightgray;
}
            

معاينة:

في هذا المثال، سيتم تنسيق نص العنوان باللون الكحلي (navy)، مع خلفية باللون الرمادي الفاتح (light gray background). وتتحسن قابلية قراءة الكود بفضل استخدام أسماء الألوان، إذ تتيح فهماً بصرياً مباشراً للنمط المطلوب.

تُعد الألوان المُسماة في لغة CSS خياراً مريحاً، لكنها محدودة؛ إذ لا يتوفر منها سوى 140 لوناً فقط، وقد لا توفر الدرجة اللونية الدقيقة المطلوبة للتصاميم الأكثر تفصيلاً.

تُعد الألوان المُسماة في لغة CSS وسيلةً ممتازة لتطبيق الألوان بسرعة وبطريقة تعبيرية واضحة. ومع أنها مفيدة في التصاميم الأولية، وعمليات النمذجة، وتعزيز قابلية قراءة الكود، إلا أن محدودية نطاقها تجعلها أقل ملاءمة للتصاميم المعقدة التي تتطلب تحكماً دقيقاً في الألوان.

من خلال فهم نقاط القوة ومحدودية الألوان المُسَمَّاة، يمكنك تحديد الحالات التي يكون فيها استخدامها أفضل من الاعتماد على نماذج ألوان أكثر تفصيلاً - مثل RGB أو HSL - والتي ستتعرف عليها في دروس قادمة.