هشرحلك كل حاجة عن نظرية الألوان خطوة بخطوة — من العجلة الأساسية لحد استخدام اللون في واجهات المستخدم (UI/UX)، ومعاها أمثلة توضيحية (مش مشاريع) مرتبة من السهل للصعب، وفي الآخر هديك 10 أسئلة اختيار من متعدد للتثبيت وكمان عناوين للبحث لو حابب تتعمق أكثر.
عجلة الألوان (Color Wheel): دائرة بتنظم الألوان حسب العلاقة بينها — بتخليك تشوف بسرعة ألوان متناسقة أو متعاكسة.
في نموذج الألوان الضوئي (RGB): أحمر (R)، أخضر (G)، أزرق (B).
في نموذج الألوان الطبعى/صبغي (RYB التقليدي للرسم): أحمر، أصفر، أزرق.
بتتكوَّن من مزج لونين أساسيين. مثال: أحمر + أصفر = برتقالي.
مزيج لون أساسي + لون ثانوي، زي أحمر-برتقالي.
ملاحظات بسيطة: في شغل الويب والتصميم الرقمي بنستخدم RGB أو HSL، وفي الطباعة بنستخدم CMYK.
انتقال سلس بين لونين أو أكثر. ليه مهم؟ بيدي عمق وحركة بصريّة.
مدى رؤية لون خلفه؛ قيمة من 0 (شفاف تماماً) إلى 1 (غير شفاف). تُستخدم لتخفيف تأثير عنصر أو لعمل طبقات.
استخدام اللون لجذب الانتباه (مثلاً زر CTA بلون قوي مقابل خلفية باهتة).
مدى "نقاء" اللون. لون مشبع عالي = قوي وواضح. منخفض = هادئ أو باهت (muted).
(Red, Green, Blue): خاص بالشاشات. اللون بنتحصل عليه بخلط ضوء.
R=255,G=0,B=0 => أحمر ساطع
(Cyan, Magenta, Yellow, Key/Black): خاص بالطباعة. الألوان بتُطبع عن طريق امتصاص/عكس الضوء.
يستخدم في الطابعات والنشر المطبوع
طريقة وصف اللون من حيث:
مفيدة علشان تعدل ألوان بشكل بديهي.
هل المشروع رسمي؟ مرح؟ شبابي؟
ثقافة الجمهور تؤثر — ألوان لها دلالات ثقافية.
لسهولة القراءة (خصوصًا للأشخاص ضعاف البصر). اتأكد من نسب التباين (مثلاً WCAG).
الألوان الرئيسية والفرعية وثباتها عبر المطبوعات والشاشة.
شاشة (RGB) ولا طباعة (CMYK)؟ لازم تبيّن الألوان صح.
لون الخطأ، النجاح، تحذيرات، أزرار CTA — كل ده لازم واضح ومتناسق.
أنواعها الرئيسية
لون ومعاكسه على العجلة → تباين قوي.
ألوان قريبة على العجلة → نغمة متناغمة وهادئة.
3 ألوان متفرقة بالتساوي → توازن حيوي.
مجموعتين مكملتين → غني بالألوان لكن صعب التوازن.
لون + لونيْن مجاورين لمكمّله → تباين أقل حدة من الـ Complementary.
درجات مختلفة من نفس الصبغة → بسيط ومتناسق.
انقر على أي لون لنسخه
Color Psychology
طاقة/خطر/حب (ممكن يُستخدم للـ CTA أو تحذير).
ثقة/احترافية (شائع في البنوك والتقنية).
طبيعى/صحة/نجاح.
فرح/انتباه (يفضل استخدامه باعتدال).
إبداع/رفاهية/غموض.
حماس/إبداع/دفء.
المعاني تختلف بحسب الثقافة والسياق — ما ينفعش نعتمد عليها لوحدها.
أساسيات مهمة جداً
مثال هدف WCAG: نص عادي نسبة لا تقل عن 4.5:1 (أحيانًا 3:1 للخطوط الكبيرة).
لازم تختبر الألوان للنصوص والأزرار.
اختبار الاختلافات ليس فقط باللون بل بالشكل/النص/الأيقونة.
أنواع عمى الألوان:
استخدم أيقونات، نصوص، نماذج مختلفة لتوضيح حالات (خطأ/نجاح...).
نجاح: أيقونة ✓ + نص "تم الحفظ"
خطأ: أيقونة ✕ + نص "حدث خطأ"
اختبار A/B
تغيير لون زر CTA ممكن يرفع نسبة النقر (CTR).
لكن التأثير يعتمد على التباين، السياق، ومرحلة المستخدم.
دايمًا اختبر ولا تفترض: A/B testing هو الحل.
معدل التحويل: 2.5%
معدل التحويل: 3.8%
مرتبة من السهل للصعب
لو عندك أحمر + أصفر → بتحصل على برتقالي. لو خففت تشبع الأحمر هتلاقي برتقالي أفتح (tint).
عايز لوح لون هادي لموقع مدونة صحية؟ اختار لوحة Analogous بلون أخضر كأساس + أخضر أفتح + أصفر باهت.
خلفية صفحة رصاصية فاتحة، زِر CTA أحمر مشبع لأن الأحمر بيجذب العين. لازم تتأكد من نسبة تباين النص داخل الزر (أبيض على أحمر مثلاً).
نص واضح فوق الخلفية بفضل الطبقة الشفافة
خلفية فيها صورة، عايز تضع شريط نص فوقها سابقًا: استعمل طبقة سوداء شفافة (opacity 0.5) وتدرج من شفاف إلى 0.6 علشان يقرو النص بدون فقدان التفاصيل.
RGB: #0057B8
للشاشات
CMYK: 100,70,0,0
للطباعة
عندك شعار بلون RGB مش ممكن الطباعة تطابقه تمامًا. لازم تحول اللون لـ CMYK وتعدله (أو تختار بدائل مطابقة للنُسخ المطبوعة) وتتأكد إن الألوان المطبوعه لا تزول أو تتغير تحت ضوء مختلف.
شرح بالتفصيل الممل
اللون بيساعد يحدد مين الأهم في الصفحة: زِر بلون مشبع + خلفية باهتة => يبرُز. الهيراركية بتخلي المستخدم يعرف يمشي في الواجهة بدون تفكير.
اختيار لوحة ألوان يبلور انطباع المستخدم: موقع بنكي يحتاج أزرق موثوق، تطبيق أطفال ممكن يستخدم ألوان مشبعة ومبهجة.
ألوان تعطي إحساس بالثقة والاحترافية
ألوان مشبعة ومبهجة تجذب الانتباه
الألوان بتعطي دلالات للعناصر التفاعلية: الأزرار، الروابط، الحقول. لون مختلف للـ hover وactive يعزز الفهم.
لون مختلف عند التفاعل (hover) يؤكد أن العنصر تفاعلي
خلي ألوان العلامة ثابتة في كل الشاشات: ألوان رئيسية، ثانوية، ألوان الحالات (error/success/warning). الاتساق يقلل الحمل المعرفي للمستخدم.
أساسي
ثانوي
نجاح
خطأ
اختيار ألوان حسب نسب تباين صحيحة، واختبار حالات عمى الألوان، وإضافة مؤشرات غير لونية (أيقونات/نصوص).
أيقونة + نص + لون
سهل الفهم للجميع
مثال: لون يتحول إلى أخضر عند نجاح حفظ، أحمر لخطأ. التغيير اللوني هذا يعطي رد فعل لحظي للمستخدم ويؤكد حدوث شيء.
تغير اللون عند حفظ البيانات يعطي تأكيدًا فوريًا للمستخدم
اختيار ألوان متباينة ومقروءة مهم جدًا لتقليل الالتباس بين السلاسل (series). تجنب استخدام ألوان متقاربة لخطوط متعددة.
ألوان متباينة تجعل البيانات سهلة القراءة والتمييز
الألوان على الشاشة ممكن تظهر مختلفة باختلاف جهاز المستخدم. للمصممين: افحص على شاشات مختلفة، واعرف حدود CMYK للطباعة.
نفس الألوان قد تظهر مختلفة على الشاشات وعند الطباعة
افتراضي
عند المرور (hover)
عند الضغط (active)
زر افتراضي بلون أزرق فاتح، عند hover يصبح أزرق أغمق، وعند الضغط يظهر ظل داخلي — يعطي تأكيد بصري للتفاعل.
تم حفظ التغييرات بنجاح
حدث خطأ أثناء الحفظ
استخدام أحمر للخطأ مع أيقونة ×، أخضر للنجاح مع أيقونة ✓ — اللون مع الأيقونة يعزز الفهم السريع.
اختيار تدرجات متباينة للأرقام والإشعارات، وإعطاء ألوان منفصلة للسلاسل الأكثر أهمية.
تدرج لوني (من أخضر إلى أحمر) لتمثيل شدة/مقدار — يسهل استيعاب التوزيع.
جعل العنصر المفروض يلاحظه المستخدم بلون مشبع وخلفية باهتة لباقي الصفحة لتوجيه الانتباه.
لون الخلفية: #6366f1
لون الخلفية: #f8fafc
لون الخلفية: #ffffff
لون الخلفية: #8b5cf6
هذا مثال لمحتوى الصفحة. يمكنك تغيير ألوان العناصر المختلفة من الأدوات أعلاه.
10 أسئلة اختيار من متعدد — للتأكد من الفهم
لو عايز تتوسّع بعد كده، ابحث عن المواضيع دي:
RYB vs RGB vs CMYK vs LAB
sRGB, Adobe RGB, ICC profiles
Contrast Ratios
Deuteranopia, Protanopia, Tritanopia
الدلالات الثقافية للألوان
K-means for palette extraction
Material Design palette, Tailwind colors
Perceptually uniform colormaps, ColorBrewer
Pantone
color pickers, plugins, Figma/Sketch color styles