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

قم برفع أي صورة، ثم انقر لاختيار لون بكسل (سداسي / RGB / HSL) أو استخرج تلقائيا اللوحة السائدة. تحميل كمتغيرات JSON أو CSS.

ضع صورة لاستخراج لوحة الألوان

حول Color Picker

قم بتكميم الصورة إلى عدد الألوان السائدة المطلوبة باستخدام تقسيم 4 بت لكل قناة، ثم فرزه حسب التردد. يعمل بالكامل في متصفحك — صورتك لا تخرج من جهازك أبدا.

استمر في تحسين صورك

ارتق بتحرير الصور إلى المستوى التالي باستخدام هذه الأدوات الشائعة

📝

أضف نصا إلى الصورة

إضافة تسميات توضيحية وعناوين إلى صورتك المحسنة

🖼️

إضافة حدود الصورة

ضع إطار لتأثيرك بحدود جميلة

🗜️

ضغط الصورة

تحسين صورتك المحسنة للمشاركة

📐

تغيير حجم الصورة

تغيير أبعاد الصورة

استكشف جميع أدوات الصور

Frequently Asked Questions

قم بتحميل أي JPG أو PNG أو WebP أو GIF وانقر في أي مكان على الصورة المعروضة — يتم أخذ عينات من البكسل بالضبط تحت المؤشر وعرضه ك HEX وRGB وHSL مع نسخ بنقرة واحدة لكل تنسيق. مثالي لمطابقة لون العلامة التجارية، أو أخذ عينة من صورة فوتوغرافية، أو التقاط درجات اللمسات من نموذج تصميم.

usage

يتم تقليل عينة الصورة إلى 320 بكسل في أطول جانب، ثم يتم تقسيم كل بكسل إلى أعلى 4 بتات لكل قناة. يتم متوسط عدد الدلاء الأكثر ازدحاما إلى اللون الكامل 8-بت، وترتيبها حسب التردد، ثم تعاد كلوحة ألوان لديك. النتيجة عادة ما تكون 5-24 لونا سائدا تلخص الصورة بصريا.

technical

نعم. تنتج أزرار التنزيل تنسيقين: كتلة متغيرات CSS جاهزة لللصق في محدد جذر (--color-1, --color-2...)، وملف JSON يحتوي على مكونات سداسية وRGB ونسبة وزن لكل لون. كلا الصيغتين تندمج بشكل نظيف في رموز التصميم، وإعدادات Tailwind، ومكتبات الألوان.

features

لا — اختيار الألوان واستخراج اللوحة يحدث بالكامل في متصفحك باستخدام واجهة برمجة تطبيقات HTML canvas. تبقى الصورة على جهازك، مما يجعل الأداة آمنة لصور المنتجات غير المنشورة، ونماذج المسودات، وأصول العلامة التجارية بموجب اتفاقية عدم الإفزاز.

privacy

بالنسبة لأعمال هوية العلامة التجارية، 5-8 ألوان هي النقطة المثالية — فهي تلتقط الموضوع السائد دون أن تؤثر على اختيارات اللمسات. لعرض البيانات نوصي باستخدام 10-16 لونا حتى يكون لديك تدرجات تصنيفية كافية. المنزلق يسمح لك بالاختيار بين 5 و24.

tips

يتم تجاهل البكسلات التي تحتوي على ألفا أقل من 128، لذا فإن الخلفيات الشفافة لا تلوث لوحة الألوان بألوان "الخلفية". وهذا يجعل Image Color Picker جيدا بشكل خاص لقصاصات المنتجات، ورسومات الملصقات، والمواضيع المعزولة.

technical

HEX (#RRGGBB) هو الأكثر إحكاما وهو ما تستخدمه CSS وFigma وSketch بشكل افتراضي. يعرض RGB القيم الثلاثة للمكونات من 0 إلى 255 — مفيد عند العمل مع بيانات الصور بشكل برمجي. HSL (الدرج، التشبع، السطوع) بديهية لتعديل الألوان: تغيير اللون لتغيير عائلة الألوان، وضبط الإضاءة للألوان والظلال.

technical

نعم. مجاني، لا يتطلب حساب شخصي، ولا حدود لحجم الصورة أو عدد لوحات الألوان المستخرجة. لا يوجد شيء للتثبيت — الأداة بأكملها عبارة عن صفحة ويب واحدة.

pricing

Use Cases

تدقيق هوية العلامة التجارية

استخرج القيم الدقيقة ل HEX من شعار أو أصل تسويقي موجود لتدخله في دليل الأسلوب الخاص بك. طابق ألوان العلامات التجارية المنافسة لمجموعة تموضع أو رمية.

design

بناء لوحات تصميم الويب

استخرج الألوان السائدة من صورة فوتوغرافية أو لوحة مزاج، وصدر كمتغيرات CSS، وأدخلها في ورقة الأنماط الخاصة بك. النقطة المثالية من 5 إلى 8 ألوان تغطي الأساسي، واللمسات، والمحايد لنظام تصميم كامل بذرة.

design

قوائم منتجات التجارة الإلكترونية

طابق ألوان خلفية صور المنتج مع موضوع متجرك. اختر اللون المميز من صورة الحذاء الرياضي أو الفستان واستخدمه كعنصر إبراز في الإعلان.

ecommerce

الإلهام من التصميم الداخلي والموضة

صور غرفة أو ملابس تحبها واستخرج اللوحة اللونية. استخدمها لاختيار الطلاء أو الأقمشة أو الإكسسوارات التي تكمل النظام الحالي — محولا الإلهام البصري إلى عينات قابلة للتنفيذ.

lifestyle

مخططات تصور البيانات

أنشئ لوحة ألوان تصنيفية من 10-16 لونا مستمدة من صورة تريد استحضارها (مثل لوحة مائية لرسم بياني ناعم، وغروب شمس لتدرجات الحرارة إلى البرودة). أفضل من اختيار ألوان عامة.

data

سير عمل أصول الألعاب وواجهة المستخدم

استخرج لوحة الألوان المفهرسة من فن الرسوم أو نماذج واجهة المستخدم لتغذيتها في أداة فن البكسل أو محرك ألعاب. تصدير JSON الخاص باللوحة يتكامل مع Aseprite وPhotoshop ومعظم خطوط أنابيب الأصول.

gamedev