كيف تلتقط لوناً من صورة أو لقطة شاشة؟ | إتقان

رأيت لوناً جميلاً في موقع، أو تحتاج كود لون الشعار بالضبط لتستخدمه في عرض تقديمي أو تصميم جديد؟ التخمين لا يعطيك نتيجة احترافية أبداً. منتقي الألوان من صورة (المعروف أيضاً بأداة القطّارة أو Eyedropper) يحل المشكلة بضغطة واحدة: ارفع الصورة، انقر النقطة، واحصل على كود اللون بصيغ HEX وRGB وHSL جاهزة للنسخ. في هذا الدليل من إتقان نشرح كيف تعمل الأداة، متى تحتاجها، الفرق بين صيغ الألوان، خطوات الاستخدام، وأخطاء شائعة تُفسد دقة الالتقاط — محتوى مكتوب يدوياً لمستخدمي المنصة.

ما هو منتقي الألوان من صورة؟

منتقي الألوان (Color Picker أو Eyedropper) هو أداة تقرأ قيمة اللون في نقطة محددة من صورة رقمية. كل صورة تتكوّن من ملايين البكسلات، وكل بكسل يحمل قيمة لونية دقيقة مكوّنة من ثلاث قنوات: أحمر وأخضر وأزرق. عندما تنقر نقطة في الصورة، تقرأ الأداة هذه القيم وتحوّلها إلى صيغ قياسية يفهمها المصممون والمطورون: HEX مثل #1A73E8، وRGB مثل rgb(26, 115, 232)، وHSL مثل hsl(214, 82%, 51%).

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

لماذا تحتاج كود اللون الدقيق؟

العين البشرية تخدع كثيراً في تقدير الألوان. اللون الأزرق الذي تراه «سماوياً» قد يكون في الحقيقة واحداً من مئات الدرجات المختلفة، والفرق بين درجتين متقاربتين يظهر بوضوح عندما تضعهما جنباً إلى جنب في تصميم واحد. الحالات التي يصبح فيها الكود الدقيق ضرورياً كثيرة:

• الهوية البصرية: ألوان العلامة التجارية يجب أن تكون متطابقة في كل مكان — الموقع، العروض، المطبوعات، ووسائل التواصل. درجة أغمق قليلاً في شعارك تُلاحظ فوراً.
• تطوير الويب: عند تحويل تصميم إلى كود CSS، تحتاج القيمة الفعلية للون الزر أو الخلفية، لا تقديراً بصرياً.
• استكمال تصميم قديم: ورثت ملف تصميم بدون دليل ألوان؟ التقط الألوان من الصورة النهائية مباشرة.
• استلهام من صور واقعية: صورة غروب أو طبيعة تعجبك — التقط منها لوحة ألوان متناسقة لمشروعك.
• مطابقة منتج: تبيع منتجات وتريد خلفية صفحة تطابق لون المنتج في الصورة تماماً.

كيف تعمل الأداة؟ (ببساطة)

عند رفع الصورة، تُرسم داخل عنصر Canvas في متصفحك — وهي تقنية مدمجة في كل المتصفحات الحديثة تتيح قراءة بيانات البكسلات برمجياً. عندما تحرّك المؤشر فوق الصورة، تقرأ الأداة إحداثيات النقطة وتحوّلها إلى موقع البكسل المقابل في الصورة الأصلية بدقتها الكاملة، ثم تقرأ قيم الأحمر والأخضر والأزرق لهذا البكسل تحديداً.

هذه نقطة مهمة: القراءة تتم من الصورة الأصلية وليس من النسخة المصغّرة المعروضة على الشاشة. لماذا يهم هذا؟ لأن المتصفح عند تصغير الصورة للعرض يدمج ألوان البكسلات المتجاورة، فتحصل على لون «مخلوط» غير موجود فعلياً في التصميم الأصلي. القراءة من المصدر تضمن أن الكود الذي تنسخه هو اللون الحقيقي.

كل هذا يحدث محلياً على جهازك: لا اتصال بخادم، لا رفع ملفات، ولا انتظار معالجة. لهذا تعمل الأداة بنفس السرعة مع صورة صغيرة أو لقطة شاشة بدقة 4K.

سيناريوهات عملية — متى تُنقذك الأداة؟

منتقي الألوان ليس أداة للمصممين المحترفين فقط؛ هذه مواقف يومية يحتاجها فيها الطلاب والموظفون وأصحاب المشاريع:

توحيد ألوان عرض تقديمي مع شعار الشركة

تجهّز عرض PowerPoint وتريد أن تتطابق العناوين مع الأزرق في شعار شركتك. خذ لقطة شاشة للشعار، ارفعها للأداة، انقر اللون، وانسخ كود HEX — ثم ألصقه في خانة اللون المخصص في PowerPoint. النتيجة: عرض متناسق يبدو احترافياً.

تحويل تصميم من صورة إلى CSS

وصلك تصميم صفحة كصورة PNG بدون ملف المصدر. بدل مراسلة المصمم عن كل لون، التقط ألوان الأزرار والخلفيات والنصوص واحداً واحداً، وسجّلها في متغيرات CSS. سجل «الألوان الأخيرة» في الأداة يسهّل التقاط عدة ألوان من نفس الصورة دون فقدان أي منها.

بناء لوحة ألوان من صورة ملهمة

صورة طبيعية بألوان متناسقة تصلح أساساً لهوية مشروع كامل. التقط 4–6 ألوان من مناطق مختلفة: الأفتح للخلفيات، الأغمق للنصوص، ولون مشبع واحد للأزرار والروابط. ثم جرّبها في مولّد الشعارات لترى التناسق عملياً.

مطابقة لون منتج في متجر إلكتروني

تضيف منتجاً جديداً وتريد شارة «اللون المتاح» في صفحة المنتج مطابقة للون الحقيقي في الصورة. التقط اللون من صورة المنتج نفسها بدلاً من الاختيار اليدوي من لوحة عامة — عملاؤك سيرون تطابقاً بين الشارة والمنتج.

استخراج لون من لقطة شاشة لتطبيق

أعجبك لون زر في تطبيق جوال؟ خذ لقطة شاشة، ارفعها، وكبّر بالعدسة على الزر. انتبه فقط أن بعض التطبيقات تستخدم تدرجات لونية — التقط من منتصف العنصر وليس من حوافه.

HEX وRGB وHSL — أيّها تستخدم؟

الأداة تعرض اللون بثلاث صيغ في نفس الوقت، وكل صيغة لها استخدامها الأمثل:

HEX — الأكثر شيوعاً

ست خانات سداسية عشرية مسبوقة بعلامة #، مثل #1A73E8. كل خانتين تمثلان قناة لون (أحمر، أخضر، أزرق). هذه الصيغة القياسية في CSS ومعظم أدوات التصميم مثل Figma وCanva وAdobe. إن لم تكن متأكداً أي صيغة تحتاج، انسخ HEX.

RGB — لقيم القنوات المنفصلة

ثلاث قيم من 0 إلى 255، مثل rgb(26, 115, 232). مفيدة عندما تعمل بلغة برمجية تتعامل مع القنوات منفصلة، أو تريد إضافة شفافية بصيغة rgba() حيث تضيف قيمة رابعة للشفافية.

HSL — للتعديل المنطقي على اللون

درجة اللون (Hue) من 0 إلى 360، ثم التشبع (Saturation) والسطوع (Lightness) كنسب مئوية، مثل hsl(214, 82%, 51%). ميزتها أنك تستطيع اشتقاق درجات متناسقة من نفس اللون بسهولة: أردت نسخة أفتح للخلفية؟ ارفع قيمة السطوع فقط دون تغيير درجة اللون. هذه أسهل طريقة لبناء نظام ألوان كامل من لون واحد.

كيف تلتقط لوناً في إتقان — خطوة بخطوة

1. افتح منتقي الألوان من صورة من متصفحك (كمبيوتر أو جوال).
2. ارفع صورة JPG أو PNG أو WebP بالسحب والإفلات، أو من الجهاز، أو من Google Drive وDropbox.
3. حرّك المؤشر فوق الصورة — ستظهر عدسة تكبير دائرية تعرض البكسلات حول النقطة الحالية، ومربع المعاينة في الشريط الجانبي يتغيّر مباشرة مع الحركة.
4. عندما يستقر التصويب على النقطة الصحيحة، انقر — تظهر قيم HEX وRGB وHSL في الشريط الجانبي.
5. انسخ الصيغة التي تحتاجها بزر النسخ المجاور لها، أو استخدم زر «نسخ HEX» الرئيسي في أسفل الشريط.
6. كرر الالتقاط لعدة ألوان — كلها تُحفظ في قائمة «ألوان أخيرة» ويمكنك الرجوع لأي منها بنقرة.

لتغيير الصورة، استخدم أزرار «إضافة» في الشريط الجانبي أو زر الحذف بجانب اسم الملف في أعلى منطقة المعاينة.

عدسة التكبير — لماذا هي مهمة؟

على الشاشة، المسافة بين لونين متجاورين قد تكون بكسلاً واحداً — أصغر من رأس مؤشر الفأرة نفسه. بدون تكبير، النقر على حافة زر قد يلتقط لون الخلفية بدلاً من لون الزر، أو يلتقط بكسل «التنعيم» الرمادي الموجود بين النص وخلفيته.

العدسة في أداة إتقان تعرض المنطقة المحيطة بالمؤشر مكبّرة عشر مرات، مع خطوط تصويب تحدد البكسل الذي سيُلتقط بالضبط عند النقر. المربع الصغير في مركز العدسة هو «الهدف» — تأكد أنه داخل المنطقة اللونية التي تريدها وليس على حدودها، ثم انقر بثقة.

كيف تزيد دقة الالتقاط؟

• استخدم أعلى دقة متاحة: صورة الشعار الأصلية أفضل من نسخة مصغّرة أعيد ضغطها عدة مرات.
• تجنّب صور JPG المضغوطة بشدة: ضغط JPG يضيف «تشويشاً» لونياً حول الحواف؛ التقط من منتصف المساحة اللونية وليس من أطرافها.
• لقطات الشاشة بصيغة PNG أدق: PNG يحفظ الألوان بلا فقدان، بينما JPG قد يغيّر القيم قليلاً.
• انتبه للتدرجات: كثير من الأزرار الحديثة تستخدم تدرجاً لونياً خفيفاً — قد تحتاج التقاط لونَي بداية التدرج ونهايته.
• الظلال والإضاءة في الصور الفوتوغرافية: لون المنتج في الظل يختلف عنه في الضوء؛ التقط من منطقة إضاءة متوسطة ومحايدة.
• سطوع شاشتك لا يؤثر: القيم تُقرأ من بيانات الملف نفسها، فلا تقلق من إعدادات شاشتك — لكن تذكّر أن إدراكك البصري للنتيجة قد يتأثر به.

منتقي الألوان أم أدوات أخرى؟

ماذا تفعل بالكود بعد النسخ؟

كود اللون المنسوخ يعمل في كل مكان تقريباً:

• CSS: ألصقه مباشرة: color: #1A73E8; أو background: rgb(26, 115, 232);.
• Figma وAdobe XD وPhotoshop: افتح لوحة الألوان وألصق قيمة HEX في خانتها (بدون علامة # في بعض البرامج).
• PowerPoint وWord: من «ألوان إضافية» ثم تبويب «مخصص»، أدخل قيم RGB الثلاث.
• Canva: اضغط على مربع اللون ثم «+» وألصق كود HEX.
• أدوات إتقان: استخدم اللون في إتقان أو مولّد الشعارات لإنتاج تصاميم متناسقة فوراً.

نصيحة للفرق: وثّق الألوان المعتمدة في ملف مشترك بصيَغها الثلاث، مع ذكر استخدام كل لون (خلفية، نص، تمييز). هذا يوفّر على كل عضو جديد في الفريق إعادة الالتقاط من الصور.

أخطاء شائعة تجنّبها

• الالتقاط من حافة العنصر: الحواف تحتوي بكسلات انتقالية «منعّمة» بين لونين. استخدم العدسة وصوّب نحو منتصف المساحة.
• الاعتماد على صورة معاد ضغطها: صورة مرّت بواتساب أو ضُغطت عدة مرات تتغيّر ألوانها قليلاً عن الأصل. اطلب الملف الأصلي إن كانت الدقة حرجة.
• التقاط لون واحد لبناء هوية كاملة: لون رئيسي واحد لا يكفي — التقط لوناً للخلفية وآخر للنص وثالثاً للتمييز، وتأكد من التباين بينها.
• تجاهل تباين النص مع الخلفية: لون جميل في صورة قد يكون غير مقروء كخلفية نص. القاعدة العملية: نص داكن على فاتح أو العكس، وتجنب درجتين متقاربتين.
• الخلط بين صيغ الألوان عند اللصق: لصق قيمة RGB في خانة تتوقع HEX يفشل بصمت في بعض البرامج. انتبه للصيغة التي يطلبها البرنامج المستهدف.
• نسيان الألوان الملتقطة قبل تسجيلها: سجل «الألوان الأخيرة» يحفظ آخر 8 ألوان فقط في الجلسة الحالية — انسخ الأكواد المهمة إلى ملفك قبل إغلاق الصفحة.

نصائح عملية

• عند بناء لوحة ألوان، ابدأ بالتقاط اللون الأكثر حضوراً في الصورة ثم استخدم HSL لاشتقاق درجات أفتح وأغمق منه.
• للشعارات الصغيرة داخل لقطات شاشة، قصّ منطقة الشعار أولاً عبر أداة القص ثم ارفعها — التكبير يصبح أسهل.
• التقط الألوان من الصور بإضاءة طبيعية محايدة إن كان الهدف مطابقة منتج حقيقي.
• استخدم زر «نسخ HEX» الرئيسي أسفل الشريط الجانبي كاختصار لآخر لون التقطته — لا تحتاج البحث عن الحقل كل مرة.
• على الجوال، كبّر الصورة بإصبعيك قبل النقر إن كانت النقطة المطلوبة دقيقة.

قائمة تحقق سريعة قبل اعتماد اللون

• هل التقطت من منتصف المساحة اللونية وليس من الحافة؟
• هل الصورة المصدر بجودة جيدة وليست معاد ضغطها؟
• هل جربت اللون على خلفية فاتحة وأخرى داكنة للتأكد من ظهوره؟
• هل التباين كافٍ بين لون النص ولون الخلفية المعتمدين؟
• هل سجّلت الأكواد في ملف الألوان الخاص بمشروعك؟

أسئلة شائعة

هل تعمل الأداة مع لقطات الشاشة؟

نعم، بشكل ممتاز — لقطات الشاشة بصيغة PNG تعطي أدق النتائج لأنها تحفظ الألوان بلا فقدان.

هل تُرفع الصورة إلى الخادم؟

لا. قراءة البكسلات تتم داخل متصفحك بالكامل، والصورة لا تغادر جهازك إطلاقاً.

ما صيغ الصور المدعومة؟

JPG وJPEG وPNG وWebP، بحجم يصل إلى 50 ميجابايت.

لماذا يختلف اللون قليلاً عن الذي أراه في الموقع الأصلي؟

إن التقطت من لقطة شاشة بصيغة JPG، فضغط JPG قد يغيّر القيم قليلاً. استخدم لقطة PNG أو الملف الأصلي للحصول على القيمة الدقيقة.

هل يمكن التقاط أكثر من لون من نفس الصورة؟

نعم، بلا حدود — كل لون تنقره يُضاف إلى قائمة «ألوان أخيرة» (آخر 8 ألوان) ويمكنك الرجوع لأي منها بنقرة واحدة.

هل يعمل على الجوال؟

نعم، الأداة متجاوبة وتعمل على متصفحات الجوال. المس النقطة المطلوبة مباشرة لالتقاط لونها.

ما الفرق بين هذه الأداة وأداة القطّارة في المتصفح؟

بعض المتصفحات توفر قطّارة نظام لكنها غير متاحة في كل المتصفحات ولا على كل الأنظمة. أداة إتقان تعمل في أي متصفح حديث بنفس الطريقة، وتضيف العدسة المكبّرة وسجل الألوان والصيغ الثلاث معاً.

خلاصة

منتقي الألوان من صورة يحوّل أي صورة أو لقطة شاشة إلى مصدر ألوان دقيق: ارفع، صوّب بالعدسة، انقر، وانسخ الكود بالصيغة التي تحتاج. لا تخمين، لا برامج تُثبّت، ولا صور تُرفع لخوادم خارجية. سواء كنت توحّد ألوان عرض تقديمي مع هوية شركتك، أو تحوّل تصميماً إلى كود CSS، أو تبني لوحة ألوان من صورة ملهمة — الأداة تختصر الطريق إلى النتيجة الاحترافية. جرّب منتقي الألوان الآن مجاناً.

الأمان والخصوصية

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

التقط لوناً من صورة الآن، أو تابع مع مولّد الشعارات وإزالة خلفية الصور لإكمال تصميمك.