مُستخرج لوحة ألوان الصور — أداة استخراج الألوان السائدة ولوحات التصميم مجاناً
Image Tools
جاري تحميل الأداة...
حول هذه الأداة
مُستخرج لوحة ألوان صور مجاني وخاص يعمل داخل المتصفح بدون خادم. استخرج الألوان السائدة بدقة عبر خوارزمية القطع الوسيط، مع تصدير صيغ HEX وRGB وHSL وCSS وJSON.
كيفية الاستخدام
- رفع ملف الصورة: اسحب وأفلت أي صورة (PNG أو JPEG أو WebP أو SVG أو AVIF) في منطقة الإفلات المخصصة، أو انقر لاختيار الملف من جهازك.
- تحديد كثافة لوحة الألوان: حدد عدد الألوان السائدة المطلوب استخراجها (من لونين إلى 20 لوناً، القيمة الافتراضية هي 8 ألوان) عبر خانة الإدخال الرقمية.
- استخراج لوحة الألوان السائدة: اضغط على زر استخراج اللوحة، وسيقوم المحرك فورياً بتحليل بيانات البكسل محلياً وعرض بطاقات الألوان المستخرجة بجانب معاينة الصورة.
- معاينة تفاصيل الألوان ونسخها: استعرض كود HEX وقيم RGB ودرجات HSL والنسبة المئوية لانتشار كل لون في الصورة. انقر على أي شريحة لونية لنسخ كود HEX فوراً إلى الحافظة.
- تصدير رموز التصميم البرمجية: اضغط على نسخ CSS للحصول على قائمة ألوان مفصولة بفواصل لاستخدامها في ملفات التنسيق، أو اضغط تصدير JSON لتنزيل ملف متكامل يحتوي على كافة البيانات الدقيقة للألوان.
الأسئلة الشائعة
كيف تحدد خوارزمية القطع الوسيط (Median-Cut) الألوان السائدة في الصورة بدقة؟
تعد خوارزمية القطع الوسيط خوارزمية تجميعية متعددة الأبعاد تعامل كل بكسل كإحداثي في فضاء الألوان ثلاثي الأبعاد (RGB). تضع الخوارزمية كافة البكسلات داخل صندوق محيط، وتحسب أي قناة لونية (الأحمر، الأخضر، أو الأزرق) تمتلك أكبر تباين لوني، ثم تقسم البكسلات عند القيمة الوسيطة تماماً إلى صندوقين متساويين. تتكرر هذه العملية بشكل تراجعي حتى نصل إلى عدد الألوان المطلوب، ثم يُحسب المتوسط الحسابي للبكسلات في كل صندوق لتمثيل لون سائد مرتب حسب نسبة انتشاره.
لماذا تقوم الأداة بتصغير حجم الصورة إلى 150×150 بكسل قبل استخراج الألوان؟
يحقق تصغير الصور الضخمة (مثل صور 4K) إلى مقاس 150×150 بكسل (أي 22,500 نقطة عينة) توازناً رياضياً مثالياً بين سرعة المعالجة ودقة التمثيل اللوني. يعمل هذا الإجراء على استبعاد الضوضاء الرقمية وتشوهات الضغط مع الاحتفاظ الدقيق بالنسب الكتلية للألوان، مما يتيح إتمام معالجة لوحة الألوان بالكامل في أقل من 50 مللي ثانية داخل المتصفح دون أي تجميد للواجهة.
كيف تتعامل الأداة مع الصور ذات الخلفيات الشفافة مثل شعارات PNG؟
يقوم محرك التحليل تلقائياً بتصفية واستبعاد أي بكسل تقل شفافيته عن 128 (أقل من 50% عتامة). وبذلك يتم تقييم صور PNG وWebP وSVG بدقة استناداً إلى البكسلات المرئية فقط، مما يمنع تشويه لوحة الألوان بألوان سوداء أو بيضاء ناتجة عن الخلفية الشفافة المحيطة بالشعار.
ما الفرق بين صيغ الألوان HEX و RGB و HSL المعروضة في الأداة؟
صيغة HEX هي ترميز ست عشري مدمج مكون من 6 خانات يُستخدم قياسياً في لغات الويب وتنسيقات CSS. بينما تعبر صيغة RGB عن شدة الألوان الأساسية بقيم من 0 إلى 255 وتطابق إضاءة بكسلات الشاشة مباشرة. أما صيغة HSL فتحدد اللون عبر الدرجة (Hue من 0 إلى 360 درجة)، والتشبع (Saturation من 0 إلى 100%)، والإضاءة (Lightness من 0 إلى 100%)، وتعد HSL الخيار الأفضل لمصممي الواجهات لأن تعديل الإضاءة والتشبع يتيح اشتقاق تدرجات لونية متناسقة مع الحفاظ على اللون الأصلي.
هل يمكنني تصدير لوحة الألوان المستخرجة لاستخدامها في البرمجة وتصميم المواقع؟
نعم بالتأكيد. يمكنك النقر على زر 'نسخ CSS' للحصول على قائمة ألوان مفصولة بفواصل جاهزة لتعريف متغيرات CSS، أو النقر على 'تصدير JSON' لتنزيل ملف مهيكل باسم `color-palette.json` يحتوي على قيم HEX وRGB وHSL والنسبة المئوية لانتشار كل لون، وهو تنسيق مثالي لدمجه تلقائياً في إعدادات Tailwind CSS أو أنظمة التصميم البرمجية.
كيف تضمن الأداة وضوح وسهولة قراءة النصوص والأرقام المكتوبة فوق شرائح الألوان؟
تحسب الأداة تلقائياً مؤشر السطوع والإضاءة لكل شريحة لونية ناتجة؛ فإذا كانت نسبة الإضاءة تتجاوز 55%، يُعرض النص بلون رمادي داكن فاحم (`#1e293b`) لضمان وضوحه، وإذا كانت الإضاءة 55% أو أقل، يُعرض النص بلون أبيض ناصع (`#f8fafc`). تضمن هذه المعادلة توافقاً تاماً مع معايير التباين البصري وسهولة القراءة على كافة درجات الألوان.
هل يتم رفع صوري إلى أي خوادم خارجية أو تخزينها سحابياً أثناء استخراج الألوان؟
كلا على الإطلاق. تعمل أداة استخراج لوحة ألوان الصور بهندسة خالية من الخادم تماماً (Serverless) محلياً داخل متصفحك. تجري كافة عمليات قراءة الصور، والتكميم اللوني في الفضاء ثلاثي الأبعاد، وتصدير الأكواد داخل الذاكرة المؤقتة لجهازك. لا يتم إرسال أي صورة أو بيانات إلى خوادمنا، مما يمنحك أماناً وسرية مطلقة لتصاميم هويات الشركات والصور الخاصة.
لماذا يظهر اللون البارز أحياناً بنسبة مئوية منخفضة في لوحة الألوان المستخرجة؟
تعبر النسبة المئوية عن المساحة السطحية التي يشغلها اللون في الصورة، وليس عن قوة تأثيره النفسي في العين. ففي الصور الفوتوغرافية غالباً ما تشغل الخلفيات المحايدة (مثل السماء أو الجدران) من 60% إلى 80% من مساحة البكسلات، بينما تحتل العناصر المميزة (مثل سيارة حمراء أو زر أصفر) ما بين 3% إلى 8% فقط. وتنجح خوارزمية القطع الوسيط في رصد هذا اللون البارز وتخصيص شريحة مستقلة له مع توضيح حصته المكانية الحقيقية.
أدلة ودروس
أدلة شاملة لكل أداة. تعلم كيف تعالج بياناتك بخصوصية تامة، مجاناً، مباشرة في متصفحك.
اقرأ المزيد