لوحة ألوان من صورة

طريقة الاستخدام

1. انقر اختر صورة أو أسقط صورة في المربع. تُقرأ الصورة على جهازك.
2. اختر عدد الألوان، من 5 إلى 10. الصورة المزدحمة تحتاج إلى ألوان أكثر.
3. اقرأ كل لون: كوده السداسي وقيم RGB وHSL وحصته من الصورة. انقر زر النسخ بجانب اللون لتنسخ كوده السداسي.
4. تحت تصدير اللوحة، استعمل انسخ كمتغيرات CSS أو انسخ كقائمة أو تنزيل العينات (PNG).

كيف تُعثر على الألوان

يُحوَّل كل بكسل إلى فضاء CIE L*a*b*، وهو فضاء تقارب فيه المسافة بين لونين مدى اختلافهما للعين. ثم تُجمَّع البكسلات في عدد الألوان الذي تختاره بالتجميع بالمتوسطات (k-means)، فيُوضع مركز كل مجموعة بحيث تكون البكسلات أقرب ما يمكن إلى مركزها.

تُختار مراكز البداية بطريقة k-means++ ببذرة ثابتة، فالصورة نفسها تعطي اللوحة نفسها دائماً. وكل لون هو متوسط البكسلات في مجموعته، وحصته هي عدد بكسلات المجموعة مقسوماً على جميع البكسلات.

بكسل ← (L*، a*، b*)
المجموعات: كل بكسل ينضم إلى أقرب مركز، والمراكز متوسطات بكسلاتها
اللون = متوسط RGB للمجموعة؛ الحصة = بكسلات المجموعة ÷ جميع البكسلات

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

الأكواد والحصص ومعناها

الكود السداسي هو اللون مكتوباً بثلاثة أزواج من الأرقام السداسية عشرية للأحمر والأخضر والأزرق، وقيم RGB هي الأرقام نفسها في النظام العشري. ويعطي HSL الدرجة (Hue) زاويةً على دائرة الألوان (0 أحمر، و120 أخضر، و240 أزرق)، والتشبع (Saturation) قوةَ اللون، والإضاءة (Lightness) مدى فتحه.

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

• انسخ متغيرات CSS لاستعمال الألوان في صفحة ويب أو تصميم: يصبح كل لون --color-1 و--color-2 وهكذا.
• شريط PNG للوحة الإلهام أو للطباعة: عينة لكل لون، وكودها السداسي تحتها.

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