استخرج من 3 إلى 12 لوناً مهيمناً من أي صورة داخل متصفحك. رتب الألوان حسب التردد أو الطيف، واستعرض الظلال، وصدّر اللوحة بصيغة CSS أو JSON أو PNG.
JPG, PNG, WebP, GIF, SVG — استخرج الألوان المهيمنة
اسحب الصورة إلى هنا أو استخدم زر الرفع.
تمتلك كل صورة فوتوغرافية ناجحة أو لوحة فنية أو تصميم هوية بصرية تناغماً لونياً خفياً يمنحها جاذبيتها البصرية. وعندما تحاول استخلاص هذه اللوحة يدوياً باستخدام أداة القطارة العادية، غالباً ما ينتهي بك الأمر بالتقاط درجات باهتة أو ألوان مكررة؛ لأن الصورة الواحدة تضم آلاف التدرجات اللونية المتقاربة جداً. بدلاً من فحص البكسلات واحداً تلو الآخر، يقوم مولد لوحة الألوان بتحليل البنية اللونية الكاملة للصورة داخل متصفحك واستخلاص ألوانها المهيمنة الفعلية في خطوة واحدة.
تعتمد الخوارزمية البرمجية للأداة على تقليص الصورة مؤقتاً إلى مصفوفة مرجعية بعرض 150 px لتسريع القراءة، مع استبعاد البكسلات الشفافة في الخلفية (التي تقل قيمة قناة ألفا فيها عن 125)، ثم تجميع الألوان المتقاربة في حاويات لونية بدقة 15-bit RGB، وتطبيق فلتر المسافة اللونية (Manhattan Distance) لدمج التدرجات المتشابهة وإبراز الألوان المستقلة مع حساب نسبة حضور كل لون في الصورة بدقة.
بمجرد تحميل صورتك في مساحة العمل، تمنحك لوحة الألوان المهيمنة في الشريط الجانبي أدوات تحكم فورية لإعادة تشكيل اللوحة اللونية حسب احتياجك:
3 ألوان رئيسية لتصميم واجهة موقع بسيطة، أو الاعتماد على الإعداد الافتراضي المتوازن (6 ألوان)، أو رفع المؤشر حتى 12 لوناً لالتقاط الدرجات الثانوية الدقيقة في الرسوم التوضيحية المعقدة.-50% و-25%)، واللون الأساسي (0%)، ودرجتين فاتحتين (+25% و+50%). النقر على أي ظل ينسخ كود الـ HEX الخاص به فوراً إلى الحافظة.JPG أو PNG أو WebP أو GIF أو SVG وأفلته في الصفحة.#14171F) والأبيض (#FFFFFF) حسب إضاءة اللون لضمان وضوح القراءة.3 و12، واختر طريقة العرض من قائمة ترتيب، وفعّل مفتاح إظهار الظلال إذا كنت بحاجة لدرجات الأزرار والخلفيات الفرعية.بدلاً من نسخ ولصق عشرة أكواد لونية يدوياً واحداً تلو الآخر إلى محرر الأكواد أو دليل الهوية البصرية، يتيح لك قسم تصدير تنزيل ملفات منظمة تحمل اسم صورتك الأصلية:
-palette.css): ينشئ ملف أنماط جاهزاً يحتوي على كتلة :root تعرّف المتغيرات من --color-1 إلى --color-N بنفس الترتيب النشط لدمجها مباشرة في مشروعك.-palette.json): يصدّر مصفوفة برمجية تتضمن كود hex، ومصفوفة أرقام rgb، وقيمة النسبة المئوية percentage لاستخدامها في تطبيقات الويب والقوالب الديناميكية.-palette.txt): يحفظ مستنداً نصياً خفيفاً يسرد في كل سطر كود الـ HEX وقيمة rgb() ونسبة الهيمنة المئوية لتوثيق ألوان المشروع.-palette.png): يرسم شبكة مربعات لونية عالية الدقة بأبعاد 200 × 200 px لكل مربع، مطبوعاً بداخلها كود الـ HEX والنسبة المئوية — وهي مثالية لإرفاقها في عروض العملاء ولوحات الإلهام.بعد استخراج لوحة الألوان الخاصة بك، يمكنك توظيفها مباشرة عبر أدوات المعالجة المحلية الأخرى في موقعنا:
-palette.png الذي قمت بتصديره جنباً إلى جنب باستخدام صانع كولاج الصور أونلاين.كلا على الإطلاق. جميع عمليات تحليل البكسلات وتجميع الحاويات اللونية وتوليد ملفات التصدير تتم محلياً داخل متصفحك عبر تقنية HTML5 Canvas 2D، ولا تغادر ملفاتك جهاز الكمبيوتر أو الهاتف في أي لحظة.
بعد فرز الحاويات اللونية حسب الأكثر تكراراً، تقيس الخوارزمية المسافة اللونية (Manhattan RGB Distance) بين كل لون مرشح والألوان التي تم اختيارها بالفعل. أي درجة يقل مجموع الفارق اللوني لقنواتها الثلاث (الأحمر والأخضر والأزرق) عن 55 وحدة مقارنة بلون مختار مسبقاً يتم تخطيها في الدورة الأولى لضمان تنوع اللوحة المستخرجة.
لا. أثناء مسح بكسلات الصورة، يتم استبعاد أي بكسل تقل قيمة الشفافية (Alpha) فيه عن 125 من إجمالي عدد البكسلات المحسوبة؛ لذلك تعكس النسب المئوية الظاهرة ألوان العناصر المرئية فقط دون الخلفية المفرغة.
نعم. جميع أزرار التصدير الأربعة تعتمد الترتيب النشط الذي اخترته؛ فإذا رتبت اللوحة حسب السطوع، فسيكون المتغير --color-1 في ملف الـ CSS والمربع الأول في صورة الـ PNG هو اللون الأغمق في اللوحة.