نظرية الألوان

شرح بالتفصيل الممل للون وعلاقته بالتصميم وUI/UX

مقدمة سريعة

هشرحلك كل حاجة عن نظرية الألوان خطوة بخطوة — من العجلة الأساسية لحد استخدام اللون في واجهات المستخدم (UI/UX)، ومعاها أمثلة توضيحية (مش مشاريع) مرتبة من السهل للصعب، وفي الآخر هديك 10 أسئلة اختيار من متعدد للتثبيت وكمان عناوين للبحث لو حابب تتعمق أكثر.

عجلة الألوان والألوان الأساسية والثانوية

عجلة الألوان (Color Wheel): دائرة بتنظم الألوان حسب العلاقة بينها — بتخليك تشوف بسرعة ألوان متناسقة أو متعاكسة.

الألوان الأساسية (Primary)

في نموذج الألوان الضوئي (RGB): أحمر (R)، أخضر (G)، أزرق (B).

في نموذج الألوان الطبعى/صبغي (RYB التقليدي للرسم): أحمر، أصفر، أزرق.

الألوان الثانوية (Secondary)

بتتكوَّن من مزج لونين أساسيين. مثال: أحمر + أصفر = برتقالي.

الألوان الثلاثية (Tertiary)

مزيج لون أساسي + لون ثانوي، زي أحمر-برتقالي.

ملاحظات بسيطة: في شغل الويب والتصميم الرقمي بنستخدم RGB أو HSL، وفي الطباعة بنستخدم CMYK.

تدرج لوني / شفافية / التركيز / التشبع

التدرج اللوني (Gradient)

انتقال سلس بين لونين أو أكثر. ليه مهم؟ بيدي عمق وحركة بصريّة.

الشفافية (Opacity)

مدى رؤية لون خلفه؛ قيمة من 0 (شفاف تماماً) إلى 1 (غير شفاف). تُستخدم لتخفيف تأثير عنصر أو لعمل طبقات.

التركيز (Focus)

استخدام اللون لجذب الانتباه (مثلاً زر CTA بلون قوي مقابل خلفية باهتة).

التشبع (Saturation)

مدى "نقاء" اللون. لون مشبع عالي = قوي وواضح. منخفض = هادئ أو باهت (muted).

نماذج الألوان: RGB و CMYK (وبسطر عن HSL/HSV)

RGB

(Red, Green, Blue): خاص بالشاشات. اللون بنتحصل عليه بخلط ضوء.

R=255,G=0,B=0 => أحمر ساطع

CMYK

(Cyan, Magenta, Yellow, Key/Black): خاص بالطباعة. الألوان بتُطبع عن طريق امتصاص/عكس الضوء.

يستخدم في الطابعات والنشر المطبوع

HSL / HSV

طريقة وصف اللون من حيث:

  • Hue (الصبغة)
  • Saturation (التشبع)
  • Lightness/Value (الإضاءة/السطوع)

مفيدة علشان تعدل ألوان بشكل بديهي.

اختيار الألوان المناسبة للمشروع

عوامل لازم تفكر فيها:

1

الهدف والرسالة

هل المشروع رسمي؟ مرح؟ شبابي؟

2

الجمهور المستهدف

ثقافة الجمهور تؤثر — ألوان لها دلالات ثقافية.

3

النداء البصري (Contrast)

لسهولة القراءة (خصوصًا للأشخاص ضعاف البصر). اتأكد من نسب التباين (مثلاً WCAG).

4

الهوية البصرية والبراندينج

الألوان الرئيسية والفرعية وثباتها عبر المطبوعات والشاشة.

5

البيئة التقنية

شاشة (RGB) ولا طباعة (CMYK)؟ لازم تبيّن الألوان صح.

6

تجربة المستخدم

لون الخطأ، النجاح، تحذيرات، أزرار CTA — كل ده لازم واضح ومتناسق.

أهم المواقع لاختيار الألوان

Coolors

أداة سريعة لإنشاء لوحات ألوان متعددة

Adobe Color

عجلة ألوان تفاعلية واستكشاف تناغم الألوان

Material Palette

أداة جوجل لإنشاء لوحات ألوان متوافقة مع Material Design

Color Hunt

مجموعة من لوحات الألوان الجاهزة للاستخدام

Paletton

أداة متقدمة لاستكشاف تناغم الألوان

Contrast Checker

للتحقق من نسب التباين بين الألوان

قواعد التناغم (Color Harmony)

أنواعها الرئيسية

Complementary (متكامل)

لون ومعاكسه على العجلة → تباين قوي.

Analogous (متجاور)

ألوان قريبة على العجلة → نغمة متناغمة وهادئة.

Triadic (مثلث)

3 ألوان متفرقة بالتساوي → توازن حيوي.

Tetradic / Double Complementary

مجموعتين مكملتين → غني بالألوان لكن صعب التوازن.

Split-Complementary

لون + لونيْن مجاورين لمكمّله → تباين أقل حدة من الـ Complementary.

Monochromatic

درجات مختلفة من نفس الصبغة → بسيط ومتناسق.

جرب بنفسك: اختر نوع التناغم

أزرق
بنفسجي
وردي

انقر على أي لون لنسخه

عوامل نفسية وثقافية للون

Color Psychology

أحمر

طاقة/خطر/حب (ممكن يُستخدم للـ CTA أو تحذير).

أزرق

ثقة/احترافية (شائع في البنوك والتقنية).

أخضر

طبيعى/صحة/نجاح.

أصفر

فرح/انتباه (يفضل استخدامه باعتدال).

بنفسجي

إبداع/رفاهية/غموض.

برتقالي

حماس/إبداع/دفء.

ملاحظة مهمة

المعاني تختلف بحسب الثقافة والسياق — ما ينفعش نعتمد عليها لوحدها.

قابلية الوصول (Accessibility)

أساسيات مهمة جداً

نسبة التباين (Contrast Ratio)

مثال هدف WCAG: نص عادي نسبة لا تقل عن 4.5:1 (أحيانًا 3:1 للخطوط الكبيرة).

لازم تختبر الألوان للنصوص والأزرار.

نص على خلفية: 4.5:1 ✓
نص على خلفية: 2.5:1 ✗

ألوان للمعاقين/ضعاف الألوان

اختبار الاختلافات ليس فقط باللون بل بالشكل/النص/الأيقونة.

أنواع عمى الألوان:

  • Deuteranopia (أخضر/أحمر)
  • Protanopia (أحمر/أخضر)
  • Tritanopia (أزرق/أصفر)

لا تعتمد على اللون فقط

استخدم أيقونات، نصوص، نماذج مختلفة لتوضيح حالات (خطأ/نجاح...).

نجاح: أيقونة ✓ + نص "تم الحفظ"

خطأ: أيقونة ✕ + نص "حدث خطأ"

كيف تؤثر الألوان على الأداء

اختبار A/B

اختبار A/B للألوان

  • تغيير لون زر CTA ممكن يرفع نسبة النقر (CTR).

  • لكن التأثير يعتمد على التباين، السياق، ومرحلة المستخدم.

  • دايمًا اختبر ولا تفترض: A/B testing هو الحل.

النسخة A

معدل التحويل: 2.5%

النسخة B

معدل التحويل: 3.8%

أمثلة توضيحية

مرتبة من السهل للصعب

مثال 1 — سهل: مزج لونين للحصول على ثانوي

لو عندك أحمر + أصفر → بتحصل على برتقالي. لو خففت تشبع الأحمر هتلاقي برتقالي أفتح (tint).

مثال 2 — سهل-متوسط: اختيار لوحة ألوان كوماتش

عايز لوح لون هادي لموقع مدونة صحية؟ اختار لوحة Analogous بلون أخضر كأساس + أخضر أفتح + أصفر باهت.

مثال 3 — متوسط: زر CTA عالي التركيز

خلفية صفحة رصاصية فاتحة، زِر CTA أحمر مشبع لأن الأحمر بيجذب العين. لازم تتأكد من نسبة تباين النص داخل الزر (أبيض على أحمر مثلاً).

مثال 4 — متوسط-صعب: تدرج لوني مع شفافية للعمق

Background

عنوان فوق الصورة

نص واضح فوق الخلفية بفضل الطبقة الشفافة

خلفية فيها صورة، عايز تضع شريط نص فوقها سابقًا: استعمل طبقة سوداء شفافة (opacity 0.5) وتدرج من شفاف إلى 0.6 علشان يقرو النص بدون فقدان التفاصيل.

مثال 5 — صعب: تجهيز لوحة ألوان للطبعة (CMYK)

RGB: #0057B8

للشاشات

CMYK: 100,70,0,0

للطباعة

عندك شعار بلون RGB مش ممكن الطباعة تطابقه تمامًا. لازم تحول اللون لـ CMYK وتعدله (أو تختار بدائل مطابقة للنُسخ المطبوعة) وتتأكد إن الألوان المطبوعه لا تزول أو تتغير تحت ضوء مختلف.

دور نظرية الألوان في مجال UI / UX

شرح بالتفصيل الممل

أ) تعريف الهرمية البصرية (Visual Hierarchy)

اللون بيساعد يحدد مين الأهم في الصفحة: زِر بلون مشبع + خلفية باهتة => يبرُز. الهيراركية بتخلي المستخدم يعرف يمشي في الواجهة بدون تفكير.

ب) الحالة النفسية والتوجيه (Mood & Tone)

اختيار لوحة ألوان يبلور انطباع المستخدم: موقع بنكي يحتاج أزرق موثوق، تطبيق أطفال ممكن يستخدم ألوان مشبعة ومبهجة.

موقع بنكي

ألوان تعطي إحساس بالثقة والاحترافية

تطبيق أطفال

ألوان مشبعة ومبهجة تجذب الانتباه

ج) القابلية للاكتشاف (Affordance)

الألوان بتعطي دلالات للعناصر التفاعلية: الأزرار، الروابط، الحقول. لون مختلف للـ hover وactive يعزز الفهم.

لون مختلف عند التفاعل (hover) يؤكد أن العنصر تفاعلي

د) الاتساق والهوية (Consistency & Branding)

خلي ألوان العلامة ثابتة في كل الشاشات: ألوان رئيسية، ثانوية، ألوان الحالات (error/success/warning). الاتساق يقلل الحمل المعرفي للمستخدم.

أساسي

ثانوي

نجاح

خطأ

هـ) قابلية الوصول (Accessibility)

اختيار ألوان حسب نسب تباين صحيحة، واختبار حالات عمى الألوان، وإضافة مؤشرات غير لونية (أيقونات/نصوص).

تم الحفظ بنجاح
حدث خطأ أثناء الحفظ

أيقونة + نص + لون

سهل الفهم للجميع

و) ألوان للتفاعل والزمن الحقيقي (Micro-interactions & Feedback)

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

تغير اللون عند حفظ البيانات يعطي تأكيدًا فوريًا للمستخدم

ز) بيانات/رسوم بيانية (Data Visualization)

اختيار ألوان متباينة ومقروءة مهم جدًا لتقليل الالتباس بين السلاسل (series). تجنب استخدام ألوان متقاربة لخطوط متعددة.

ألوان متباينة تجعل البيانات سهلة القراءة والتمييز

ح) الملاءمة عبر الأجهزة (Color Management)

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

للشاشات (RGB)

للطباعة (CMYK)

نفس الألوان قد تظهر مختلفة على الشاشات وعند الطباعة

أمثلة توضيحية على دور الألوان في UI/UX

أزرار الحالة (Button states)

افتراضي

عند المرور (hover)

عند الضغط (active)

زر افتراضي بلون أزرق فاتح، عند hover يصبح أزرق أغمق، وعند الضغط يظهر ظل داخلي — يعطي تأكيد بصري للتفاعل.

رسائل الخطأ/النجاح

تم بنجاح

تم حفظ التغييرات بنجاح

خطأ

حدث خطأ أثناء الحفظ

استخدام أحمر للخطأ مع أيقونة ×، أخضر للنجاح مع أيقونة ✓ — اللون مع الأيقونة يعزز الفهم السريع.

لوحة ألوان لداشبورد بيانات

المبيعات 75%
المستخدمين 45%
التحويلات 30%

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

خريطة تفاعلية

منخفض
متوسط
عالي
منخفض
متوسط
عالي
منخفض
متوسط
عالي

تدرج لوني (من أخضر إلى أحمر) لتمثيل شدة/مقدار — يسهل استيعاب التوزيع.

Onboarding highlight

انقر هنا للبدء

جعل العنصر المفروض يلاحظه المستخدم بلون مشبع وخلفية باهتة لباقي الصفحة لتوجيه الانتباه.

جرب بنفسك: تصميم واجهة بسيطة

الرأسية

لون الخلفية: #6366f1

الشريط الجانبي

لون الخلفية: #f8fafc

المحتوى

لون الخلفية: #ffffff

الأزرار

لون الخلفية: #8b5cf6

اختر لون الرأسية:

#6366f1

عنوان المحتوى

هذا مثال لمحتوى الصفحة. يمكنك تغيير ألوان العناصر المختلفة من الأدوات أعلاه.

اختبار نظرية الألوان

10 أسئلة اختيار من متعدد — للتأكد من الفهم

السؤال 1 من 10 النتيجة: 0/10

ما هو النموذج اللوني المستخدم في الشاشات؟

أ) CMYK
ب) RGB
ج) Pantone
د) RYB

عناوين رئيسية للبحث أكثر

لو عايز تتوسّع بعد كده، ابحث عن المواضيع دي:

Color Theory History & Models

RYB vs RGB vs CMYK vs LAB

Color Management & Color Profiles

sRGB, Adobe RGB, ICC profiles

WCAG Color Accessibility Guidelines

Contrast Ratios

Color Blindness Types and Simulations

Deuteranopia, Protanopia, Tritanopia

Psychology of Color across Cultures

الدلالات الثقافية للألوان

Color Harmonies & Algorithms

K-means for palette extraction

Practical Color Systems

Material Design palette, Tailwind colors

Color in Data Visualization

Perceptually uniform colormaps, ColorBrewer

Print Color Separation & Spot Colors

Pantone

Tools & Workflows for Designers

color pickers, plugins, Figma/Sketch color styles

التالي