أسقط صورة هنا
كيفية اختيار واستخراج الألوان من الصور
الأسئلة الشائعة
كيف أجد اللون الدقيق لبكسل في صورة؟
كيف أستخرج جميع الألوان من صورة؟
ماذا يفعل إعداد دمج المتشابه؟
ما هي صيغ الألوان HEX و RGB و HSL؟
هل يمكنني استخدام الألوان المستخرجة في CSS أو أدوات التصميم؟
color: #3B82F6;. استخدم قيم RGB في أدوات التصميم مثل Figma أو Sketch أو Adobe XD. استخدم HSL لتوليد تنويعات أفتح/أغمق برمجياً. جميع العمليات تتم محلياً — صورك لا تُرفع إلى أي خادم.منتقي ألوان الصور ومستخرج اللوحات — أداتان في واحدة
تجمع أداتنا بين منتقي ألوان دقيق البكسل ومستخرج لوحة كاملة للصورة. يمنحك منتقي البكسل عدسة مكبرة (تكبير 10×) لاستهداف البكسلات الفردية والحصول على قيم HEX و RGB و HSL الدقيقة — مثالي لأخذ عينة من لون محدد من شعار أو نموذج واجهة مستخدم أو صورة. يستخرج وضع جميع الألوان كل لون فريد من الصورة بأكملها ويعرضها كشبكة عينات قابلة للفرز، مرتبة حسب تكرار ظهور كل لون. معاً يغطيان سير العمل الكامل لاستخراج الألوان: من أخذ عينات دقيقة جراحياً لبكسل واحد إلى اكتشاف شامل للوحة الألوان.
وضع منتقي البكسل — دقة لونية جراحية
يقرأ منتقي البكسل قيمة RGB الدقيقة للبكسل تحت المؤشر باستخدام طريقة getImageData() من HTML5 Canvas API. تظهر العدسة المكبرة الدائرية منطقة 11×11 بكسل بتكبير 10× مع تراكب شعري متقاطع، مما يسهل استهداف البكسل الدقيق الذي تريده — حتى في الصور عالية الدقة حيث تكون البكسلات صغيرة جداً بحيث لا ترى بالعين المجردة. يُعرض كل لون محدد بثلاث صيغ في آن واحد:
- HEX — الرمز السداسي العشري المكون من 6 أحرف (مثلاً، #3B82F6). قياسي لـ CSS و HTML وتطوير الويب.
- RGB — قيم الأحمر والأخضر والأزرق من 0-255. تُستخدم في أدوات التصميم الجرافيكي وعند الحاجة إلى دقة كل قناة.
- HSL — التدرج (0-360°)، التشبع (0-100%)، الإضاءة (0-100%). الصيغة الأكثر بديهية لإنشاء الظلال والدرجات والتناغمات اللونية.
انقر على أي لون لحفظه في سجل اللوحة (حتى 12 لوناً). استخدم زر توليد لوحة لاستخراج الألوان الخمسة الأكثر هيمنة تلقائياً عبر تحليل التكرار — طريقة سريعة للحصول على المخطط اللوني الرئيسي لأي صورة.
وضع جميع الألوان — استخراج كامل للوحة
بينما يتفوق منتقي البكسل في أخذ عينات من نقاط فردية، يجيب تبويب جميع الألوان على السؤال: "ما الألوان الموجودة فعلاً في هذه الصورة؟" يأخذ عينات من كل بكسل بشكل منهجي (بدقة مخفضة للأداء — عادةً 150×150 بكسل، أو 22,500 عينة)، ويزيل تكرار الألوان المتطابقة، ويقدم النتائج كشبكة من عينات الألوان مع رموز HEX. تُرتب الألوان حسب التكرار — الألوان الأكثر شيوعاً تظهر أولاً.
شريط دمج المتشابه هو عنصر التحكم الأساسي. بدونه، قد تنتج الصورة الفوتوغرافية مئات الألوان غير القابلة للتمييز بصرياً بسبب تشويش ضغط JPEG والتدرجات الدقيقة وتشويش المستشعر. زيادة التسامح تدمج الألوان التي تقل مسافتها الإقليدية في فضاء RGB عن الحد المعين. هذا يمنحك لوحة نظيفة وقابلة للاستخدام بدلاً من قائمة مرهقة. للشعارات والرسومات ذات الألوان المسطحة، حافظ على التسامح عند 0-5. للصور الفوتوغرافية، 16-32 تنتج عادةً أفضل النتائج.
متى تستخدم كل وضع
- منتقي البكسل: استخراج لون علامة تجارية من ملف شعار، أخذ عينة من عنصر واجهة مستخدم محدد من لقطة شاشة، الحصول على درجة لون البشرة الدقيقة من صورة شخصية، مطابقة لون النص مع الخلفية في صورة رئيسية.
- جميع الألوان: بناء لوحة ألوان كاملة من لوحة مزاجية أو صورة مرجعية، إعادة هندسة المخطط اللوني لموقع منافس، تحليل التركيب اللوني لعملك التصميمي الخاص، إنشاء نظام ألوان للعلامة التجارية من صورة رئيسية.
- كلاهما معاً: استخدم جميع الألوان لاكتشاف اللوحة، ثم انتقل إلى منتقي البكسل للتحقق من قيم ألوان محددة بالدقة الكاملة.
الخصوصية والمعالجة
تتم جميع معالجات الصور بالكامل في متصفحك باستخدام Canvas API. صورك لا تُرفع إلى أي خادم — الملف يبقى على جهازك. تقرأ الأداة بيانات البكسل محلياً، وتجري جميع الحسابات في JavaScript، وتعرض النتائج فوراً. لا حسابات، لا معالجة سحابية، لا جمع بيانات. يمكنك استخدامها بدون اتصال بالإنترنت بمجرد تحميل الصفحة.