كاتب المقال: مازن بشر، مهتم بكل ما يختص الإنترنت والحاسوب بشكل عام و خاصة*التصميم والجديد في تقنيات الويب من CSS،HTML5،PHP،Javascript. بدأت منذ حوالي ثلاث سنوات بالإهتمام بأحدث تقنيات الويب ولا زال شغفي يزداد يوماً بعد يوم بهذا العالم المتسارع.

بعد أن اقتصرت الألوان في معايير CSS2 على استخدام الكلمات المفتاحية (Keyword) أو استخدام القيم العشرية (hexadecimal) أتت القفزة النوعية في معايير تقنية CSS3 لتتيح لنا مجالات أوسع مثل ألوان الشاشات RGB و ألوان الطباعة CYMK إضافة إلى أمكانية استخدام الشفافية و سأتي على ذكر كل القيم اللونية الممكن استخدامها حالياً القديمة منها و الحديثة.

سأجيب في هذا المقال عن الأسئلة التالية:
أين يمكنني استخدام قيم الألوان في ملفات الـ CSS؟
ما هي القيم المتاحة؟
لماذا استخدم هذه القيمة دون تلك؟
ما هي الطريقة الأفضل للبدء في تلوين موقعك؟
ما هي الأدوات التي يمكن إستخدامها لإختيار الألوان بشكل فعال؟

[h=3]أين تستخدم الألوان؟[/h]هنالك ثلاث خواص بشكل أساسي نحدد فيها اللون و هي: لون الأمامية أو الخط (color) لون الخلفية (background-color) لون الحدود (border-color).

[h=3]ما هي القيم المتاحة؟[/h]وأقصد هنا القيم الجديدة في تقنية CSS3.
[h=4]الكلمات المفتاحية[/h]أي شخص يبدء تعلم لغة الـ CSS يلاحظ مدى سهولة الحصول على اللون المطلوب بمجرد كتابة اسمه ,وهنالك نوعين من الكلمات المفتاحية أساسية تعبر عن الألون الأكثر ستخداماً و قائمة موسعة أكثر تسمى قائمة X11 فيما تحتوي هذه الأخيرة على أكثر من 100 لون بأسمها يمكنكم مراجعة القائمة الكاملة من هذا الرابط Extended color keywords أما الألوان الأساسية التي يبلغ عددها 16 فهذه قائمة بها مع مثال على كيفية استخدامها:

مثال على ذلك:

div {
background-color: red;
color: blue;
border-color: black;
}
[h=4]ألوان RGB[/h]
وهي الألوان التي تستخدمها كل الشاشات في العالم، فكل بيكسل في أي شاشة يقوم بمزج ثلاث ألون كل واحد منها بقيمة مختلفة للحصول على اللون النهائي و هذه الألوان الأساسية هي الأحمر Red و الأخضر Green والأزرق Blue وهذا هو مبدأ هذه الطريقة في تعين اللون حيذ نأخذ ثلاث قيم الأولى تعبر عن كمية اللون الأحمر و الثانية للأخضر و الثالثة للأزرق و كل لون من الألوان السايقة يتحمل القيم من صفر و حتى 255 كما في الصورة *التالية:

نلاحظ ببساطة أن اللون الأسود في هذا النمط هو 0,0,0 والأحمر مثلاً هو 255,0,0 وهكذا لكن ماذا عن الأصفر؟ نعلم أن الأصفر ناتج دمج الأحمر مع الأخضر فيكون 255,255,0 أما عن طريقة الأستخدام في ملف الـ CSS فنستطيع الحصول على نفس نتائج المثال السابق كالتالي:

div {
background-color:rgb(255,0,0);
color: rgb(0,0,255);
border-color: rgb(0,0,0);
}
كما يمكننا أيضاً كتا