منتقي ألوان الصورة واللوحة
منتقي ألوان الصورة واللوحة
انقر لاختيار الألوان من الصورة، استخراج الألوان الرئيسية واللوحة تلقائياً، نسخ HEX/RGB وتصدير متغيرات CSS. يدعم PNG، JPG/JPEG، WebP، AVIF، HEIC/HEIF.
اسحب وأفلت الصورة هنا أو انقر للتحديد
يدعم PNG / JPG / JPEG / WebP / AVIF / HEIC / HEIF
🚀 بداية سريعة
- استيراد الصورة: اسحب وأفلت أو انقر للتحديد
- تبديل اللوحة: سطح المكتب يظهر لوحة جانبية؛ الجوال اضغط زر الأسفل
- انقر للاختيار: انقر في أي مكان على الصورة للحصول على لون البكسل
- نسخ اللون: بعد الاختيار انسخ تنسيق HEX/RGB/CSS
- تعيين عدد الألوان: اسحب الشريط أو انقر إعداد مسبق (4/6/8/12/16/24/32)
- استخراج اللوحة: انقر زر الاستخراج للحصول على قائمة الألوان الرئيسية
- تصدير CSS: بعد الاستخراج صدّر ملف متغيرات CSS
- تصدير JSON: بعد الاستخراج صدّر ملف بيانات JSON
- إعادة تعيين: مسح الصورة الحالية والنتائج
📌 سيناريوهات شائعة
- اختيار ألوان التصميم/الملصق: استخراج الألوان الأساسية والمميزة لمخطط الألوان
- السمة/نظام التصميم: تصدير متغيرات CSS أو JSON للمشروع
- تنسيق المكونات: استخراج ألوان متطابقة للأزرار والعلامات والمخططات
- تناسق العلامة التجارية: استخراج لوحة ألوان قياسية من أصول العلامة التجارية
🎛️ خيارات منتقي الألوان واللوحة
- عدد الألوان: 2–32، عادة 8/12؛ الصور/التدرجات تقترح 16–32
- أزرار الإعداد المسبق: 4/6/8/12/16/24/32 تبديل بنقرة واحدة
- الترتيب: حسب النسبة من الأعلى إلى الأدنى، الألوان الأكثر شيوعاً أولاً
- الرقم بجانب اللون: يظهر نسبة البكسل في الصورة
🧭 نصائح الاستخدام
- ابدأ بـ 8/12 لرؤية التأثير العام، ثم زد إلى 16/24/32 حسب الحاجة
- عند الاستخدام في المشروع، أعد تسمية --color-1 إلى أسماء دلالية (مثل --color-primary)
- أبقِ الصفحة في المقدمة عند استخراج صور كبيرة لتجنب تباطؤ المتصفح
⚠️ القيود والتوافقية
- حد الملف الواحد 128MB، الصور الكبيرة جداً قد تسبب التباطؤ
- استخراج اللوحة يقوم بتقليل الدقة تلقائياً للأداء، النتائج ألوان تمثيلية
- فك تشفير HEIC/HEIF يعتمد على دعم المتصفح، حوّل إلى JPG/PNG إذا فشل
- البكسلات الشفافة يتم تجاهلها أو معالجتها كـ RGBA الفعلي
🔒 الخصوصية والأمان
- جميع المعالجة تتم في متصفحك؛ البيانات لا تغادر جهازك أبداً
❓ أسئلة شائعة
كيف تستخدم ملف CSS المُصدَّر؟
ضع :root { --color-1: ... } المُصدَّر في CSS العام، ثم أشر إليه بـ var(--color-1).
ما فائدة JSON المُصدَّر؟
لإعادة استخدام السكريبتات/نظام التصميم، مثل إنشاء Design Tokens أو إعداد السمة. كل لون يتضمن hex/css/rgb و count.
ما عدد الألوان الموصى به؟
واجهة عامة: 8 أو 12؛ أيقونات بسيطة: 4–6؛ صور/تدرجات: 16–32. استخدم الإعدادات المسبقة للمقارنة السريعة.
لماذا ألوان النقر واللوحة مختلفة؟
اختيار النقر يحصل على بكسل واحد؛ اللوحة تكمّم الصورة بأكملها لألوان تمثيلية مع التركيز على الاتجاه العام.
لماذا زر التصدير رمادي؟
تحتاج للنقر أولاً على 'استخراج اللوحة'، التصدير يصبح متاحاً بعد اكتمال الاستخراج.
كيف يتم إنشاء اسم الملف المُصدَّر؟
الافتراضي يستخدم اسم الملف الأصلي (بدون امتداد) + .palette-العدد + .css/.json، مع تنظيف الأحرف غير القانونية تلقائياً.