استخراج لوحة ألوان من صورة
تبني هوية لمتجرك وتريد ألوانًا تنسجم مع منتجاتك، أو تريد صفحة منتج بألوان مأخوذة من المنتج نفسه. بدل أن تجرب الألوان واحدًا واحدًا، استخرجها من الصورة مباشرة.
ما الذي تحصل عليه؟
تحصل على الألوان الأكثر حضورًا في الصورة، من 2 إلى 12 لونًا، مرتبة حسب نسبة المساحة التي يشغلها كل لون. والإعدادات نفسها تعطي النتيجة نفسها في كل مرة، فلا مفاجآت.
صورة نصفها أحمر صافٍ ونصفها أزرق صافٍ، مع اختيار لونين.
النتيجة: #FF0000 بنسبة 50% و#0000FF بنسبة 50%.
مشكلة الخلفية البيضاء
صورة المنتج على خلفية بيضاء ستعطيك الأبيض كأكبر لون، وهذا لا يفيدك. فعّل خيار «تجاهل الأبيض تقريبًا» فتظهر ألوان المنتج نفسه. الأبيض تقريبًا هنا يعني أن القنوات الثلاث 245 أو أكثر. ويوجد خيار مماثل للأسود، وآخر لتجاهل البكسلات الشفافة في الشعارات.
الطريقة
- افتح استخراج لوحة الألوان واختر الصورة.
- حدد عدد الألوان وحجم العينة المحللة.
- فعّل تجاهل الشفاف أو الأبيض أو الأسود إن سيطرت الخلفية على النتيجة.
- انسخ أي لون، أو نزّل اللوحة كاملة بصيغة JSON أو متغيرات CSS أو شريط PNG أو ملف GPL.
النتيجة تقريب، وهذا طبيعي
الخوارزمية تجمع الألوان المتقاربة في مجموعات وتعرض متوسط كل مجموعة. لذلك قد لا يوجد لون اللوحة حرفيًا في أي بكسل، وقد تندمج مساحة لونية صغيرة مع جارتها. إن أردت لون نقطة محددة بدقة فاستخدم منتقي الألوان من الصور.
تفاصيل تهمك
- تُصغّر الصورة إلى حجم العينة الذي تختاره، 100 أو 200 أو 400 بكسل للضلع الأطول، قبل التحليل.
- النسب تُقرب إلى خانة عشرية واحدة، فقد لا يكون مجموعها 100 بالضبط.
- الأداة لا تقترح ألوانًا متناسقة ولا تفحص التباين. لفحص قراءة النص فوق الألوان استخدم فاحص تباين الألوان.
- الحد المختبر: 40 ميغابايت و50 ميغابكسل للصورة.
أسئلة شائعة
هل يمكنني استخدام الألوان مباشرة في موقعي؟
نعم، نزّلها كمتغيرات CSS والصقها في ملف التنسيق، أو انسخ قيمة HEX لكل لون.
لماذا لا يظهر لون صغير في الصورة؟
لأن المساحات الصغيرة قد تندمج مع لون مجاور. زد عدد الألوان أو حجم العينة وستظهر تفاصيل أكثر.
هل تُرفع الصورة؟
لا، التحليل يتم داخل متصفحك.