الألوان في تقنية CSS3

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

سأجيب في هذا المقال عن الأسئلة التالية:

1. أين يمكنني استخدام قيم الألوان في ملفات الـ CSS؟
2. ما هي القيم المتاحة؟
3. لماذا استخدم هذه القيمة دون تلك؟
4. ما هي الطريقة الأفضل للبدء في تلوين موقعك؟
5. ما هي الأدوات التي يمكن إستخدامها لإختيار الألوان بشكل فعال؟

أين تستخدم الألوان؟

هنالك ثلاث خواص بشكل أساسي نحدد فيها اللون و هي: لون الأمامية أو الخط (color) لون الخلفية (background-color) لون الحدود (border-color).

ما هي القيم المتاحة؟

وأقصد هنا القيم الجديدة في تقنية CSS3.

الكلمات المفتاحية

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

مثال على ذلك:

1

div {

2	background-color: red;

3	color: blue;

4	border-color: black;

5

}

ألوان RGB

وهي الألوان التي تستخدمها كل الشاشات في العالم، فكل بيكسل في أي شاشة يقوم بمزج ثلاث ألون كل واحد منها بقيمة مختلفة للحصول على اللون النهائي و هذه الألوان الأساسية هي الأحمر Red و الأخضر Green والأزرق Blue وهذا هو مبدأ هذه الطريقة في تعين اللون حيذ نأخذ ثلاث قيم الأولى تعبر عن كمية اللون الأحمر و الثانية للأخضر و الثالثة للأزرق و كل لون من الألوان السايقة يتحمل القيم من صفر و حتى 255 كما في الصورة  التالية:

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

1

div {

2	background-color:rgb(255,0,0);

3	color: rgb(0,0,255);

4	border-color: rgb(0,0,0);

5

}

كما يمكننا أيضاً كتابة النسب المئوية للألوان فإذا كنا نريد نصف كمية الأحمر مع نصف كمية الأخضر مثلاً فلا داعي لتذكر ناتج قسمة 255 على 2 بل يمكننا كتابتها على الشكل التالي rgb(50%,50%,0)ويصبح مثالنا السابق باستخدام النسب المئوية:

1

div {

2	background-color: rgb(100%,0%,0%);

3	color: rgb(0%,0%,100%);

4	border-color: rgb(0%,0%,0%);

5

}

انتبه: لا يمكننا الدمج بين النسب المئوية و القيم الرقمية فلا يمكنا مثلاً كتابة القيمة التالية rgb( 100%, 255, 128) هذه الطريقة تعطينا (255*255*255= 16,581,375.00) أي حوالي 16 مليون لون وهي مستخدمة في كل برامج التصميم منذ فترة طويلة ولعل أبرزها الفوتوشوب.

ألوان HSL

و هي تشابه من حيث الاستخدام ألوان الـ RGB ولكن القيم الثلاث هنا ذات استخدمات مختلفة تماماً فالقيمة الأولى هي درجة اللون (Hue) و هي عبارة عن توزع لكل الألوان على دائرة (كما في الصورة) فهذه القيمة تأخذ القيم من صفر حتى 360 فهي تقاس بالدرجات أما القيمة الثانية فتعبر عن تشبع اللون (Saturation) و هي نسبة مئوية أما القيمة الثالثة فهي درجة السطوع أو الإضاءة (Lightness) و هي نسبة مئوية أبضاً وتمثل هذه القيمة موقع الصوء من اللون كأن يكون في مكان مضيء (100%) أو في مكان مظلم (0%) و قيمة صفر هنا ستعطينا اللون الأسود و قيمة (100%) ستعطينا اللون الأبيض بغض النظر عن باقي القيم و للحصول على اللون دون إضاءة نستخدم قيمة (50%) و فيما يلي صورة توضح دائرة الألوان.

و هنا يجب ملاحظة إلى أن العد على الدائرة يشبه العد على الدائرة المثلثية الموجودة في الرياضيات فالزاوية صفر تمثل اللون الأحمر و الاتجاه الموجب بعكس حركة عقارب الساعة فاللون الأصفر يحمل الزاوية 60 و اللون الأخضر في الزاوية 120 و الأزرق 240 و اللون الأرجواني 300 وتجدر الإشارة إلى أن هذه القيم توجد في الفوتوشوب مع فارق بسيط.

في الفوتشوب توجد القيم على الشكل HSB بدلاً HSL حيث تم استبدال كلمة Lightness (الإضاءة) بكلمة Brightness(السطوع) والفارق أن قيمة السطوع في حدودها العليا تعطي اللون كما هو دون إضافة المزيد من الإضاءة بينما قيمة الإضاءة في حدها الأعلى تعطي اللون الأبيض تماماً.

لذا اللون الأحمر بأقصى درجة تشبع له في الفوتوشوب هو hsb(0,100%,100%) بينما في الـCSS هي hsl(0,100%,50%) ولكي لا تقعوا بهذا الارتباك أقترح استخدام أحد الأدوات التي سأذكرها في نهاية هذه المقالة لتعين اللون الصحيح لقيم الـ HSL، وهكذا يصبح مثالنا السابق بقيم HSL:

1

div {

2	background-color: hsl(0,100%,50%);

3	color: hsl(240,100%,50%);

4	border-color: hsl(0,0%,0%);

5

}

(لا تنسى استخدام النسب المئوية لقيم التشبع و الإضاءة)

قد تبدو صيغة HSL من أصعب القيم للاستخدام لكنها في الواقع من أفضل القيم على الرغم من أنها حديثة العهد في تقنية CSS لكنها ومن تجربة شخصية من أسهل القيم، فليس عليك سوى حفظ قيمة واحدة للون و من ثم التلاعب بدرجة سطوع اللون و درجة ظلاليته, عكس قيم صيغة RGB التي تعتبر من قيم المستخدمة من قبل البرمجيات و تحتاج لفهم أليات مزج الألوان, وهذه بعض الأمثلة على قيم صيغة HSL وأنصح بشدة لكل من يريد استخدام قيم صيغة HSL بزيارة الرابط السابق.

 قيم RGBA وHSLA

ألا تبدو هذه القيم مألوفة، نعم إنها نفس القيم السابقة مع إضافة هذا الحرف الأخير و الذي يشير إلى الشفافية (alpha) و هذه القيمة الأخيرة هي التي تسمح لنا بالرؤية من خلال اللون لما يوجد تحته, و لنوضح هذا شاهد الصورة التالية:

أما عن القيم التي يمكن استخدامها فهي تترواح بين الصفر و الواحد وفالصفر يعني عدم رؤية اللون لأنه شفاف تماماً و على العكس فقيمة الواحد تظهر اللون دون أي شفافية, وهكذا لجعل اللون نصف شفاف نستخدم القيمة 0.5 و هذا مثال يوضح استخدام هذه القيم:

1

h3 {

2	color: rgba(100%, 50%, 0%, 0.1);

3	background-color: hsla(240, 100%, 50%, 0.7);

4

}

ملاحظة: يجب التميز بين قيمة الشفافية الخاصة باللون و الموجودة فقط في قيم (hsla , rgba) و بين الخاصة الجديدة في css3 و هي الشفافية (opacity) و التي تتحكم بشفافبة كامل العنصر و لتميز الفرق لاحظ المثال التالي:

القيم العشرية

و يتبقى لنا النوع الثاني (بعد الكلمات المفتاحية) من القيم المستخدمة قبل الـCSS3 و هي القيم العشرية أو (Hexadecimal Values) و هذه القيم تستخدم بشكل أساسي من قبل الألات لأنها تستخدم بحدها الأقصى 6خانات و من ثم يتم تحويل هذه القيمة لقيم RGB وفق جداول معينة و يمكنك فهمها من الصورة التالية:

لاستخدام هذه القيم يكفي أن نضع هذه الإشارة (#) ثم نملأ ثلاث أو ست خانات (في حالة ثلاث خانات يتم مضاعفة كل خانة مثلاً #ffb تصبح ffffbb# ) تتميز هذه القيم بسهولة نقلها و حفظها و انصح باستخدامها عند الحاجة لنقل القيمة و لا سيما من الفوتوشوب مثلاً إلى صفحات النت حيث يزودنا الفوتوشوب بقيمة عشرية عند اختيار أي لون كما في الصورة:

و تتمتع هذه القيم بفأدتين رئسيتين الأولى الدعم الواسع من فبل كل المتصفحات القديمة و الحديثة و ثانياً و نظراً لتحويل هذه القيم لقيم RGB فهي تمتاز بعدد ألوان يصل إلى 16 مليون لون إضافةً لسهولة كتابتها و المشكلة الأساسية بنظري هي عدم القدرة على جعل اللون شفاف باستخدام هذه القيم, ويصبح مثالنا السابق باستخدام هذه القيم كالتالي:

1

div {

2	background-color: #f00;

3	color: #00f;

4	border-color: #000;

5

}

و هنا أريد أن أشير لسهولة الأستخدام للألوان الأساسية حيث الحرف (f) يشير إلى استخدام القيمة العليا للون (أي 255) , و الخانة الأولى تشير للون الأحمر الثانية للأخضر و الثالثة للأزرق (كما في RGB ) لذا يمكن تمثيل الألوان الأساسية بسهولة كما في مثالنا البسيط.

ألوان الطباعة

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

ولكن قد تكون مفيدة عند نقل صفحات الويب إلى العالم الحقيقي لنحصل على رؤية أوضح نظراً لعدم قدرة الطابعات على طباعة ألوان مطابقة لألوان الشاشة و ذلك يعود إلى استخدام الطابعات أربع ألوان مختلفة و المزج بينها للحصول على بقية الألوان و هذه الألوان هي الأسود (black) و السماوي (cyan) و الأرجواني (magenta) و الأصفر (yellow) ولكل من يعمل في مجال الطباعة فهو على دراية بهذه الألوان فهي ألوان المحابر في الطابعات الملونة, أما عن القيم الممكنة لكل لون فالقيمة العليا هي 1 و باقي القيم تتراوح بين 0 و الواحد, طبعاً مع امكانية استخدام الفواصل العشرية,وهذا مثال على ألوان الطباعة:

1

h3 {

2	color: cmyk(0.5, 0.1, 0.0, 0.2);

3

}

ملاحظة: هنالك مجموعة من الألوان تسمى بمجموعة الألوان الأمنة (Safe Colors) و هي عبارة عن مجموعة محدودة تحوي ألوان يمكنك التأكد أنها ستعرض من قبل الشاشات القديمة و الحديثة و ذلك لأن بعض الشاشات (وخاصة تلك بنظام 8 بت) لا تستطيع أن تعرض أكثر من 256 لون فقط لذا جاء لقب المجموعة الأمنة لضمان عرضها على كل الشاشات و ما يهمنا منها المجوعة الخاصة بصفحات الويب (Web-safe Colors) و هي عبارة عن 216 لون تضمن عرضها في أي نوع من أنواع الشاشات، ولكل مصمم فوتوشوب أعتقد أنه على علم بهذه الألوان:

أدوات و وسائل تساعدك للبدء في تلوين موقعك

عند البدء في إنشاء أي موقع أنصح أولاً باختيار استراتيجية عامة للألوان و اختيار الألوان بعناية و الابتعاد عن الألوان بقيمها الكبرى (مثل الأحمر التام rgb(255,0,0) ) لأن هذه الألوان و بحسب الدراسات ترهق العين، وهذه مجموعة من الأدوات التي ستفيدك في إختيار الألوان بشكل أفضل.

Kuler من Adobe

فهذه الأداة تعطينا مجموعة من الألوان المتناسقة التي يمكن استخدامها لكامل الموقع, إضافة إلى استعراض أكثر الألوان شهرةً و إمكانية إنشاء مجموعة الألوان من الصور و أكثر.

إضافة ColorZilla

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

يبقى لنا في النهاية أن نشير إلى دعم استخدام هذه القيم اللونية من قبل المتصفحات و نلاحظ (كالعادة) عدم دعم متصفحات الإنترنت إكسبلور بإصدارته القديمة و بغض النظر عن متصفح الإكسبلور نجد الدعم واسع و جاهز للاستخدام في بقية المتصفحات.

المصادر

هذه بعض المصادر الخاصة بالموضوع والتي تشرح بشكل مفصل الألوان في تقنية CSS3:

CSS3 Color

A Guide to CSS Colors in Web Design

Can I Use

CSS3 First Look