استخراج لوحة ألوان من صورة

كيفية استخراج لوحة ألوان من صورة

1. أفلت صورة في منطقة الرفع، أو انقر عليها لاختيار ملف. تعمل صيغ JPG وPNG وWebP وGIF، وأي صيغة أخرى يستطيع متصفحك عرضها.
2. تحلّل الأداة الصورة فورًا وتعرض الألوان السائدة فيها، مرتّبة من الأكثر حضورًا إلى الأقل.
3. اضبط عدد الألوان (من 3 إلى 12) لتحصل على لوحة أوسع أو أضيق. وألغِ تحديد تجاهل البكسلات البيضاء والقريبة من الأبيض إذا كان الأبيض لونًا مهمًا في صورتك، كمنتج أبيض أو مشهد ثلجي.
4. انسخ لونًا واحدًا بزر نسخ أسفل عيّنته، أو اختر صيغة في التصدير بصيغة (قائمة HEX أو متغيرات CSS أو متغيرات SCSS أو مصفوفة JSON أو ألوان Tailwind) واضغط نسخ أو تنزيل للوحة كاملة. ويعيد زر استخراج الألوان إجراء التحليل.

يقرأ متصفحك صورتك محليًا، ولا تُرفع أبدًا إلى أي خادم.

كيف تُحدَّد الألوان السائدة؟

تُرسم الصورة أولًا على عنصر canvas غير مرئي، مع تصغيرها بحيث لا يتجاوز ضلعها الأطول 512 بكسلًا. وهذا يُبقي التحليل سريعًا دون أن يغيّر الألوان العامة. ثم تُجمَّع البكسلات بخوارزمية تكميم (القطع الوسيطي المعدّل، من مكتبة Color Thief مفتوحة المصدر) تعمل في فضاء الألوان OKLCH، فتنتهي الألوان المتشابهة في نظر العين في المجموعة نفسها.

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

تعرض كل عيّنة رمز HEX الخاص بها بالأسود أو بالأبيض، أيهما أوضح، فتبقى التسمية مقروءة على الألوان الفاتحة والداكنة على حد سواء.

أفكار لاستخدام لوحة ألوان الصورة

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

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