كيف تنتقي أي لون من صورة عبر الإنترنت (احصل على HEX وRGB وHSL)

يصطدم كل مصمم ومطوّر وصانع محتوى بالموقف نفسه في النهاية: تجد لوناً يعجبك داخل صورة — صورة فوتوغرافية أو لقطة شاشة أو شعار أو لوحة إلهام — وتحتاج إلى قيمته الدقيقة. ربما تريد مطابقة زر مع صورة هوية تجارية، أو استخراج لوحة ألوان من غروب الشمس، أو إعادة إنشاء تدرّج من لقطة شاشة. أسرع طريقة لذلك هي أداة انتقاء الألوان من الصور عبر الإنترنت تعمل بالكامل داخل متصفحك. يشرح هذا الدليل كيفية عمل ذلك، ولماذا تهمّ المعالجة داخل المتصفح، وكيف تستخدم أداة انتقاء الألوان من الصور في BrowseryTools للحصول على قيم HEX وRGB وHSL من أي صورة في ثوانٍ.

ماذا تفعل أداة انتقاء الألوان فعلياً

تقرأ الأداة بيانات البكسل الخام للصورة وتُبلغ عن لون أي بكسل تشير إليه. خلف الكواليس، تُرسم الصورة على عنصر <canvas>، وتُعيد واجهة getImageData في المتصفح قنوات الأحمر والأخضر والأزرق والشفافية لأي إحداثية. هذه الأرقام الأربعة هي كل ما تحتاجه لحساب جميع صيغ الألوان الشائعة. لا يوجد خادم، ولا رفع، ولا تخمين — مجرد بايتات صورتك تُقرأ مباشرةً على جهازك.

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

HEX وRGB وHSL — ومتى تستخدم كلاً منها

تمنحك الأداة ثلاث صيغ لكل لون، لأن كلاً منها مفيدة في سياق مختلف.

• HEX (مثل #3366FF) هي الصيغة الأكثر شيوعاً في أدوات الويب والتصميم. مختصرة وتُلصق بسهولة في CSS وFigma وملفات إعدادات Tailwind.
• RGB (مثل rgb(51, 102, 255)) تكشف القنوات الفردية، وهي مفيدة عند الحاجة إلى الشفافية عبر rgba() أو عند معالجة الألوان برمجياً.
• HSL (مثل hsl(225, 100%, 60%)) تصف اللون عبر درجة اللون والتشبع والإضاءة. وهي أسهل صيغة لبناء الدرجات الفاتحة والداكنة يدوياً، لأنك ببساطة ترفع الإضاءة أو تخفضها.

عندما تحتاج إلى الحصول على HEX من صورة لملف CSS، انسخ قيمة HEX. وعند بناء نظام تصميم بدرجات متسقة، استخدم HSL. تُبقي الأداة الصيغ الثلاث متزامنة فلا تضطر للتحويل يدوياً.

كيف تنتقي لوناً من صورة

1. افتح أداة انتقاء الألوان من الصور وأفلِت صورتك في منطقة الرفع (PNG أو JPG أو WebP أو GIF أو BMP).
2. حرّك المؤشر فوق الصورة. تتبع عدسة مكبّرة مؤشرك، وتعرض البكسلات الموجودة تحته وقيمة HEX المباشرة — مثالية للوقوف على بكسل واحد بدقة.
3. انقر لتثبيت اللون. تظهر قيم HEX وRGB وHSL مع أزرار نسخ بنقرة واحدة.
4. يُحفظ كل لون تنقر عليه في سجل مستمر، فتبني لوحة ألوان دون فقدان الانتقاءات السابقة.

لوحة الألوان السائدة

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

حالات استخدام واقعية

• مطابقة الهوية: استخرج الأزرق الدقيق من لقطة شعار شركة لتطابق أزرارك تماماً.
• إعادة إنشاء التصميم: أعِد بناء تدرّج أو نظام ألوان رأيته في لقطة شاشة دون تخمين.
• التصوير والفن: أخذ عينات من الدرجات السائدة في منظر طبيعي لبناء لوحة منسجمة.
• فحوص إمكانية الوصول: التقط ألوان المقدمة والخلفية من لقطة واجهة لاختبار التباين في مكان آخر.

لماذا المعالجة داخل المتصفح أفضل من الرفع

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

نصائح لانتقاء دقيق

استخدم العدسة المكبّرة عند أخذ عينات من خطوط رفيعة أو حواف نصوص أو تدرّجات، حيث يغيّر انحرافٌ بمقدار بكسل واحد القيمة. إذا كانت الصورة مضغوطة بصيغة JPEG بشدّة، فقد تتفاوت البكسلات المتجاورة قليلاً، فخذ عينات من عدة مواضع وقارن. وللألوان التجارية الصلبة، يمنحك أي بكسل في المنطقة المسطّحة القيمة الدقيقة.

ابدأ الآن

سواء احتجت قيمة HEX واحدة أو لوحة كاملة، تُوصلك أداة انتقاء الألوان من الصور إلى هدفك في ثوانٍ — مجاناً وبخصوصية تامة وبالكامل داخل متصفحك. اقرنها مع محوّل الألوان لضبط أي لون تنتقيه عبر HEX وRGB وHSL.