كيف أستفيد من نسبة كل لون في اللوحة لأختار اللون الأساسي واللون الثانوي لمتجري؟

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

نُشر في · دقائق قراءة: 2

مثال من صورة منتج

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

  • #F5F0E6 بنسبة ⁦55%⁩: الطاولة الكريمية، أي الخلفية.
  • #785032 بنسبة ⁦25%⁩: البني الأساسي للعلبة.
  • #3C281E بنسبة ⁦15%⁩: البني الداكن في الظلال والتفاصيل.
  • #009688 بنسبة ⁦5%⁩: الشعار الأخضر المزرق.

قراءة النسب قراءة تصميمية

النسبة الكبرى غالبًا للخلفية، وهي لا تصلح لونًا لهويتك لكنها تخبرك بالجو العام: الكريمي هنا يوحي بخلفية صفحات دافئة بدل الأبيض الناصع. اللون الثاني والثالث هما جسم المنتج: البني #785032 مرشح للعناوين والمساحات الكبيرة، والبني الداكن #3C281E مرشح للنصوص. أما #009688 بنسبة ⁦5%⁩ فقط، فهو اللون الحيوي الوحيد في الصورة، وهذا بالضبط ما تريده في زر «أضف إلى السلة»: لون قليل الحضور يلفت النظر حين يظهر.

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

افحص النص قبل أن تعتمد

انسخ الألوان إلى فاحص تباين الألوان. في هذا المثال، النص الأبيض على #009688 يعطي 3.67 إلى 1، وهي نسبة تنجح للنص الكبير فقط، فاجعل نص الزر كبيرًا وعريضًا، أو اختر درجة أغمق. أما البني الداكن #3C281E على الكريمي #F5F0E6 فيعطي 12.21 إلى 1، وهو ممتاز لنصوص الصفحة. والأبيض على البني #785032 يعطي 7.02 إلى 1.

لماذا تتغير النسب بعد استبعاد الخلفية؟

النسب تحسب من البكسلات التي بقيت بعد الاستبعاد، لا من الصورة كلها. لو كانت الطاولة شبه بيضاء، بقيمة rgb(250, 250, 250)، وفعّلت «تجاهل الأبيض القريب»، تُستبعد 550 بكسلًا من كل 1000، ويعاد توزيع النسب على الباقي: البني ⁦55.6%⁩، والداكن ⁦33.3%⁩، والأخضر المزرق ⁦11.1%⁩. الأرقام تغيرت لأن المقام تغير، لا لأن المنتج تغير.

وانتبه: الكريمي #F5F0E6 في المثال الأول لا يستبعده خيار الأبيض القريب، لأن الشرط أن تكون القنوات الثلاث 245 أو أكثر، وقناته الزرقاء 230. إن أردت استبعاده، فاقصص الصورة حول المنتج.

لماذا لا يكون المجموع 100 أحيانًا؟

كل نسبة تقرب إلى منزلة عشرية واحدة. ثلاثة ألوان متساوية المساحة تظهر كل منها بنسبة ⁦33.3%⁩، ومجموعها 99.9. هذا تقريب في العرض فقط، لا بكسلات مفقودة.

أسئلة شائعة

هل تقترح الأداة أيهما الأساسي وأيهما الثانوي؟

لا، الأداة لا تقترح ألوانًا ولا توزيعًا. هي تعطيك النسب، والقرار لك.

النسبة حسب ماذا بالضبط؟

حسب عدد بكسلات العينة المصغرة التي انتمت إلى مجموعة كل لون، بعد استبعاد ما اخترت تجاهله.

هل تحفظ النسب عند التنزيل؟

نعم في ملف JSON، وفي ملف CSS كتعليق بجانب كل متغير. ملف GPL لا يحملها.