قد تختار مجموعة ألوان تبدو جميلة بجانب بعضها، ثم تكتشف عند استخدامها في التصميم أن النص أصبح صعب القراءة، أو أن العناصر كلها تتنافس على انتباه المستخدم. المشكلة هنا قد تكون في درجات الألوان أو في طريقة توزيعها، حتى لو كانت العلاقة بينها مناسبة على عجلة الألوان.
لذلك يفيدك فهم اللون في اتخاذ قرارات أوضح أثناء العمل. في هذا المقال سنتعرّف على خصائص الألوان وعَجَلَتِهَا، ثم نُوضِّح أشهر طرق تنسيقها وكيف تنتقل من اختيار لوحة ألوان إلى استخدامها داخل التصميم بشكل فعلي.
ما هي الألوان؟
اللون هو إدراك بصري يَنتُج عن استجابة العين والدماغ للضوء الذي يصل إلينا. قد يصدر هذا الضوء من شاشة، أو ينعكس عن سطح مثل الورق، ويتأثر اللون الذي نراه بالإضاءة وما يحيط به أيضًا، كما يُوضِّح تعريف اللون لدى اللجنة الدولية للإضاءة CIE.
ضمن الطيف المرئي، ترتبط الأطوال الموجيّة بنوعها حيث يكون الأطول هو الأحمر، والأقصر هو البنفسجي. ولكن الألوان التي نشاهدها يوميًا تَنتُج غالبًا عن مزيج من الأطوال الموجيّة مع بعضها؛ لذلك لا يصح أن نفترض وجود طول موجي منفرد لكل لون نراه.
الرسم التالي يُوضِّح فكرة اختلاف الأطوال الموجيّة، وهو مدخل لفهم علاقة الضوء باللون. أما في التصميم، فسنحتاج أيضًا إلى وصف الفروق بين الألوان، لأن اختيار «الأحمر» وحده لا يخبرنا إن كنا نقصد أحمر داكنًا أو فاتحًا أو قليل التشبُّع.
كيف نَصِفُ خصائص اللون؟
عندما تُعدِّل لونًا داخل برنامج التصميم، يمكنك تغيير أكثر من جانب في مظهره. تساعدنا المصطلحات التالية على فهم ما نغيّره، مع الانتباه إلى أن طرق قياس هذه الخصائص وتمثيلها تختلف بين النماذج اللونية.
صِبغة اللون Hue
هي الخاصية التي نُميِّز بها بين عائلات مثل الأحمر والأخضر والأزرق. فعندما تنتقل من الأزرق إلى الأخضر، تكون قد غيّرت الصِبغة، بينما تستطيع الحصول على درجات فاتحة وداكنة ضمن العائلة اللونية نفسها.
التشبُّع Saturation
يصف مدى قوة حضور اللون مقارنة بمظهره الأقل تشبُّعًا. لتقريب الفكرة، قارن لونًا زاهيًا بنسخة منه تبدو أقرب إلى الرمادي؛ في الثانية يكون التشبُّع أقل، ولكن يجب مراعاة أن تغيير السطوع قد يؤثر أيضًا في المظهر.
يمكن ملاحظة ذلك في المثال التالي لشعار جوجل. تقليل التشبُّع يغيّر حضور الألوان، رغم بقاء الشكل وترتيب عناصره كما هما. لذلك قد تحتاج إلى تقليل تشبُّع لون في مساحة كبيرة، مع الاحتفاظ بدرجة أقوى منه لعنصر صغير تريد إبرازه.
الألوان الدافئة والباردة
نَصِفُ الألوان المائلة إلى الأحمر والبرتقالي والأصفر عادة بأنها دافئة، ونَصِفُ الألوان المائلة إلى الأزرق بأنها باردة. هذا وصف يساعدنا على المقارنة، وقد يبدو اللون نفسه أدفأ أو أبرد بحسب اللون المجاور له.
تُوضِّح الصورتان التاليتان اختلاف المظهر عند الميل إلى ألوان دافئة أو باردة. لا يعني ذلك أن كل لون يترك شعورًا ثابتًا لدى الجميع؛ فالموضوع والسياق وطريقة الاستخدام تؤثر في الانطباع. كذلك ينبغي التمييز بين هذا الوصف وبين درجة حرارة مصدر الضوء وتوازن الأبيض في التصوير.
القيمة Value
تُعبِّر عن مدى كون اللون فاتحًا أو داكنًا. يُوضِّح الرسم التالي درجات من الأحمر عند إضافة الأبيض أو الأسود إليه، وهي طريقة مألوفة لشرح التفتيح والتغميق.
ولكن القيمة ليست تعريفًا لنسبة الأبيض أو الأسود، ولا تتطابق جميع مقاييس الفاتح والداكن في البرامج. مثلًا، قيمة Value في نموذج HSV ليست هي Lightness في نموذج HSL. ما نحتاج إليه الآن هو إدراك أن لونين من العائلة نفسها قد يختلفان كثيرًا في وضوحهما على خلفية مُعيَّنة.
ما هي عجلة الألوان؟
عجلة الألوان ترتيب دائري يُوضِّح العلاقات بين الصِّبغات اللونية، ويساعدك على استكشاف ألوان متجاورة أو متقابلة أو متباعدة. ويمكنك استخدامها لبناء نقطة بداية للوحة الألوان، ثم تعديل الدرجات بما يناسب التصميم.
الرسوم في هذا المقال تعتمد العجلة التقليدية التي تبدأ بالأحمر والأصفر والأزرق، وتُعرَف اختصارًا باسم RYB. من المفيد تحديد ذلك لأن الألوان الأولية تختلف بحسب النموذج: تعتمد الشاشات على RGB، بينما تَسْتَخْدِمُ الطباعة عادة CMYK. يُقدِّم شرح Adobe للنماذج اللونية تفاصيل هذه الفروق.
إذًا، العجلة هنا أداة لشرح العلاقات، وليست وصفًا لطريقة توليد جميع الألوان في كل جهاز أو مادة. كما أن مزج ثلاثة ألوان أولية لا يتيح إنتاج كل الألوان التي تستطيع العين رؤيتها.
الألوان الأولية Primary Colors
في العجلة التقليدية المعروضة، نبدأ بالأحمر والأصفر والأزرق باعتبارها الألوان الأولية. ننطلق منها لشرح مواضع بقية الألوان وعلاقاتها، دون تعميم هذه المجموعة على الشاشات والطباعة.
الألوان الثانوية Secondary Colors
الألوان الثانوية في هذه العجلة هي البرتقالي والأخضر والبنفسجي. تُشرَح بوصفها ناتجة عن مزج لونين أوليين: الأحمر مع الأصفر، والأصفر مع الأزرق، والأزرق مع الأحمر. أما النتيجة الفعلية عند مزج مواد التلوين فتتأثر بنوع الأصباغ ونسبها.
الألوان الثالثيّة Tertiary Colors
تقع الألوان الثالثيّة بين لون أولي ولون ثانوي مجاور له، مثل الأصفر البرتقالي والأزرق الأخضر. تساعدنا هذه الدرجات الوسيطة على رؤية العلاقات بتفصيل أكبر بدل الاكتفاء بعدد قليل من الألوان.
ما هي طرق تنسيق الألوان؟
تُوفِّر عجلة الألوان عدّة تركيبات شائعة يمكنك البدء منها. كل تركيبة تُحدِّد علاقة بين الصِّبغات، لكنها تترك لك قرارات مثل التشبُّع والدرجات الفاتحة والداكنة والمساحة التي سيشغلها كل لون.
الألوان المتكاملة Complementary
الألوان المتكاملة تقع في مواضع متقابلة على عجلة الألوان في العجلة التقليدية، من أمثلتها الأزرق والبرتقالي. تتيح هذه العلاقة اختلافًا واضحًا بين الصبغتين، ويمكنك تجربة أحدهما لونًا رئيسيًا والآخر للتأكيد كلون ثانوي.
الألوان المتكاملة بالانقسام Split Complementary
تبدأ هذه التركيبة بلون، ثم تختار اللونين المجاورين للون المقابل له على العجلة. لا يشترط أن يكون الأول لونًا أوليًا أو أن يكون الآخران لونين ثانويين؛ المهم هو مواضع الألوان بالنسبة إلى بعضها.
تعطيك هذه الطريقة خيارين مساندين بدل لون مقابل واحد، ويمكنك تجربة أحدهما في مساحة أصغر حتى يبقى ترتيب الأولويات واضحًا.
التركيبة الثلاثية Triadic
تعتمد التركيبة الثلاثية على ثلاثة ألوان متباعدة بمسافات متساوية على عجلة الألوان. ومن أمثلتها في العجلة التقليدية الأحمر والأصفر والأزرق.
وجود ثلاثة ألوان مختلفة لا يعني ضرورة استخدامها بالقوة نفسها. ابدأ بلون يغلب على التصميم، ثم حدِّد أين تحتاج إلى اللونين الآخرين، بدل توزيعها بالتساوي دون سبب.
الألوان المتجاورة Analogous
تستخدم هذه التركيبة ألوانًا تقع بجانب بعضها على العجلة، مثل الأزرق والأزرق الأخضر والأخضر. وغالبًا تُشرَح بثلاثة ألوان، لكن العدد ليس شرطًا ثابتًا لتعريفها.
التقارب بين الصِّبغات قد يساعد على بناء مظهر مترابط، لكنه قد يجعل تمييز بعض العناصر أصعب إذا كانت درجاتها متقاربة أيضًا. لذلك راجع الفرق بين الخلفيات والنصوص والعناصر المهمة.
التركيبة الرباعية Tetradic
تتكوّن التركيبة الرباعية من زوجين من الألوان المتكاملة، أي أربعة ألوان تربطها علاقتان من التقابل. وقد تُشكِّل مواضعها مستطيلًا على العجلة، بينما يكون التوزيع المتساوي حالة مُربَّعة.
هذه التركيبة تمنحك تنوُّعًا أكبر، لكنها تحتاج إلى ضبط المساحات والتشبُّع. قد تستخدم لونًا رئيسيًا، وتُخصِّص بقية الألوان لأدوار مُحدَّدة، مع مساحات محايدة تمنح العناصر مجالًا للظهور.
التركيبة الأحادية Monochromatic
تعتمد التركيبة الأحادية على صِبغة واحدة مع اختلاف درجاتها وتشبُّعها، مثل مجموعة من درجات الأزرق. يمكنك الاستفادة منها عندما تريد ترابطًا واضحًا بين أجزاء التصميم.
ويظل عليك التحقُّق من وضوح الفروق بين الدرجات. انتماء النص والخلفية إلى العائلة نفسها لا يضمن وجود تباين كافٍ لقراءة النص.
كيف تختار لوحة لتصميمك؟
ابدأ بهدف التصميم، ثم حدِّد أدوار الألوان، واختر لوحة أولية، وجرِّبها على العناصر الفعلية قبل اعتمادها. تساعدك التركيبات السابقة على توليد خيارات، أما القرار فيعتمد على ما يحتاج التصميم إلى توضيحه.
حدِّد السياق والقيود. راجع الرسالة والجمهور والوسيط الذي سيظهر فيه التصميم. وإذا كانت للعلامة التجارية ألوان معتمدة، ابدأ منها وافحص طريقة استخدامها في المساحات والنصوص.
اختر لونًا رئيسيًا وألوانًا مساندة. لا يوجد عدد يناسب كل مشروع، لكن البدء بعدد محدود يساعدك على فهم دور كل لون. أضف درجات محايدة للخلفيات والنصوص، ثم وسِّع اللوحة عندما تظهر حاجة واضحة.
اربط اللون بوظيفة. في الواجهة، حدِّد لون النص والخلفية والإجراء الرئيسي، ثم راجع ألوان الحالات عند الحاجة. يساعد ثبات الاستخدام على تمييز العناصر، ويمكن التوسع في ذلك ضمن تصميم واجهات المُستخدِم.
جرِّب الألوان داخل نموذج فعلي. ضعها في صفحة أو بطاقة أو نموذج يحتوي على نصوص حقيقية. راقب ما يبرز أولًا، وهل تتنافس العناصر، وهل تحتاج بعض المساحات إلى لون أهدأ.
افحص التباين وعدِّل الدرجات. قد تحتاج إلى تغميق لون النص أو تفتيح الخلفية، دون تغيير الصِبغة التي بدأت بها. ويمكن استخدام Adobe Color لاستكشاف العلاقات، ثم مراجعة التباين بين الألوان التي ستتجاور فعلًا.
مثلًا، لنفترض أنك تُصمِّم بطاقة لخدمة تحتوي على عنوان ووصف وزر حجز. يمكنك تجربة خلفية فاتحة، ونص داكن، ولون رئيسي للزر. إذا استخدمت الدرجة القوية نفسها في العنوان والوصف والحدود والزر، فقد يصبح تحديد الإجراء الأهم أصعب؛ جرِّب تقليل حضور العناصر المساندة ثم راجع النتيجة.
هذا مثال على توزيع الأدوار، وليس وصفة ثابتة لكل بطاقة. ما نريد التحقُّق منه هو أن المحتوى مقروء وأن الإجراء واضح، مع بقاء التصميم مُتَّسقًا مع بقية المُنتَج.
كيف تراجع وضوح الألوان؟
في الواجهات الرقمية، الانسجام البصري جزء من القرار، لكنه لا يغني عن فحص قابلية القراءة. يشترط معيار WCAG عند المستوى AA تباينًا لا يقلّ عن 4.5:1 للنص العادي، و3:1 للنص الكبير وفق تعريف المعيار، مع استثناءات مُحدَّدة. يمكنك الرجوع إلى شرح تباين النص لدى W3C عند الفحص.
كذلك لا تستخدم اللون وحده لنقل المعنى. عند وجود خطأ في حقل، أضف رسالة تُوضِّح المشكلة بدل الاكتفاء بإطار أحمر، وعند عرض حالة الطلب استخدم تسمية مفهومة إلى جانب اللون. يشرح معيار استخدام اللون أهمية توفير وسيلة بصرية إضافية مثل النص أو الشكل.
إذا كان التصميم سيظهر فوق صورة أو تدرُّج، فراجع الخلفية الفعلية وراء النص. وإذا كان المُنتَج يدعم الوضع الداكن، افحص أزواج الألوان فيه أيضًا؛ تغيير الخلفية قد يغيّر وضوح درجات كانت مناسبة في الوضع الفاتح.
عندما تعود إلى اختيار ألوان مشروعك، ابدأ بلوحة تستطيع تفسير دور كل لون فيها، ثم جرِّبها على جزء صغير من التصميم. ستساعدك عجلة الألوان على استكشاف الخيارات، وتساعدك مراجعة القراءة والأولويات على معرفة ما يحتاج إلى تعديل.
المصادر
تاريخ النشر
26 أغسطس 2026
آخر تعديل
5 أكتوبر 2026
