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

كيف يعمل

يعمل استخراج الألوان بالكامل في متصفحك باستخدام خوارزمية تجميع k-means++ مكتوبة يدويًا مطبقة على بيانات البكسل الخام المقروءة من Canvas API — لا خادم ولا مكتبة خارجية. الصورة نفسها وإعدادات عدد الألوان نفسها تنتج دائمًا اللوحة نفسها لأن الخوارزمية تستخدم مولّد أرقام شبه عشوائية حتميًا (mulberry32) بدلًا من Math.random.

1. 1
   Canvas يقرأ بيانات البكسل

   تُرسم الصورة على عنصر HTML Canvas خارج الشاشة وتُصغَّر إلى 200px كحد أقصى على أطول ضلع. تُرجع getImageData() من Canvas API كل بكسل كبايتات RGBA خام، وتُستبعد البكسلات الشفافة تمامًا (alpha < 128) قبل بدء التجميع.
2. 2
   k-means++ يجمّع البكسلات

   يبذر مُهيِّئ k-means++ المراكز حتميًا، ثم تكرر الخوارزمية حتى 20 مرة: يُسند كل بكسل إلى أقرب مركز في فضاء RGB، ثم تُعاد حسابات المراكز كمتوسط كل البكسلات المسندة. تُدمج المجموعات التي تنهار إلى القيمة الست عشرية نفسها، فتكون كل عيّنة في النتيجة فريدة.
3. 3
   حساب البيانات الوصفية لكل لون

   يُحوَّل كل مركز إلى HEX وHSL ونصيبه من إجمالي البكسلات (نسبة مئوية). تُحسب الإضاءة النسبية وفق WCAG بالمعادلة القياسية، وتُعرض نسب التباين مقابل الأسود والأبيض بجانب كل عيّنة.
4. 4
   التصدير ومخرجات القطّارة

   يمكن نسخ اللوحة كخصائص CSS مخصصة، أو متغيرات SCSS، أو مقتطف إعدادات Tailwind، أو JSON. وتربط قطّارة النقر لأخذ العيّنات نقرتك على المعاينة بإحداثيات البكسل المصدر الدقيقة على لوحة بالدقة الكاملة، مضيفة لون ذلك البكسل إلى قائمة ألوان منتقاة منفصلة. ويمكن تنزيل شريط لوحة PNG عبر Canvas toBlob().

أدوات ذات صلة