دليل شامل لفهم ألوان CSS واستخدامها باحتراف في تصميم المواقع

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

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

1. خصائص اللون الأساسية

لنبدأ ببساطة: اللون. ربما تكون هذه الخاصية هي أهم خاصية متعلقة بالألوان، وهي من أسهل التعديلات التي يمكنك إجراؤها على تصميم موقعك. تُحدد خاصية اللون لون المقدمة، والذي يُستخدم لرسم النصوص والعناصر الزخرفية الأخرى، مثل تسطير الروابط.

اللون الافتراضي هو CanvasText، وهو لون مُعرّف من قِبل النظام، ويجب على متصفحك قراءته واستخدامه. عادةً ما يكون هذا اللون أسود، ليتباين مع لون Canvas الافتراضي الأبيض، ولكن تجدر الإشارة إلى أن الوضع الداكن عادةً ما يعكس هذه القيم.

إلى جانب اللون، هناك خصائص مشابهة جدًا تؤثر على أشياء تتجاوز النص البسيط. خاصية background-color تملأ العنصر باللون المُحدد له قبل طلاء النص والزخارف الأخرى فوقه. خاصية border-color تتحكم في لون أي حدود تُرسم حول العنصر.

وأخيرًا، خاصية accent-color هي خاصية أحدث تُحدد لون أجزاء من عناصر تحكم الإدخال. على سبيل المثال، يُمكنها التحكم في لون المربع الذي توجد عليه علامة الاختيار (نوع الإدخال = “checkbox”). قد تُشتق القيمة الافتراضية لهذه الخاصية من تفضيل على مستوى نظام التشغيل، مثل لون السمة.

2. الألوان المُسمّاة

بعد تحديد الخصائص الأكثر أهمية، حان الوقت للنظر في قيمها المحتملة، والتي تُمثّل جميعها اللون بطريقة أو بأخرى. أبسطها، والذي يعتمد على لوحة ألوان Windows VGA ذات الـ ١٦ لونًا، يستخدم أسماءً مثل “أحمر” و”أسود” و”أزرق مائي”.

يجب أن تكون على دراية بالتناقضات الطفيفة في التسمية. على سبيل المثال، بينما يُمثل كلٌّ من “الأحمر” و”الأزرق” كاملَ مُكوّن اللون المُقابل لهما، مع غياب تامّ للمكوّنات المتبقية، يختلف “الأخضر” قليلاً، إذ يُمثّل نصفَ أخضر تقريبًا فقط. يُطلق على اللون الأخضر “الكامل” الذي قد تبحث عنه اسم “ليموني”، وهو أكثر سطوعًا مما تتوقع.

يدعم CSS الحديث الآن نطاقًا أوسع بكثير من الألوان المُسمّاة، مع أكثر من 150 لونًا مُناسبًا. تشمل هذه الألوان الستة عشر الأصلية، بالإضافة إلى ألوان مثل “برتقالي” و”أزرق زهرة الذرة” و”أرجواني ريبيكا”.

ملاحظة
للون “أرجواني ريبيكا” تاريخٌ مُؤثّر، إذ يُمثّل نصبًا تذكاريًا لابنة مُصمّم الويب الشهير، إريك أ. ماير.

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

حتى لو بحثتَ عن أسماء الألوان قبل استخدامها، فمن السهل أن تنسى معناها لاحقًا. قد تُفيد بعض بيئات التطوير المتكاملة (IDEs) بعرض معاينات ألوان مضمنة في ملفات CSS، ولكن بشكل عام، يُفضّل استخدام الألوان المُسمّاة للاختبار والنماذج الأولية البسيطة. أما بالنسبة لتصاميم الإنتاج، فهناك خيارات أفضل.

3. قيم الألوان السداسية عشرية

في الأساس، جميع قيم الألوان التي ناقشناها حتى الآن لها مكافئات في مساحة ألوان sRGB، والتي يُمكن تمثيلها باستخدام أرقام سداسية عشرية. تُحدد هذه القيم الألوان في نظام RGB ذي 24 بت، لذا فإن كل مُكوّن (أحمر، أخضر، أزرق) له قيمة 8 بت، والتي يُمكن أن تُمثل 0-255. على سبيل المثال، يُعادل “الأصفر” #ffff00، وهي قيمة 255 للأحمر والأخضر، و0 للأزرق.

هناك عدة طرق مختلفة لكتابة القيم السداسية العشرية. أولها اختصار يستفيد من تكرار الأرقام السداسية العشرية. إذا كانت الأزواج الثلاثة جميعها قيمًا متكررة، يمكنك اختصار القيمة الإجمالية إلى ثلاثة أرقام. على سبيل المثال، يمكن اختصار #ff66aa إلى #f6a.

بديل آخر يتضمن توفير مكون رابع يمثل شفافية ألفا. تتراوح هذه القيمة أيضًا بين 0 و255، لذا فإن #ff000080 أحمر بنسبة تعتيم 50% تمامًا.

وأخيرًا، يمكنك دمج الاختصارات وصيغ ألفا للحصول على متغير رابع. لذا فإن #fffe أبيض شبه شفاف تمامًا.

ملاحظة
الأحرف من A إلى F المستخدمة لتمثيل الألوان في النظام السداسي العشري لا تراعي حالة الأحرف. هذا يعني أنه يمكنك استخدام #bbb أو #BBB كمكافئات؛ الخيار يعود إليك تمامًا.

4. ترميز rgb()

تناول القسم السابق التمثيلات السداسية عشرية لقنوات الألوان من ٠ إلى ٢٥٥. إذا كنت تفضل العمل بالنظام العشري بدلاً من النظام السداسي عشر، فهناك ترميز يشبه الدالة، وهو مناسب لهذه المهمة:

color: rgb(255 0 0)

هذه القيمة تعادل #f00. إنها أطول قليلاً، ولكن قد تجدها أسهل في القراءة. يمكنك أيضًا استخدام فواصل بين كل رقم لتسهيل القراءة:

color: rgb(255, 0, 0)

وكما هو الحال مع التدوين السداسي عشر، يمكنك توفير مكون رابع، وهو الشفافية ألفا:

color: rgb(127 127 127 / 0.5)

لاحظ أن الشفافية هذه المرة تتراوح من 0 إلى 1، لذا فإن 0.5 يمثل 50% من الشفافية (80 في النظام السداسي عشري). يمكنك أيضًا استخدام نسبة مئوية لكل من المكونات الثلاثة الأولى:

color: rgb(50% 50% 50%)

5. hsl() وhwb()

حتى الآن، استخدمت جميع قيم الألوان التي تناولناها نموذج ألوان RGB، سواءً بالنظام السداسي عشري أو العشري. ومع ذلك، تتوفر نماذج ألوان أخرى، مثل HSL وHWB.

يرمز نموذج HSL إلى الصبغة (Hue) والتشبع (Saturation) والسطوع (Lightness). في هذا النموذج، تُشبه الصبغة (Hue) لونًا أساسيًا (أحمر، برتقالي، إلخ)، بينما يُقارب التشبع (Saturation) شدة اللون، بينما يُشير السطوع (Lightness) إلى مدى سطوعه أو قتامة لونه. يمكنك استخدام hsl كما هو الحال مع rgb:

color: hsl(90 25 75)

الفرق هنا يكمن في الوحدات. تُقاس درجة اللون بالدرجات، بينما يُقاس التشبع والسطوع بالنسب المئوية. على الأرجح، ستستخدم هذا الترميز (والترميز التالي) فقط إذا كنت مصممًا محترفًا، معتادًا على العمل بترميزات مختلفة. يُعد ترميز RGB أسهل استخدامًا من ترميز HSL، بالنسبة لمعظمنا.

في الوقت نفسه، يُعد ترميز HWB (الدرجة، البياض، والسواد) مفهومًا مشابهًا جدًا؛ فهو يُمثل درجة اللون الأساسية إلى جانب مقدار الأبيض والأسود في اللون النهائي. بشكل عام، كلما زادت قيم الأبيض والأسود، أصبح اللون أكثر رمادية وباهتة. مرة أخرى، لن تستفيد حقًا من استخدام هذا الترميز في CSS إلا إذا كنت تستخدمه بالفعل: في برنامج رسومات منفصل أو من خلال فريق تصميم، على سبيل المثال.

color: hwb(50deg 30% 40%);

تحذير
على عكس ترميزي rgb وhsl، لا يدعم hwb الصيغة التقليدية التي تستخدم فواصل فاصلة.

6. ألوان النظام وأنواع أخرى من الألوان الرمزية

حتى الآن، رأينا قيمًا لونية ثابتة: فهي تُحدد نقطة لونية محددة لتكرارها. ولكن في بعض الأحيان قد ترغب في الإشارة إلى لون متغير ذي معنى يتجاوز قيمته المحددة في الطيف. قد تتغير هذه الألوان الرمزية بمرور الوقت أو في بيئات مختلفة، لذا يمكنك استخدامها لمعناها بدلًا من لونها المحدد.

على سبيل المثال، خذ اللون الذي يستخدمه جهاز الكمبيوتر كخلفية لتمييز نص محدد. في CSS، يمكنك الإشارة إلى هذا اللون ببساطة باسم “إبراز”، بحيث يمكنك استخدامه في أنماطك الخاصة كما يلي:

.selected {
    background-color: highlight;
}

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

ومن المثير للاهتمام أن نظام macOS يُتيح تحديد النص فوق لون الخلفية هذا، ويُعدّل اللون بمهارة لضمان استمرار التباين.

مع ذلك، لا ينبغي الاعتماد على هذا السلوك، لذا انتبه، فقد يكون استخدام ألوان النظام مُربكًا في بعض السياقات.

مثال آخر على اللون الرمزي هو اللون الحالي (currentcolor). تشير هذه القيمة إلى قيمة خاصية لون العنصر، لذا يمكنك استخدامها لمطابقة خصائص أخرى، مثل لون الحدود (border-color).

div {
    border-width: 4px;
    border-style: solid;
    border-color: currentcolor;
}

div.one { color: red; }
div.two { color: green; }
div.three { color: blue; }

7. خاصية الفلتر ووظائف الفلتر

تزداد قوة وظائف CSS يومًا بعد يوم، حيث يدعم العديد منها معالجة الألوان بأنواعها المختلفة. باستخدام وظائف الفلتر، يمكنك تطبيق خوارزميات متطورة على ألوان الصورة:

img.example {
    filter: grayscale(50%);
}

يُحوّل ملف CSS أعلاه الصورة إلى تدرج رمادي جزئيًا. يمكنك فهم تأثير النسبة المئوية من خلال النظر إلى بعض الأمثلة:

تتوفر دوال تصفية أخرى، ويمكنك من خلالها تغيير ألوان الصورة بشكل جذري:

• تجعل دالة السطوع() الصورة أكثر سطوعًا (القيم أعلى من 1 أو 100%) أو أغمق (القيم بين 0 و1 أو 100%).
• تطبق دالة sepia() فلترًا أصفر/بنيًا، مما يُعطي مظهر صورة فوتوغرافية قديمة. يتراوح تأثيرها بين صفر و1 أو 100% للحصول على لون بني داكن كامل.
• تعكس دالة invert() ألوان الصورة، مما يُعطي تأثيرًا سلبيًا. يتراوح تأثيرها أيضًا بين 0 و1 أو 100%.

8. دوال CSS الأخرى

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

تختلف دوال التدرج في شكلها: خطي، شعاعي، أو مخروطي.

دالة أخرى شيقة هي light-dark(). تأخذ هذه الدالة معاملي لون، وتستخدم الأول إذا كان نظام الألوان الحالي فاتحًا، والثاني إذا كان داكنًا. إليك كيفية استخدامها:

:root {
    color-scheme: light dark;
}

body {
    color: light-dark(#333b3c, #efefec);
    background-color: light-dark(#efedea, #223a2c);
}

باستخدام CSS هذا، ستستخدم الصفحة الناتجة مخطط ألوان مناسبًا لمطابقة الوضع الفاتح أو الداكن، أيهما قيد الاستخدام:

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

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