لوحة ألوان من صورة
استخرج الألوان السائدة في صورة بتجميع k-means، وشاهد النسبة المئوية التي يغطيها كل لون، وانسخ أكواد HEX أو متغيرات CSS أو JSON.
يعمل بالكامل في متصفحك. لا يتم رفع بياناتك أبدًا.
ما هو لوحة ألوان الصورة؟
تجد هذه الأداة الألوان الرئيسية في صورة وتعرضها كلوحة مرتبة بحسب مقدار ما يغطيه كل لون من الصورة. اختر بين 2 و12 لونًا وانسخها كأكواد HEX أو خصائص CSS مخصصة أو JSON بقيم RGB ونسب مئوية.
كيفية استخدام لوحة ألوان الصورة
- أسقط صورة أو اخترها أو الصقها.
- حدّد عدد الألوان.
- اقرأ شريط اللوحة والقائمة التي فيها HEX وRGB والنسبة المئوية لكل لون.
- انسخ كود HEX واحدًا، أو استخدم نسخ كمتغيرات CSS أو نسخ بصيغة JSON أو نسخ قائمة HEX.
مثال
40×20 image split into red, green, blue and white quadrants, 4 colors
#FF0000 25%, #00FF00 25%, #0000FF 25%, #FFFFFF 25%
متى تستخدم لوحة ألوان الصورة
استخدمها لبناء نظام ألوان من صورة أو عمل فني، أو مطابقة سمة موقع مع صورة رئيسية، أو تحليل صور علامة تجارية. قد تختلف متوسطات العناقيد قليلًا عن أي بكسل منفرد؛ ولقراءة لون بكسل واحد بدقة استخدم منتقي ألوان الصور.
كيف يعمل لوحة ألوان الصورة
تُصغَّر الصورة إلى 256 بكسل كحد أقصى على أطول أضلاعها وتُتجاهل البكسلات الشفافة تمامًا. وتُجمَّع البكسلات المتبقية بتجميع k-means في فضاء RGB: تُختار المراكز الأولية بشكل حتمي (البكسل الأقرب إلى متوسط اللون، ثم مرارًا البكسل الأبعد عن كل المراكز المختارة)، وتعيد حتى 12 تكرارًا إسناد البكسلات وتنقل كل مركز إلى متوسط عنقوده. كل لون في اللوحة هو متوسط عنقود؛ ونسبته هي حصة البكسلات في ذلك العنقود.
حالات الاستخدام الشائعة
- إنشاء سمة ألوان لموقع من صورة الترويسة.
- استخراج ألوان العلامة التجارية من شعار أو صورة منتج.
- توليد متغيرات CSS للوحة إلهام لنظام تصميم.
- مقارنة توازن الألوان بين صور مختلفة.
ملاحظة أمنية
تُفك الصور وتُعالَج وتُرمَّز محليًا في متصفحك بواجهة Canvas. لا يُرفع شيء إلى خادم.
الأسئلة الشائعة
لماذا تختلف الألوان قليلًا عن الصورة؟
كل لون في اللوحة هو متوسط مجموعة بكسلات متشابهة، فقد لا يطابق أي بكسل منفرد تمامًا، خاصةً في الصور ذات التدرجات.
هل أحصل على اللوحة نفسها كل مرة؟
نعم. تستخدم الخوارزمية تهيئة حتمية، فتنتج الصورة نفسها وعدد الألوان نفسه اللوحة نفسها دائمًا.
هل تُحتسب البكسلات الشفافة؟
لا. تُتجاهل البكسلات التي عتامتها أقل من 50%، فيعطي شعار على خلفية شفافة ألوان الشعار فقط.