مقال
أدوات الألوان للويب: hex ولوحات الألوان وإمكانية الوصول
يبدو اختيار ألوان موقع ما أمرًا بسيطًا حتى تواجه رموز hex وثلاثيات RGB وزوايا HSL التي تصف الشيء نفسه بطرق مختلفة. توضح هذه المقالة كيف تترابط تلك الصيغ، وكيف تحوّل لونًا واحدًا للعلامة إلى لوحة قابلة للاستخدام، وكيف تضمن أن تبقى النتيجة مقروءة لمن يرون اللون بشكل مختلف.
hex وRGB وHSL تصف اللون نفسه
يُمزج اللون على الشاشة من الضوء الأحمر والأخضر والأزرق. تكتب صيغة hex هذه القنوات الثلاث كرمز من ستة أحرف مثل #2563eb، حيث يمثل كل زوج من الأحرف قناة واحدة من 00 إلى ff. أما RGB فتكتب الأرقام الثلاثة نفسها بالنظام العشري، من 0 إلى 255، وهو أسهل في القراءة لكنه لا يضيف شيئًا. وتدخل HSL من زاوية أخرى: فهي تصف اللون عبر درجته (موضع على عجلة الألوان من 0 إلى 360 درجة)، وتشبّعه (مدى حيويته)، وإضاءته (مدى قربه من الأبيض أو الأسود). HSL هي الصيغة التي يلجأ إليها المصممون حين يريدون تعديل لون، فرفع الإضاءة أو إزاحة الدرجة تغيير واحد بديهي بدلًا من ثلاثة أرقام مترابطة. يتيح لك المحول التنقل بين الصيغ الثلاث جميعها، فتقرأ قيمة بصيغة وتستخدمها بأخرى.
تحويل لون واحد إلى لوحة
نادرًا ما يكفي لون واحد للعلامة. تحتاج اللوحة العملية عادةً إلى لون أساسي، ولون أو لونين مميزين، ومجموعة من الرماديات المحايدة للنص والخلفيات. تتبع العلاقات بين الألوان قواعد بسيطة على عجلة الألوان: الألوان المتكاملة تقع متقابلة، والألوان المتشابهة تقع متجاورة لإحساس هادئ، والمجموعة الثلاثية توزّع ثلاثة ألوان بالتساوي لتباين دون تنافر. تطبّق أداة مخططات الألوان هذه القواعد على لونك الأولي وتعطيك رموز hex المطابقة، فلا يلزمك حساب الزوايا يدويًا. وإذا كان لديك بالفعل صورة يعجبك مزاجها، فإن مستخرج اللوحة يقرأ الألوان السائدة منها، وهي طريقة سريعة لبناء موقع استنادًا إلى صورة أو شعار.
التباين وعمى الألوان
قد تخذل اللوحة التي تبدو جميلة على شاشتك القراء رغم ذلك. لدى رجل واحد تقريبًا من كل اثني عشر وامرأة واحدة من كل مئتين شكل ما من قصور رؤية الألوان، وأكثره شيوعًا صعوبة فصل الأحمر عن الأخضر. إذا كانت إشارتك الوحيدة لخطأ ما نصًا أحمر على زر أخضر، فلن يلاحظها هؤلاء القراء. الحل ليس تجنب اللون بل ألا تعتمد على اللون وحده أبدًا: اقرنه برمز أو تسمية أو شكل، واحتفظ بتباين كافٍ في الإضاءة بين النص وخلفيته. يبيّن لك محاكي عمى الألوان كيف تبدو لوحتك ضمن الأنواع الشائعة لرؤية الألوان، فتلتقط المشكلة قبل الإطلاق بدلًا من بعد شكوى.
القيام بكل ذلك في المتصفح
لا تحتاج أي من هذه الخطوات إلى خادم. فتحويل رمز hex، وتوليد مخطط، وقراءة الألوان من صورة، ومحاكاة عمى الألوان كلها حسابات صغيرة يعالجها المتصفح فورًا. وهذا مهم حين تكون الصورة التي تأخذ منها عينة تصميمًا غير منشور أو شعار عميل: بالأدوات هنا يبقى الملف على جهازك ولا يُرفع شيء. تحصل على النتيجة نفسها التي تحصل عليها من خدمة عبر الإنترنت، دون تسليم العمل الفني. يعمل محول الألوان ومولّد مخططات الألوان ومستخرج اللوحة ومحاكي عمى الألوان جميعها محليًا، وتعمل بالطريقة نفسها دون اتصال بعد تحميل الصفحة.
OKLCH وفضاءات الألوان الأوسع
Hex وRGB وHSL جميعها تصف الألوان داخل نطاق sRGB الذي اعتمدته الشاشات منذ سنوات. الشاشات الأحدث تعرض ألواناً أكثر، ويمكن لـ CSS الآن الوصول إليها عبر الدالة color() وفضاء Display P3، الذي يُضيف خضراً وحمراً زاهيين لا يستطيع sRGB تمثيلها. أما التحول الأكبر فهو OKLCH، وهو طريقة لكتابة اللون من خلال الإضاءة والكثافة اللونية والتدرج اللوني (hue) بما يتوافق مع طريقة إدراك العين للسطوع فعلياً. في HSL، لون أصفر وآخر أزرق عند نفس مستوى الإضاءة 50% يبدوان مختلفين تماماً: الأصفر يبدو فاتحاً والأزرق يبدو داكناً. في OKLCH، تثبيت قيمة الإضاءة وتغيير التدرج اللوني فقط يُبقي السطوع المُدرَك ثابتاً. هذا يجعله أداة عملية لبناء لوحة ألوان حيث تحقق كل درجة نفس هدف التباين بتثبيت رقم واحد، بدلاً من ضبط كل لون يدوياً.
الأدوات المذكورة في هذا المقال
- محوّل الألوانحوّل الألوان بين HEX وRGB وHSL وHSV وCMYK. يتضمن مدقق التباين WCAG. بدون تحميل.
- مولّد نظام الألوانتوليد لوحات ألوان تكميلية ومتشابهة وثلاثية ورباعية وأحادية اللون من لون أساسي. بدون تحميل.
- مستخرج لوحة الألواناستخرج الألوان السائدة من صورة كعيّنات HEX. انسخ أي لون. بدون تحميل.
- محاكي عمى الألوانمحاكاة protanopia وdeuteranopia وtritanopia وachromatopsia على صورة. بدون تحميل.
الأسئلة الشائعة
ما الفرق بين hex وRGB؟
هما طريقتان لكتابة اللون نفسه. تحزم hex قنوات الأحمر والأخضر والأزرق في رمز من ستة أحرف بالأساس 16، بينما تسرد RGB القنوات الثلاث نفسها كأرقام عشرية من 0 إلى 255. #ff0000 وrgb(255, 0, 0) هما الأحمر نفسه. صيغة hex مدمجة وشائعة في CSS وملفات التصميم، وRGB أسهل في القراءة بنظرة سريعة، والتحويل بينهما لا يغيّر شيئًا في اللون ذاته.
كيف أعرف أن ألواني مقروءة لمستخدمي عمى الألوان؟
مرّر لوحتك عبر محاكي عمى الألوان الذي يعيد رسم ألوانك كما يراها شخص لديه كل نوع شائع من رؤية الألوان. راقب الأزواج التي تنهار إلى الدرجة نفسها، خصوصًا الأحمر والأخضر. أأمن عادة هي ألا تستخدم اللون أبدًا كدليل وحيد: ادعمه بنص أو رمز أو نمط، واحتفظ بفارق إضاءة واضح بين المقدمة والخلفية كي يبقى المعنى حتى لو غابت الدرجة.