من الصعب جدًا اختيار ألوان جيدة للرسوم البيانية. سنحاول التعامل مع هذه المشكلة.

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

لن تساعدك هذه المقالة في العثور على تدرجات أو ظلال جيدة. تم تصميمه لتوفير ألوان جميلة وواضحة لمختلف فئات المعلومات (مثل القارات والصناعات وأنواع الطيور) في المخططات الخطية والمخططات الدائرية والمخططات الشريطية وما إلى ذلك.

FiveThirtyEight, , Pudding, New York Times, The Economist Akkurat

,
,
«»

سأتحدث كثيرًا عن التشبع والسطوع ودرجة اللون. هذه هي مساحات ألوان HSB (تدرج اللون ، والتشبع ، والخفة) أو HSV (تدرج اللون ، والتشبع ، والقيمة):

و نطاقات هوى من 0 درجة إلى 360 درجة، وهذا هو الخاص بك عجلة الألوان التقليدية: ⬤ ⬤ ⬤
يتراوح التشبع من 0٪ (رمادي) إلى 100٪ ( طعام خارق ملون !!): ⬤ ⬤ ⬤
و التغيرات سطوع / قيمة من 0٪ (أسود) إلى 100٪ (اللون الفعلي): ⬤ ⬤ ⬤

لتحويل الألوان من HEX (على سبيل المثال # cc0000) أو RGB (على سبيل المثال rgb(207, 176, 58)) إلى HSB / HSV ، استخدم أداة مثل colorizer.org .

نسبي HSB / HSV هو مساحة ألوان HCL . هناك نفس المعلمات (تدرج اللون ، والصفاء = التشبع ، والسطوع) ، ولكنها أقرب إلى "كيف نرى الألوان حقًا". تستخدم خدمة Datawrapper الخاصة بنا مساحة ألوان HCL في منتقي الألوان:

نظرًا لعدم وجود HCL في Adobe Photoshop أو colorizer.org ، فإن كل ذكر للدرجات (على سبيل المثال 0 درجة) أو النسبة المئوية هنا يشير إلى مساحة ألوان HSB / HSV.

حسنًا ، لنبدأ.

وسّع نطاق فهمك للألوان

قد تفكر ، "بالنسبة للرسم البياني ، أحتاج خمسة ألوان. لذلك أستخدم الأخضر والأصفر والأزرق والأحمر. و ... هم ... ربما برتقالي؟ أو الأرجواني! "

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

ألق نظرة على هذا المخطط وقارنه بالألوان الرئيسية ⬤ ⬤ ⬤ ⬤ ⬤ ⬤ :

قطط أم كلاب؟ المؤلف: نادية بريمر

الألوان على الرسم البياني مختلفة تمامًا. استخدامات نادية حمراء ⬤ ، والذي يختلف من الأحمر العادية ⬤ . الأخضر ⬤ - هذا ... هل يمكنك تسميته أخضر ⬤ ؟

لذا قبل أن نقدم القواعد ، دعني أخافك قليلاً: حرفياً يمكن استخدام آلاف الألوان. هناك أحمر مصفر ⬤ ، أحمر مزرق ⬤ وبين في كل شيء. هناك اللون الرمادي ⬤ ، ولكن هناك أيضًا رمادي بارد ⬤ ورمادي دافئ ⬤ . ثم هناك اللون الأزرق. الكثير من الأزرق! مثل هذا ⬤ ، هذا ⬤ ، هذا ⬤ ، هذا ⬤ وهذا ⬤ . ولم نتحدث عن البرتقالي والأصفر بعد.

لديك الكثيرخيارات. هذا يعني أنه يمكنك البقاء في مساحة صغيرة من عجلة الألوان ولا يزال هناك العديد من الخيارات المتبقية.

لا ترقص حول عجلة الألوان

لست بحاجة لأخذ ألوان من عجلة الألوان بأكملها مثل ⬤ ⬤ ⬤ ⬤ ⬤ ⬤ . سيبدو الرسم التخطيطي أكثر احترافية - وبالتالي أكثر موثوقية - عندما يستخدم فقط عددًا قليلاً من الألوان والنغمات المجاورة.

في هذه المرحلة ، من المنطقي النظر إلى عجلة الألوان. Adobe Color أو Color Calculator مناسب لهذا الغرض .

حاسبة الألوان للمطابقة المتناغمة توفر

العديد من هذه الأدوات مجموعات ألوان متناغمة. واحد منهم يسمى "مربع" أو "دفتر". لا تستخدمه . سينتج الكثير من النغمات ، والتي يجب تجنبها.

في الفيديو ، أستخدم أداة الألوان Paletton ، بدءًا من مجموعة أجهزة الكمبيوتر المحمولة ثم تقليل المسافة. لاحظ كم هي أجمل تركيبات الألوان.

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

لنفعل ذلك - هذه المرة مع Adobe Color:

ألواننا الإضافية في Adobe Color

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

هذا هو المكان الذي يحتاج فيه التشبع والسطوع إلى التغيير.

استخدم التشبع والسطوع لجعل النغمات تعمل

لا يقل التشبع والسطوع أهمية عن تدرج اللون. في الواقع ، يمكنك إنشاء ألوان جديدة ببساطة عن طريق تغيير التشبع والسطوع. إليك زوجان من الألوان بنفس الدرجة ، فقط بتشبع مختلف وسطوع: ⬤ ⬤ / ⬤ ⬤ (إذا غيرت درجة اللون قليلاً ، فستكون النتائج أفضل: ⬤ ⬤ / ⬤ ⬤ ).

دعنا نعود إلى تركيبة الألوان لدينا: ⬤ ⬤ ⬤ ⬤ . بعد اللعب بالتشبع والسطوع ، يبدو الأمر على النحو التالي :

ألوان تكميلية أكثر ملاءمة في Adobe Color

I لون سماوي فاتح غير مشبع ⬤ وبرتقالي فاتح ⬤وجعل كل الألوان أغمق ما عدا البرتقالي الفاتح. اللعنة ، يمكنك العمل مع هذا بالفعل!

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

هذا ما فعلته بكل لوحات الألوان هذه: ⬤ ⬤ ⬤ ⬤ و ⬤ ⬤ ⬤ ⬤ ⬤ و ⬤ ⬤ ⬤ ⬤ . كلهم يكملون بعضهم البعض تقريبًا ولديهم جميعًا تشبع وخفة مختلفة.

استخدم الألوان الدافئة والأزرق

مصممو الرسوم البيانية مغرمون بشكل خاص بمجموعة أخرى: الأصفر / البرتقالي / الأحمر والأزرق . تحقق من محفظة South China Morning Post أو هذه من The Economist (PDF) ، على سبيل المثال : يستخدمون هذه الألوان في كثير من الأحيان أكثر من استخدامهم الأرجواني أو الأخضر.

ثلاث صفحات من South China Morning Post

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

وهي متوفرة: يمكن للأشخاص المكفوفين بالألوان التمييز بسهولة بين الأزرق والبرتقالي / الأحمر.

لذلك ، عند الشك ، استخدم البرتقالي / الأحمر مع الأزرق.

عند استخدام اللون الأخضر ، اجعله أصفر أو أزرق

الأخضر النابض بالحياة هو السدس على عجلة الألوان ، من حوالي 90 درجة مئوية إلى 150 درجة مئوية ، وذروة عند 120 درجة مئوية . ومع ذلك ، لن تجد مخطط معلومات جيد بهذه الألوان. لماذا ا؟

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

ترامب عن إرث أوباما" ، الواشنطن بوست

إنها 142 درجة خضراء ، لكن 14٪ فقط مشبعة. نفس اللون مع نفس السطوع عند 100٪ تشبع: ⬤ . إليك الطريقة.

وتذكر الأشخاص المصابين بعمى الألوان: من الصعب عليهم التمييز بين اللون الأخضر النقي مع الأحمر أو البرتقالي أو البني.

لذلك عند استخدام اللون الأخضر ، اجعله أصفر قليلاً أو أزرق قليلاً. يمكنك أن ترى هذا في الأمثلة الموجودة في بداية المقال: كل الألوان الخضراء باستثناء ⬤ لها نغمة أكبر من 160 درجة (أي أنها أكثر زرقة) ⬤ ⬤ ⬤ أو أقل من 60 درجة (أي أصفر أكثر) ⬤ ⬤ . في هذا المشروع ، الذي رأيناه بالفعل ، تستخدم ناديا كلاً من الأصفر والأخضر والأزرق والأخضر:

قطط أم كلاب؟ المؤلف: ناديا بريمر

يبدو أنه يمكنك استخدامها في الرسوم البيانية كلونين مختلفين: فوز للجميع!

تجنب الألوان النقية

توجد النغمات "النقية" في عجلة الألوان بدقة 60 درجة ، أو 120 درجة ، أو 180 درجة ، أو 240 درجة ، أو 300 درجة ، أو 360 درجة / 0 درجة:

إليك مثال: في HSV / HSB ، قيمة تدرج اللون الأزرق الساطع ⬤ هي 180 درجة ، والقيمة التشبع 67٪ ، وقيمة السطوع 91٪. يمكنك أيضًا رؤية قيم RGB للون الخاص بك: في حالة تطابق قيمتين على الأقل ، يكون اللون "نقيًا". على سبيل المثال ، لدينا ⬤ هو rgb(77, 232, 232).

لجعل الألوان أكثر طبيعية وإرضاء للعين ، يمكنك إما تغيير تشبع الألوان النقية أو جعلها أغمق. إذا كنت تريد ألوانًا مشبعة ومشرقة ، فاختر الألوان الممزوجة التي لا تقل عن 5-10 درجات من الألوان النظيفة.

في الصورة أعلاه ، الأحمر والبرتقالي والأزرق والأخضر لها نفس التشبع والخفة. والفرق الوحيد هو لهجة: الأحمر ⬤ (0 درجة) والأزرق ⬤ (240 درجة) والأخضر ⬤ (120 درجة) تظهر المزيد من العصير من البرتقال ⬤ (40 درجة) ومتوسطة الأزرق ⬤ (211 درجة) والأخضر المزرق ⬤ (170 °).

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

من المؤكد أن الألوان النابضة بالحياة تجذب انتباه القراء. لكن هؤلاء القراء لن يشكركم. يتوتر معظم الناس قليلاً عندما يرون ألوانًا مثل هذه: "الألوان المشبعة للغاية والنابضة بالحياة لن تكون مناسبة لـ [التواصل] الجاد أو الواثق أو الهادئ" ، أوضح بارترام وباترا وستون في مقالتهم لعام 2017 اللون العاطفي في الرسوم البيانية ( PDF ) ...

إذا اقتربت الألوان من 100٪ تشبع و 100٪ سطوع ، فمن المرجح أن تكون ساطعة للغاية. ينطبق هذا بالتأكيد على الألوان الصلبة مثل ⬤ ⬤ ⬤ ⬤ .

"لكنني رأيت من قبل مثل هذا اللون المجنون ، وهم يبدون جيدًا" - أنت تقول وستطلق على مشاريع مثل هذه:

مقال في نيويورك تايمز حول قوائم التشغيل

مقالبلومبرج إفلاس بودنغ

مقال المشاهير

بمقارنة الألوان في هذه الأمثلة بـ ⬤ ⬤ ⬤ ⬤ ، فهي أقل تشبعًا أو أغمق. 100٪ المشبعة، و 100٪ الأخضر حية ⬤ يصبح أقل المشبعة في صحيفة نيويورك تايمز ⬤ وأيضا أقل المشبعة وأكثر قتامة BLO في المادة بلومبرغ وفي المادة الحلوى ⬤ .

فهي تحتفظ بالمتعة والتأثير اللافت للانتباه للألوان الزاهية ، ولكنها أيضًا أسهل على العينين.

كل ذلك يعمل لأن Pudding و The New York Times و Bloomberg لديهم مصممين رائعين.في حالة الشك ، تجنب 100٪ تشبع مع 100٪ سطوع .

ادمج الألوان مع سطوع مختلف

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

على سبيل المثال ، تبدو ⬤ ⬤ ⬤ في الرسم التخطيطي الموجود في أقصى اليسار ⬤ ⬤ ⬤ بتدرج الرمادي.

لتجنب مثل هذا التدرج غير السار ، هناك خياران:

« »: , , , : ⬤⬤⬤. : ⬤⬤⬤
, ,

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

في الواقع ، الطريقة الصحيحة لتعيين الألوان للفئات هي اختيار الألوان من التدرجات اللونية مثل هذا:

أنظمة ألوان Viridis تنتقل

كل هذه التدرجات اللونية من الفاتح إلى الداكن ، وبالتالي فإن الألوان لها سطوع مختلف: ⬤ ⬤ ⬤ ⬤ ⬤ أو ⬤ ⬤ ⬤ ⬤ ⬤ . إذا كنت تحب هذا الأسلوب ، فجرب مولد لوحة الألوان هذا .

اجعل الألوان "ملونة" بالتساوي

في الرسوم البيانية الخاصة بك ، غالبًا ما تريد إبراز الألوان. هناك طرق مختلفة لتحقيق ذلك. تتميز الألوان بالخصائص التالية:

لأنهم أغمق بكثير ⬤ ⬤
لأنهم أخف بكثير ⬤ ⬤
لأنهم أكثر كثافة ⬤ ⬤
لأنهم أنظف ⬤ ⬤

لكن عادةً ما تريد فقط تمييز لون أو لونين. يجب أن تكون معظم البقية مرئية بشكل متساوٍ إلى حد ما .

إذا كنت تستخدم ألوانًا ذات سطوع مختلف (مختلف في ظلال الرمادي) ، فأنت بحاجة إلى موازنة هذه الألوان. حاول إزالة تشبع الألوان الزاهية. أضف المزيد من التشبع إلى الظلام .

أو اختر تدرجًا أقل نقاءً: في الصورة أعلاه ، الأخضر ⬤ والأزرق نقيان جدًا ، لذلك قمت بتغميقهما ( هكذا ينظران إلى السطوع بنسبة 100٪: ⬤ ⬤ ).

ثم أردت إضافة اللون الأحمر ... لكن اللون الأحمر الساطع شديد الكثافة كظل نقي (من 0 درجة) ⬤ ⬤ ⬤ . لذلك كان لدي خياران:

فقط قم بتغميقها : ⬤ ⬤ ⬤ .
حرك الصبغة 30 درجة لجعلها برتقالية أكثر ⬤ ⬤ ⬤ .

اخترت الثانية لجعلها أكثر ودية. لكن كلا الخيارين يعملان.

تجنب التباين المنخفض جدًا مع الخلفية

يستخدم عدد كبير من الرسوم البيانية بشكل مدهش ألوان الباستيل على خلفية ساطعة. غالبًا ما تكون غير مشبعة جدًا وخفيفة الوزن.

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

إليك ما يجب فعله عندما تكون الألوان غير مشبعة جدًا وخفيفة جدًا ⬤ ⬤ ⬤ :

زيادة التشبع: ⬤ ⬤ ⬤
اجعلها أكثر قتامة: ⬤ ⬤ ⬤
أو قم بالأمرين معًا للحصول على أفضل النتائج: ⬤ ⬤ ⬤

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

تجنب الكثير من التباين مع الخلفية

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

اختر خلفية غير مشبعة بدرجة كافية

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

إذا كنت تريد خلفية فاتحة ، ابتعد عن الألوان التي يقل سطوعها عن 95٪ وأكثر من 7٪ تشبع.
إذا كنت تريد خلفية داكنة ، حافظ على التشبع أقل من 20٪. أيضًا ، لا تستخدم اللون الأسود تمامًا - حافظ على السطوع بين 10٪ و 25٪.

فقط انسخ الألوان أو حاول فهمها

من الصعب أن تشعر وتختار ألوانًا جيدة بنفسك. لذلك من الجيد تمامًا نسخ مجموعات جميلة. بجدية ، لا يوجد شيء مخجل في السرقة. لقد كتبت مقالًا كاملاً عن مصدر إلهام الألوان: الأفلام والفنانين ولوحات ألوان الآخرين وما إلى ذلك (والرسوم البيانية الأخرى مصدر رائع).

إذا كنت تريد أن تفهم بشكل حدسي الألوان التي تعمل بشكل جيد مع بعضها البعض ، فجرب هذا: قم بتحليلها. وإليك بعض الطرق للقيام بذلك:

Photo tree niko photos on Unsplash

, , , . , , Photoshop image-color.com. .
Adobe Capture, , « »: (, !)
: . ? ? , ?
. . ?

أيضًا ، في المرة التالية التي تنشئ فيها رسمًا بيانيًا ولم تكن راضيًا عن الألوان ، قم بتحليلها في مساحة ألوان HSV / HSB ، على سبيل المثال باستخدام colorizer.org :

ما مدى تشبع الألوان - إلى أي مدى تصبح أفضل أم أسوأ من خلال زيادة التشبع أو تقليله ببضع نقاط مئوية (أو كثيرة)؟
ما معنى النغمة ؟ ماذا يحدث إذا قمت بتغيير النغمة بضع درجات فقط؟
هل الألوان مختلفة في السطوع ؟

بمرور الوقت ، ستنتقل من مستوى "هذا رائع ، لكني لا أعرف السبب" إلى مستوى "هذا رائع لسبب ما". وستجد نفسك قادرًا على كسر المزيد والمزيد من هذه القواعد - ولا تزال تنشئ تركيبات ألوان رائعة.

كيفية اختيار الألوان الجميلة لمخطط المعلومات الخاصة بك