احصل على لوحة ألوان من أي صورة، مع فاحص التباين

كيف يتم اختيار الألوان

تنشئ الأداة نسخة صغيرة من صورتك، بحد أقصى 160 بكسل على أطول جانب، ثم تحسب كل بكسل غير شفاف. بعد ذلك تجمّع البكسلات المتشابهة معًا باستخدام تجميع k-means وتعرض متوسط لون كل مجموعة، بدءًا بالمجموعة الأكبر. النسبة المئوية على كل عينة لونية تمثل حجم تغطية تلك المجموعة للصورة.

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

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

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

يُقرَن كل لون مع كل لون آخر، بالإضافة إلى الأبيض والأسود العاديين، وتعرض كل خلية نسبة التباين لنص بلون الصف على خلفية بلون العمود. تتبع النسبة تعريف WCAG: ‏(L1 + 0.05) / (L2 + 0.05)، حيث L1 وL2 هما السطوع النسبي للون الأفتح والأغمق. تتراوح من 1:1 (اللون نفسه مرتين) إلى 21:1 (أسود على أبيض).

التسميات هي الحدود التي يضعها WCAG:

• AA: ‏4.5:1 على الأقل للنص العادي و3:1 للنص الكبير (معيار النجاح 1.4.3).
• AAA: ‏7:1 على الأقل للنص العادي و4.5:1 للنص الكبير (معيار النجاح 1.4.6).
• النص الكبير يعني 18 نقطة على الأقل، أو 14 نقطة عريضة (تعريف WCAG للمقياس الكبير).

الخلية المحددة بـAA كبير مناسبة لعنوان كبير لكنها باهتة جدًا لتعليق صغير. كما يوضح شرح W3C للمعيار 1.4.3 أنه لا ينبغي تقريب النسبة، فالنسبة 4.499:1 لا تحقق 4.5:1. تحكم الأداة على الرقم الدقيق وتعرضه مقطوعًا عند منزلتين عشريتين، دون تقريب للأعلى أبدًا.

مثال محلول

لنفترض أن الصورة أعطتك كحليًا هو #1a3c6e وكريميًا هو #fdf6e3. يبلغ السطوع النسبي للكحلي حوالي 0.046 والكريمي حوالي 0.923. النسبة هي (0.923 + 0.05) / (0.046 + 0.05)، أي حوالي 10.1:1 بالأرقام المقربة و10.16:1 بالأرقام الدقيقة. وهذا يجتاز معيار AAA لكل النصوص، لذا فإن النص الكحلي على بطاقة ختامية كريمية آمن بأي حجم. ضع برتقاليًا متوسطًا مثل #e07a2e على الكريمي نفسه فتنخفض النسبة إلى 2.78:1، وهي لا تنجح حتى للنص الكبير. احفظ البرتقالي لزر بنص أسود عليه (6.99:1، وهو AA لكنه أقل بقليل من AAA)، أو لشكل بدون كلمات.

استخدام التصدير

تصدير CSS عبارة عن كتلة :root من الخصائص المخصصة، --color-1 للون الذي يغطي أكبر مساحة من الصورة وهكذا تنازليًا. ويحتوي JSON على قيمة hex وRGB وHSL لكل لون ونسبة تغطيته للصورة، وهو سهل اللصق في ملف رموز التصميم أو التمرير إلى سكربت. أعد تسمية المتغيرات بمجرد معرفتك أي لون هو الخلفية وأيها النص وأيها اللمسة المميزة.

ما لا تفعله هذه الأداة

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

إذا كنت تفضّل ألا تفعل هذا يدويًا

Hermoso هو التسويق على الطيار الآلي: فهو يبحث في الإعلانات التي تحقق نتائج بالفعل في سوقك، ويصنع إعلانات صور وفيديو متوافقة مع علامتك التجارية، ويجدول المنشورات ويدير حملات مدفوعة على حسابات إعلاناتك الخاصة. عندما تضيف علامتك التجارية من موقعك، يتعلم منتجاتك وشعارك ولوحة ألوانك، ويمكنك ضبط ألوان التعليقات والبطاقات الختامية برموز hex. يعمل في تطبيق الويب، أو داخل Claude وChatGPT وCursor عبر خادم MCP.

الأدوات المجانية: دليل أحجام وسائل التواصل · أداة إنشاء شبكة Instagram · منشئ Open Graph

الأسئلة الشائعة

كيف أحصل على لوحة ألوان من صورة؟

ضع الصورة في الأداة واختر عدد الألوان التي تريدها، من 5 إلى 8. تجمّع الأداة البكسلات المتشابهة وتعرض اللون المتوسط لكل مجموعة بصيغ HEX وRGB وHSL، بدءًا من الأكبر، مع زر نسخ لكل منها.

ما نسبة التباين التي أحتاجها للنص؟

يتطلب المستوى AA من WCAG 2.2 نسبة لا تقل عن 4.5:1 للنص العادي و3:1 للنص الكبير. ويتطلب المستوى AAA نسبة 7:1 و4.5:1. النص الكبير هو ما لا يقل عن 18 نقطة، أو 14 نقطة عريضة.

هل نسبة 4.49:1 قريبة بما يكفي لاجتياز AA؟

لا. يذكر W3C أنه لا ينبغي تقريب النسبة المحسوبة عند مقارنتها بعتبة، لذا فإن 4.499:1 لا تستوفي 4.5:1. تحكم الأداة على الرقم الدقيق.

لماذا أحصل على اللوحة نفسها في كل مرة؟

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

هل تُرفع صورتي؟

لا. تُقرأ الصورة بواسطة قارئ الملفات الخاص بمتصفحك وتُعالَج في عنصر canvas على جهازك. لا يُرسل شيء إلى أي مكان ولا يُخزَّن.