إزالة الغموض عن صيغة الألوان النسبية في CSS: مساحات الألوان HSL و Lab لتصميم الويب العالمي

عالم تصميم الويب يتطور باستمرار، ومعه تتطور الأدوات والتقنيات التي نستخدمها لإنشاء تجارب جذابة بصريًا وسهلة الوصول. إحدى الإضافات الحديثة الأكثر إثارة في CSS هي صيغة الألوان النسبية (Relative Color Syntax). تتيح لك هذه الميزة القوية معالجة الألوان مباشرة داخل CSS، مما يتيح إنشاء سمات ديناميكية، وتنوعات دقيقة، وتصميمات سهلة الوصول بمرونة وسهولة أكبر. تتعمق هذه المقالة في تعقيدات صيغة الألوان النسبية، مع التركيز على مساحات الألوان HSL و Lab، وكيف يمكنك الاستفادة منها في مشاريعك حول العالم.

ما هي صيغة الألوان النسبية في CSS؟

قبل ظهور صيغة الألوان النسبية، كانت معالجة الألوان في CSS غالبًا ما تتطلب استخدام معالجات مسبقة مثل Sass أو Less، أو الاعتماد على JavaScript. تغير صيغة الألوان النسبية ذلك من خلال السماح لك بتعديل الألوان الموجودة مباشرة داخل قواعد CSS الخاصة بك. تقوم بذلك عن طريق الإشارة إلى المكونات الفردية للون (مثل تدرج اللون والتشبع والإضاءة في HSL) وتطبيق عمليات حسابية عليها. هذا يعني أنه يمكنك تفتيح لون أو تغميقه أو زيادة تشبعه أو تقليله أو تغيير تدرجه بناءً على قيمته الحالية، كل ذلك دون الحاجة إلى تحديد متغيرات لونية متعددة مسبقًا.

تعتمد الصيغة على دالة color()، مما يسمح لك بتحديد مساحة لون (مثل hsl, lab, lch, rgb, أو oklab)، واللون الأساسي المراد تعديله، والتعديلات المطلوبة. على سبيل المثال:

.element {
 color: color(hsl red calc(h + 30) s l);
}

هذا المقتطف يأخذ اللون الأحمر، ويستخدم مساحة اللون hsl، ويزيد من تدرج اللون بمقدار 30 درجة. تمثل h, s, و l قيم تدرج اللون والتشبع والإضاءة الحالية على التوالي. دالة calc() ضرورية لإجراء العمليات الحسابية.

لماذا HSL و Lab؟

بينما تعمل صيغة الألوان النسبية مع مساحات ألوان مختلفة، فإن HSL و Lab تقدمان مزايا مميزة لمعالجة الألوان وإمكانية الوصول. دعنا نستكشف السبب:

HSL (تدرج اللون، التشبع، الإضاءة)

HSL هي مساحة لون أسطوانية تمثل الألوان بشكل بديهي بناءً على الإدراك البشري. يتم تعريفها بواسطة ثلاثة مكونات:

تدرج اللون (Hue): موضع اللون على عجلة الألوان (0-360 درجة). يكون اللون الأحمر عادةً عند 0، والأخضر عند 120، والأزرق عند 240.
التشبع (Saturation): شدة أو نقاء اللون (0-100%). 0% هو تدرج الرمادي، و 100% هو التشبع الكامل.
الإضاءة (Lightness): السطوع المدرك للون (0-100%). 0% هو الأسود، و 100% هو الأبيض.

فوائد HSL:

معالجة بديهية: يسهل HSL تعديل الألوان بناءً على الصفات الإدراكية. زيادة الإضاءة تجعل اللون أكثر سطوعًا، وتقليل التشبع يجعله باهتًا، وتغيير تدرج اللون يحرك اللون على طول عجلة الألوان.
إنشاء أنظمة ألوان: يبسط HSL عملية إنشاء أنظمة ألوان متناغمة. يمكنك بسهولة توليد ألوان متكاملة (تدرج اللون + 180 درجة)، أو ألوان متجاورة (تدرجات لونية قريبة من بعضها البعض)، أو ألوان ثلاثية (تدرجات لونية تفصل بينها 120 درجة).
سمات ديناميكية: يعتبر HSL مثاليًا للسمات الديناميكية. يمكنك تحديد لون أساسي ثم استخدام صيغة الألوان النسبية لإنشاء متغيرات مختلفة للأوضاع الفاتحة والداكنة.

مثال: إنشاء سمة الوضع الداكن

لنفترض أن لون علامتك التجارية هو #007bff (أزرق نابض بالحياة). يمكنك استخدام HSL لإنشاء سمة وضع داكن تحافظ على جوهر العلامة التجارية مع كونها أسهل على العينين في ظروف الإضاءة المنخفضة.

:root {
 --brand-color: #007bff;
 --brand-color-hsl: color(oklch #007bff h s l);
 --bg-color: #fff;
 --text-color: #000;
}

@media (prefers-color-scheme: dark) {
 :root {
 --bg-color: #121212; /* رمادي داكن */
 --text-color: #fff;
 --brand-color: color(hsl var(--brand-color) h calc(s * 0.8) calc(l * 1.2)); /* لون علامة تجارية أقل تشبعًا وأفتح قليلاً */
 }
}

body {
 background-color: var(--bg-color);
 color: var(--text-color);
}

.brand-button {
 background-color: var(--brand-color);
 color: #fff;
}

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

Lab (الإضاءة، a، b)

Lab (أو CIELAB) هي مساحة لون مصممة لتكون متجانسة إدراكيًا. هذا يعني أن التغيير في قيم اللون يتوافق مع تغيير مماثل في فرق اللون المدرك، بغض النظر عن اللون الأصلي. يتم تعريفها بواسطة ثلاثة مكونات:

L: الإضاءة (0-100%). 0 هو الأسود، و 100 هو الأبيض.
a: الموضع على محور الأخضر-الأحمر. القيم السالبة هي الأخضر، والقيم الموجبة هي الأحمر.
b: الموضع على محور الأزرق-الأصفر. القيم السالبة هي الأزرق، والقيم الموجبة هي الأصفر.

فوائد Lab:

التجانس الإدراكي: يجعل التجانس الإدراكي لـ Lab مثاليًا للمهام التي تكون فيها فروق الألوان الدقيقة حاسمة، مثل تصحيح الألوان وفحوصات إمكانية الوصول.
نطاق لوني واسع: يمكن لـ Lab تمثيل نطاق أوسع من الألوان مقارنة بـ RGB أو HSL.
إمكانية الوصول: غالبًا ما يستخدم Lab في حسابات إمكانية الوصول لضمان تباين كافٍ للألوان بين النص والخلفية. تستخدم إرشادات الوصول إلى محتوى الويب (WCAG) صيغة تعتمد على السطوع النسبي، والتي ترتبط ارتباطًا وثيقًا بمساحة اللون Lab.

مثال: تحسين تباين الألوان لإمكانية الوصول

يعد ضمان تباين كافٍ للألوان أمرًا حيويًا لإمكانية الوصول. لنفترض أن لديك لون نص ولون خلفية لا يفيان تمامًا بمتطلبات نسبة تباين WCAG AA (4.5:1). يمكنك استخدام Lab لضبط إضاءة لون النص حتى يفي بالمتطلبات.

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

.text {
 color: var(--text-color);
 background-color: var(--bg-color);
}

:root {
 --text-color: #333;
 --bg-color: #eee;
}

/*مثال: هذا لا يحسب نسبة التباين مباشرة.*/
/*إنه مثال تصوري لتعديل الإضاءة*/

.accessible-text {
 --current-text-color: var(--text-color);
 color: color(lab var(--current-text-color) calc(l + 10) a b); /* تفتيح النص بمقدار 10 وحدات. لن يكون لهذا تأثير إلا إلى حد معين إذا كانت قيمة L للون النص قريبة من 100. للتغميق، يجب الطرح*/

}

في هذا المثال، نحاول تفتيح لون النص لتحسين التباين. نظرًا لأنه لا يمكننا حساب نسبة التباين في CSS، نحتاج إلى فحص النتيجة بعد التعديل وتحسينها حسب الضرورة.

Oklab: تحسين على Lab

Oklab هي مساحة لون جديدة نسبيًا مصممة لمعالجة بعض أوجه القصور الملحوظة في Lab. تهدف إلى تحقيق تجانس إدراكي أفضل، مما يسهل التنبؤ بكيفية تأثير التغييرات في قيم الألوان على اللون المدرك. في كثير من الحالات، يوفر Oklab طريقة أكثر سلاسة وطبيعية لضبط الألوان مقارنة بـ Lab، خاصة عند التعامل مع التشبع والإضاءة.

استخدام Oklab مع صيغة الألوان النسبية مشابه لاستخدام Lab. ما عليك سوى تحديد oklab كمساحة لون:

.element {
 color: color(oklab #ff0000 calc(l * 1.1) a b); /*تفتيح اللون بنسبة 10%*/
}

أمثلة عملية وحالات استخدام

تفتح صيغة الألوان النسبية مع HSL و Lab مجموعة واسعة من الإمكانيات لتصميم الويب. إليك بعض الأمثلة العملية:

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

مثال: توليد لوحة ألوان باستخدام HSL

:root {
 --base-color: #29abe2; /* أزرق فاتح */
 --complementary-color: color(hsl var(--base-color) calc(h + 180) s l);
 --analogous-color-1: color(hsl var(--base-color) calc(h + 30) s l);
 --analogous-color-2: color(hsl var(--base-color) calc(h - 30) s l);
 --triadic-color-1: color(hsl var(--base-color) calc(h + 120) s l);
 --triadic-color-2: color(hsl var(--base-color) calc(h - 120) s l);
}

.base {
 background-color: var(--base-color);
}

.complementary {
 background-color: var(--complementary-color);
}

.analogous-1 {
 background-color: var(--analogous-color-1);
}

.analogous-2 {
 background-color: var(--analogous-color-2);
}

.triadic-1 {
 background-color: var(--triadic-color-1);
}

.triadic-2 {
 background-color: var(--triadic-color-2);
}

يوضح هذا المثال كيفية توليد لوحة ألوان بناءً على لون أساسي واحد باستخدام HSL. يمكنك بسهولة تكييف هذا الكود لإنشاء تناغمات لونية مختلفة وتخصيصها لاحتياجات التصميم الخاصة بك.

مثال: إنشاء تأثير التمرير (Hover) باستخدام Lab

.button {
 background-color: #4caf50; /* لون أخضر */
 color: #fff;
 border: none;
 padding: 10px 20px;
 cursor: pointer;
 transition: background-color 0.3s ease;
}

.button:hover {
 background-color: color(lab #4caf50 l calc(a * 1.1) calc(b * 1.1)); /* تفتيح طفيف وزيادة قيمتي a و b */
}

هنا، نستخدم Lab لتفتيح اللون قليلاً وتحويله نحو الأحمر والأصفر عند التمرير، مما يخلق ملاحظات مرئية دقيقة ولكن ملحوظة للمستخدم.

توافق المتصفحات والحلول البديلة (Fallbacks)

كما هو الحال مع أي ميزة جديدة في CSS، يعد توافق المتصفحات اعتبارًا مهمًا. صيغة الألوان النسبية مدعومة في معظم المتصفحات الحديثة، بما في ذلك Chrome و Firefox و Safari و Edge. ومع ذلك، قد لا تدعمها المتصفحات القديمة.

لضمان عمل موقعك على جميع المتصفحات، من الضروري توفير حلول بديلة للمتصفحات التي لا تدعم صيغة الألوان النسبية. يمكنك القيام بذلك باستخدام متغيرات CSS وقاعدة @supports.

:root {
 --base-color: #29abe2;
 --highlight-color: #33b5e5; /* لون بديل */
}

@supports (color: color(hsl var(--base-color) h calc(s * 1.2) l)) {
 :root {
 --highlight-color: color(hsl var(--base-color) h calc(s * 1.2) l); /* استخدم صيغة الألوان النسبية إذا كانت مدعومة */
 }
}

.highlight {
 background-color: var(--highlight-color);
}

في هذا المثال، نحدد لونًا بديلاً (#33b5e5) ثم نستخدم قاعدة @supports للتحقق مما إذا كان المتصفح يدعم صيغة الألوان النسبية. إذا كان يدعمها، فإننا نحدّث متغير --highlight-color باللون الذي تم إنشاؤه باستخدام صيغة الألوان النسبية. هذا يضمن أن المستخدمين على المتصفحات القديمة لا يزالون يرون عنصرًا مميزًا، حتى لو لم يكن بنفس اللون تمامًا كما في المتصفحات الأحدث.

اعتبارات إمكانية الوصول

بينما يمكن أن تكون صيغة الألوان النسبية أداة قوية لإنشاء تصميمات جذابة بصريًا، فمن الأهمية بمكان مراعاة إمكانية الوصول. تأكد من أن تركيبات الألوان التي تنشئها توفر تباينًا كافيًا للمستخدمين الذين يعانون من ضعف البصر. استخدم أدوات مثل WebAIM Contrast Checker للتحقق من أن تركيبات الألوان الخاصة بك تفي بمتطلبات نسبة تباين WCAG AA أو AAA.

تذكر أن إدراك الألوان يمكن أن يختلف بشكل كبير بين الأفراد. ضع في اعتبارك اختبار تصميماتك مع مستخدمين لديهم أنواع مختلفة من عمى الألوان أو ضعف البصر لضمان قدرتهم على إدراك موقعك والتفاعل معه بسهولة.

الخاتمة

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

احتضن قوة صيغة الألوان النسبية وارتق بمهاراتك في تصميم الويب إلى المستوى التالي. جرب مساحات الألوان المختلفة والعمليات الحسابية واعتبارات إمكانية الوصول لإنشاء مواقع ويب جميلة وشاملة للجميع.

لمزيد من التعلم

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