ملتقط ألوان الصور
ارفع صورة وانقر في أي مكان لالتقاط لونها الدقيق — قيم hex وRGB وHSL، مع لوحة متراكمة لكل الألوان التي اخترتها.
1,191 مشاهدة
انقر على الصورة لالتقاط لون
كيف يعمل التقاط الألوان
عند رفع صورة، تُرسَم داخل عنصر <canvas> الخاص بـ HTML5 داخل المتصفح. والنقر في أي مكان على الصورة يستدعي دالة واجهة برمجة اللوحة القماشية getImageData() عند إحداثيات ذلك البكسل بالضبط، والتي تُعيد قيم قنوات الأحمر والأخضر والأزرق والشفافية الخام المخزَّنة لذلك البكسل — ليست تقريبًا ولا لونًا مأخوذًا من لقطة شاشة، بل نفس البيانات الرقمية التي يستخدمها المتصفح نفسه لرسم الصورة. تُحوَّل تلك القيم الخام بعد ذلك وتُعرض في آن واحد بصيغة hex (مثل #3a7bd5)، وRGB (مثل rgb(58, 123, 213))، وHSL (تدرّج اللون، التشبع، الإضاءة)، بحيث تكون أي صيغة تحتاجها أداة التصميم جاهزة للنسخ.
كل صورة تُعالَج بهذه الطريقة تُفكَّك وتُقرأ ضمن sRGB، وهو فضاء الألوان القياسي الذي تستخدمه الغالبية العظمى من الصور الرقمية والشاشات والكاميرات. وهو الافتراض المعتمد ما لم تتضمن الصورة صراحةً ملف تعريف ألوان مختلفًا، وهو ما يشمل عمليًا كل صور المستهلكين وصور الويب.
ما ينبغي أن تعرفه
- لا يُرفع شيء إلى أي مكان — تحدث العملية بأكملها، من رسم الصورة إلى قراءة بيانات البكسل، محليًا في ذاكرة المتصفح. لا يستقبل أي خادم الصورة مطلقًا.
- القراءة دقيقة وليست تقديرية — لأن getImageData() تُعيد القيمة الحرفية المخزَّنة للبكسل، فإن الدقة تقتصر فقط على جودة الصورة نفسها ومكان وقوع النقرة بالضبط، لا على سطوع الشاشة أو تباينها أو معايرتها.
- الضغط قد يُزيح اللون الحقيقي قليلًا — ضغط JPEG يُحدث متوسطًا للون عبر كتل صغيرة من البكسلات، لذا قد تُعيد صورة مضغوطة بشدة قيمة مختلفة قليلًا عن لون المشهد الأصلي؛ أما PNG وصيغ عدم الفقدان الأخرى فتحافظ على القيمة الملتقطة بالضبط.
- كل لون يُلتقط يُضاف إلى لوحة متراكمة أسفل الصورة، ما يجعل من الممكن أخذ عينات من عدة نقاط في صورة واحدة — سماء، قميص، جدار — وتصدير مجموعة ألوان صغيرة ومتناسقة في جلسة واحدة.
الأسئلة الشائعة
ما مدى دقة اللون الملتقط؟
يقرأ قيمة البكسل الدقيقة من اللوحة القماشية عند النقطة التي نقرت عليها — بدقة الصورة نفسها ودقة نقرتك، ولا يتأثر بمعايرة الشاشة لأنه يقرأ بيانات البكسل الخام، لا ما تدركه عيناك.
هل يرفع هذا صورتي إلى أي مكان؟
لا — تُرسم الصورة على عنصر لوحة قماشية محلي وتُؤخذ عينات منها بالكامل من جهة المتصفح. لا يغادر أي شيء متصفحك.
ما هو sRGB ولماذا هو مهم؟
sRGB هو فضاء الألوان القياسي الذي تستخدمه افتراضيًا معظم الكاميرات الرقمية والهواتف والشاشات وصور الويب. وبما أن كل صورة تقريبًا تُرفع هنا مُرمَّزة بالفعل بصيغة sRGB، فإن قيم hex وRGB وHSL التي تقرؤها هذه الأداة تطابق ما ستُظهره معظم برامج التصميم دون حاجة إلى أي تحويل. الصور المُلتقطة بفضاء ألوان أوسع، مثل Adobe RGB، والتي لم تُحوَّل قد تُظهر تباينًا عند مقارنتها بأدوات تعتمد على sRGB.
لماذا قد يبدو اللون نفسه مختلفًا قليلًا في صورتين؟
ظروف الإضاءة، وتوازن اللون الأبيض، ومعالجة الكاميرا كلها تؤثر في القيم الدقيقة لـ RGB التي تسجلها الكاميرا لما يبدو للعين اللون نفسه — فجدار أبيض مُصوَّر عند غروب الشمس يكتسب صبغة لون دافئة يقرؤها الملتقط بصدق كأبيض مائل قليلًا إلى البرتقالي، لا أبيض نقيًا. كما يمكن لضغط JPEG أن يُحدث إزاحات صغيرة جدًا على مستوى البكسل حول حواف الألوان الحادة.
هل يمكن التقاط الألوان من صورة مُلتقطة بهاتف؟
نعم — أي ملف صورة يستطيع المتصفح عرضه، بما في ذلك JPEG وPNG وWebP ومعظم الصيغ الشائعة الأخرى، يعمل مع هذه الأداة، بصرف النظر عن الجهاز أو الكاميرا المستخدمة لالتقاطها.
أدوات مشابهة
الإبلاغ عن مشكلة
ملتقط ألوان الصور
التعليقات
لا توجد تعليقات بعد — كن أول من يكتب تعليقًا!