منتقي الألوان من الصور: الدليل الشامل للمميزات وطريقة الاستخدام والمقارنة
بقلم أحمد عدن · آخر تحديث: 18 أكتوبر 2026
الخلاصة السريعة: منتقي الألوان من الصور أداة تقرأ لون أي بكسل داخل الصورة وتعطيك كوده بصيغ HEX وRGB وHSL وOKLCH وCMYK. وتستطيع هذه الأداة المجانية أيضاً استخراج لوحات من 3 إلى 12 لوناً، وفحص تباين WCAG، ومعاينة عمى الألوان، وتحويل صورتك إلى ثيمات shadcn/ui وTailwind v4 فاتحة وداكنة. وكل ذلك داخل متصفحك دون رفع الصور.
هل تبحث عن منتقي الألوان من الصور يعطيك كود اللون الدقيق بضغطة واحدة، دون تثبيت برامج أو إنشاء حساب؟ أنت في المقال السليم يا صديقي، لأننا سنتعرف في هذا الدليل على كل ما تقدمه هذه الأداة المجانية، وكيف تستخدمها خطوة بخطوة، وكيف تقارن بأشهر الأدوات المنافسة على الإنترنت.
التقاط لون من صورة يبدو أمراً سهلاً، لكنه في الواقع ليس كذلك دائماً. البكسل الذي يقف عليه مؤشر الفأرة غالباً ما يختلف عن اللون الحقيقي بدرجات بسيطة، بسبب ضغط الصور وحواف الأشكال الناعمة والتشويش. المصمم يضيع وقته، والمطور ينسخ كوداً خاطئاً، والمبتدئ على الجوال لا يرى أصلاً ما يلمسه بإصبعه. لا تقلق! هذه الأداة بُنيت لحل هذه المشاكل بالتحديد.
لن نطيل عليكم ونتوجه مباشرة إلى التفاصيل.
أقرأ أيضاً: استخراج باليتة من صورة · فاحص تباين الألوان · قائمة أسماء الألوان
ما هو منتقي الألوان من الصور؟
منتقي الألوان من الصور، ويسمى أيضاً قطارة الألوان أونلاين، هو أداة تقرأ لون أي بكسل داخل صورة أو لقطة شاشة أو شعار، وتحوله إلى أكواد تستطيع لصقها في مشروعك مباشرة: HEX وRGB وHSL وOKLCH وCMYK.
هذه الأداة تذهب خطوات أبعد من ذلك. تستطيع من خلالها استخراج لوحة ألوان كاملة من الصورة، وفحص تباين النصوص لمعايير الوصول، وحتى تحويل صورتك إلى ثيم واجهة بنسختين فاتحة وداكنة. كل شيء يعمل داخل متصفحك، فلا يتم رفع صورتك إلى أي خادم. وهذا يجعلها خياراً آمناً لأعمال العملاء والتصاميم غير المنشورة والصور الشخصية.
لماذا تستخدم هذا المنتقي بالتحديد؟
بصراحة، هناك الكثير من أدوات التقاط الألوان على الإنترنت. ومن وجهة نظري الشخصية، هذه الأسباب تجعل هذه الأداة تستحق وقتك:
- دقيقة بشكل كبير: تستطيع التقاط بكسل واحد أو متوسط منطقة 3×3 أو 5×5 أو 11×11، مما يلغي تشويش الضغط.
- مصممة للجوال: المكبر يظهر بعيداً عن إصبعك، فترى بالضبط أي بكسل ستلتقطه.
- خاصة وآمنة: صورتك تبقى على جهازك دائماً.
- تعطيك أكثر من كود: لوحات ألوان وتناسقات وتدرجات وفحص تباين وكود CSS جاهز للصق.
- مجانية بشكل كامل: بدون حساب ولا علامة مائية ولا حد لعدد الصور.
مميزات منتقي الألوان من الصور
1. التقاط دقيق بالبكسل مع مكبر
حرك الفأرة فوق الصورة وسيظهر مكبر يعرض البكسلات المحيطة بالمؤشر بوضوح. وتستطيع تكبير الصورة نفسها حتى 24 ضعفاً عندما تحتاج لالتقاط لون من تفصيل صغير جداً، مثل أيقونة أو خط رفيع.
2. أخذ عينة بمتوسط المنطقة
البكسل الواحد قد يكذب عليك أحياناً. اختر 1px أو 3×3 أو 5×5 أو 11×11 وستحسب الأداة متوسط المنطقة. هذه الميزة مفيدة بشكل كبير مع الصور الفوتوغرافية والتدرجات والصور المضغوطة.
3. استخراج لوحة الألوان تلقائياً
بضغطة واحدة تستخرج الأداة من 3 إلى 12 لوناً باستخدام خوارزمية التجميع k-means. اختر بين الألوان السائدة، أو النابضة للتمييز والإبراز، أو الهادئة للخلفيات. ويمكنك دمج الألوان التي تلتقطها بنفسك مع الألوان المستخرجة، حتى 24 لوناً في اللوحة.
4. استوديو الثيم: حوّل الصورة إلى ثيم واجهة (جديد)
هذه هي الميزة التي تصنع الفرق. تقرأ الأداة لوحتك وتختار لوناً أساسياً ولوناً مميزاً، ثم تبني ثيماً فاتحاً وداكناً كاملاً بـ 19 متغيراً مثل الخلفية والبطاقة واللون الأساسي والحدود. كل زوج نص وخلفية يُضبط ليصل إلى تباين WCAG AA، وترى معاينة حية بأزرار وحقل إدخال ومخطط قبل أن تنسخ أي شيء.
5. محدد مواضع اللون
اضغط على أيقونة العين بجانب أي لون وستعتم الأداة كل ما في الصورة عدا المناطق المطابقة لذلك اللون. إنها طريقة سريعة لتفهم أين يعيش اللون فعلاً داخل صورتك، ويتيح لك شريط التحكم ضبط درجة التطابق.
6. فاحص تباين WCAG
يعرض كل لون نسبة تباينه مع الأبيض والأسود مع شارة AA أو AAA أو راسب. اختيار ألوان نصوص مقروءة يصبح قراراً يستغرق ثانية واحدة، بدلاً من التخمين.
7. معاينة عمى الألوان
بدّل الصورة إلى عمى الأحمر أو الأخضر أو الأزرق أو عمى الألوان الكلي، وشاهد كيف سيرى الأشخاص المصابون بضعف إدراك الألوان تصميمك.
8. تناسقات وتدرجات 50–950
اختر أي لون واحصل على تناسقاته المتتامة والمتجاورة والثلاثية والمتتامة المنقسمة والرباعية، أو على تدرج كامل من 50 إلى 950 يشبه المستخدم في لوحة ألوان Tailwind.
9. تصدير جاهز للمطورين
انسخ ألوانك أو حمّلها كمتغيرات CSS أو SCSS أو Tailwind v3 أو Tailwind v4 أو JSON أو صورة PNG للوحة. والألوان متوفرة بصيغ HEX وRGB وHSL وOKLCH وCMYK.
10. تجربة مصممة للمس
الصورة في الأعلى وكل شيء آخر داخل لوحة سفلية تسحبها لأعلى وأسفل. قرّب الصورة بإصبعين، وحركها بإصبعين، واستخدم إصبعاً واحداً للتصويب. وتستطيع حتى التقاط صورة بالكاميرا والبدء باختيار ألوانها فوراً.
طريقة التقاط لون من صورة خطوة بخطوة
- ارفع صورتك: اختر ملفاً، أو اسحبه وأفلته على الصفحة، أو الصقه بـ Ctrl+V، أو اضغط «التقاط بالكاميرا» على جوالك.
- صوّب: على الكمبيوتر حرك الفأرة فوق الصورة. وعلى الجوال اضغط مطولاً ثم اسحب، وستظهر حلقة صغيرة تحدد الهدف فوق إصبعك ومكبر يعرض البكسلات بدقة.
- التقط: انقر أو ارفع إصبعك، وسيُضاف اللون إلى لوحتك. والنقرة السريعة تلتقط البكسل تحت إصبعك مباشرة.
- اختر الصيغة: بدّل بين HEX وRGB وHSL وOKLCH وCMYK، ثم اضغط أيقونة النسخ.
- حسّن النتيجة: غيّر حجم العينة، أو قرّب الصورة للتفاصيل الصغيرة، أو جرّب معاينة عمى الألوان.
نصيحة للجوال: لا تقلق إن كان إصبعك يغطي الصورة. هذا هو السبب بالضبط في وضع المكبر في زاوية الصورة ورفع حلقة التصويب فوق إصبعك.
كيف تستخرج لوحة ألوان من صورة؟
هل تحتاج لوحة جاهزة بدلاً من لون واحد؟ الأمر يتم في ثلاث خطوات فقط:
- ارفع الصورة وستُستخرج لوحة بالألوان السائدة تلقائياً.
- افتح تبويب الألوان، واختر السائدة أو النابضة أو الهادئة، وحدد عدد الألوان واضغط استخراج.
- احذف ما لا تريده، ثم صدّر النتيجة من تبويب التصدير.
وإن كنت تفضل استكشاف تركيبات جاهزة، تستطيع زيارة مولد لوحات الألوان أو عجلة الألوان في موقعنا.
كيف تحول الصورة إلى ثيم shadcn/ui أو Tailwind v4؟
بناء ثيم لعلامة تجارية من صورة أو شعار كان يستغرق ساعة كاملة من التجربة والخطأ. الآن يستغرق أقل من دقيقة:
- ارفع الصورة أو الشعار الذي يمثل علامتك.
- افتح تبويب الثيم وبدّل بين الفاتح والداكن لمراجعة المعاينة الحية.
- تحقق من شارات التباين أسفل المعاينة، فهي تعرض النسبة لكل زوج نص وخلفية.
- اختر shadcn + Tailwind v4 واضغط نسخ الثيم، ثم الصقه في ملف
globals.css.
وإن كنت لا تستخدم shadcn/ui، انسخ نسخة CSS العادية بألوان HEX أو نسخة JSON بدلاً منها.
منتقي الألوان من الصور مقابل أشهر الأدوات
دعونا نكون منصفين. كل أداة في هذا الجدول جيدة في شيء ما. المقارنة التالية مبنية على المميزات المعلنة للعموم وقت كتابة المقال، والخطط تتغير كثيراً، لذا أنصحك بمراجعة موقع كل أداة قبل أن تقرر.
| الميزة | ImageToColor | Coolors | Adobe Color | ColorZilla |
|---|---|---|---|---|
| الهدف الرئيسي | التقاط الألوان وبناء لوحات وثيمات من الصور | مولد لوحات وإلهام تصميمي | نظرية الألوان وبيئة Adobe | إضافة متصفح لصفحات الويب |
| الالتقاط من صورة مرفوعة | نعم، بدقة البكسل مع استخراج تلقائي للوحة | نعم، بتركيز على اللوحات | نعم، باستخراج الثيم | لا، يلتقط من الشاشة |
| عينة بمتوسط المنطقة (3×3 إلى 11×11) | نعم | غير معلنة كميزة | غير معلنة كميزة | غير معلنة كميزة |
| الحاجة لحساب | لا | ليس للأساسيات، والنسخة الاحترافية تفتح المزيد | حساب للمميزات الكاملة | تثبيت الإضافة |
| فحص تباين WCAG | نعم، مجاني، لكل لون ولكل ثيم | نعم، وبعضه ضمن النسخة الاحترافية | نعم | لا |
| معاينة عمى الألوان | نعم، على الصورة نفسها | نعم | نعم | لا |
| إخراج OKLCH | نعم | راجع موقعهم | راجع موقعهم | لا |
| تصدير Tailwind | نعم، v3 وv4 مع تدرجات 50–950 | نعم | لا | لا |
| ثيم واجهة فاتح وداكن من الصورة (shadcn) | نعم، بتباين موثق | غير معلنة كميزة | غير معلنة كميزة | لا |
| محدد مواضع اللون داخل الصورة | نعم | غير معلنة كميزة | غير معلنة كميزة | لا |
| مكبر لمس مصمم للجوال | نعم | يتوفر تطبيق جوال | تطبيق ويب | متصفحات سطح المكتب فقط |
| خصوصية الصورة | تبقى داخل متصفحك | راجع سياستهم | راجع سياستهم | إضافة محلية |
| السعر | مجاني | مجاني مع نسخة احترافية مدفوعة | مجاني بحساب Adobe | مجاني |
رأيي الصريح: إن أردت تصفح آلاف اللوحات الجاهزة فـ Coolors ممتاز. وإن كنت تعمل داخل Creative Cloud فـ Adobe Color مناسب لك. وإن احتجت التقاط لون من صفحة ويب حية فـ ColorZilla يؤدي المهمة جيداً. أما عندما تبدأ من صورة وتريد أكواداً دقيقة ولوحة كاملة وثيماً جاهزاً للإنتاج دون دفع أو تسجيل، فهذه الأداة هي الطريق الأسرع.
عيوب الأداة وما يجب أن تعرفه
لا توجد أداة مثالية، وأفضل أن أكون صريحاً معك. إليك ما يجب أن تضعه في بالك:
- الصور الكبيرة جداً يتم تصغيرها إلى 2400 بكسل على أطول ضلع لسرعة المعالجة. ملفك الأصلي لا يتغير أبداً.
- أسماء الألوان مولدة تلقائياً وبشكل عام، لذلك قد لا تطابق الاسم الرسمي للون في علامة تجارية معينة.
- قطارة الشاشة تعتمد على المتصفح، وتعمل بشكل أساسي في المتصفحات المبنية على Chromium.
- تُقرأ الألوان بقيم sRGB القياسية، لذلك لا تُحفظ بيانات Display P3 واسعة النطاق.
- للأسف الشديد لا تُحفظ اللوحات بين الزيارات، فانسخها أو صدّرها قبل مغادرة الصفحة.
لمن هذه الأداة؟
- مصممو الويب وواجهات المستخدم الذين يبنون لوحات ألوان من الصور واللوحات الإلهامية.
- مطورو الواجهات الأمامية الذين يحتاجون قيم HEX وRGB وHSL وOKLCH وكود CSS جاهزاً لـ Tailwind.
- مصممو الهويات والشعارات الذين يطابقون ألواناً دقيقة من ملف العميل.
- المصورون والفنانون الذين يدرسون ألوان أعمالهم.
- الطلاب والمبتدئون الذين يريدون أداة بسيطة ومجانية تشرح لهم النتيجة.
أسئلة شائعة
ما هو منتقي الألوان من الصور؟
هو أداة أونلاين تقرأ لون أي بكسل داخل صورة أو لقطة شاشة أو شعار، وتعطيك الكود بصيغ HEX وRGB وHSL وOKLCH وCMYK. وهذه الأداة تستطيع أيضاً استخراج لوحة ألوان كاملة وبناء ثيم واجهة من صورتك.
هل يتم رفع صورتي إلى خادم؟
لا يا صديقي. تتم معالجة الصورة بشكل كامل داخل متصفحك ولا تغادر جهازك أبداً، لذلك فهي آمنة لأعمال العملاء والصور الخاصة.
ما مدى دقة التقاط اللون؟
أنت تتحكم في حجم العينة: بكسل واحد، أو متوسط 3×3 أو 5×5 أو 11×11 بكسل. حساب المتوسط يزيل التشويش الناتج عن ضغط JPEG والحواف الناعمة، فتحصل على اللون الذي تراه عينك فعلاً.
هل تعمل الأداة على الجوال؟
نعم، فقد صُممت أساساً لشاشات اللمس. تضغط مطولاً وتسحب للتصويب، ويظهر مكبر يعرض البكسل بعيداً عن إصبعك، ثم ترفع إصبعك للالتقاط. وتستطيع التقريب بإصبعين.
هل أستطيع إنشاء ثيم Tailwind أو shadcn/ui من صورة؟
نعم. يبني استوديو الثيم ثيماً فاتحاً وداكناً من صورتك ويفحص تباين النصوص تلقائياً. وتستطيع نسخه كمتغيرات shadcn/ui وTailwind v4 بنظام OKLCH، أو كـ CSS عادي، أو كملف JSON.
ما صيغ الصور المدعومة؟
أي صيغة يستطيع متصفحك فتحها، مثل JPG وPNG وWebP وGIF وSVG. الصور الكبيرة جداً تُصغّر إلى 2400 بكسل على أطول ضلع لسرعة المعالجة، وملفك الأصلي لا يتغير.
هل الأداة مجانية فعلاً؟
نعم، مجانية بشكل كامل، بدون حساب وبدون علامة مائية.
الخلاصة:
أفضل منتقي ألوان من الصور هو الذي يعطيك اللون الصحيح بسرعة ودون عناء. هذه الأداة تجمع بين الالتقاط الدقيق واستخراج اللوحات تلقائياً وفحص الوصول ومولد ثيمات من الصور، في صفحة مجانية واحدة تعمل بشكل ممتاز على الكمبيوتر والجوال.
إن احتجت كود لون سريعاً فارفع صورتك وانقر. وإن كنت تبني نظام تصميم كاملاً فابدأ باللوحة ثم تبويب الثيم، وصدّر النتيجة بالصيغة التي تفضلها. جرّب الأداة بصورتك الخاصة، وأخبرني أي ميزة أعجبتك أكثر.
كان هذا هو دليلك الشامل لأداة منتقي الألوان من الصور. أتمنى أن ينال إعجابكم ورضاكم. نراكم في أداة جديدة وقيمة قريباً جداً.