منتقي الألوان
التقط الألوان من أي صورة، أو من الشاشة في المتصفحات التي تدعم ذلك.
واجهة الأداة نفسها باللغة الإنجليزية حاليًا، وتعمل بالكامل داخل متصفحك.
جارٍ تحميل الأداة…
التقاط اللون من صورة
منتقي الألوان يقرأ قيمة بكسل واحد ويعرضها بالصيغ التي تحتاجها: الست عشرية لـ CSS، وقنوات RGB، وHSL لأعمال التصميم. تُفك الصورة على لوحة رسم، والضغط على نقطة يعيد قيم الأحمر والأخضر والأزرق المخزنة في تلك الإحداثيات بالضبط. وفي المتصفحات التي تدعم واجهة EyeDropper، مثل Chrome وEdge، يمكنك أيضًا التقاط لون من أي مكان على شاشتك.
ويأتي مع ذلك تنبيهان عمليان. الصور الفوتوغرافية فيها تشويش، فالبكسلات المتجاورة في منطقة تبدو مسطحة قد تختلف بوضوح؛ لذا جرّب عدة نقاط قريبة وخذ القيمة المتكررة. وضغط JPEG يزيح الألوان قليلًا، خاصة قرب الحواف، فاللون الملتقط من لقطة شاشة مضغوطة لشعار قد يختلف درجة عن القيمة الرسمية. وفي أعمال الهوية البصرية، تحقق دائمًا من الملف المصدر أو دليل الهوية.
لماذا أنشأنا هذه الأداة
يستخرج المصممون والمطورون الألوان من الصور باستمرار: مطابقة ملف التنسيق لنموذج تصميم، أو استخلاص لوحة ألوان من صورة، أو معرفة لون علامة تجارية من لقطة شاشة، أو التحقق من أن الواجهة المنفذة تطابق تصميمها.
ولقطات الشاشة لواجهات غير منشورة وملفات الهوية البصرية للعملاء ليست مما يُرفع إلى موقع من أجل قراءة بكسل واحد. أداتنا ترسم الصورة على لوحة رسم داخل متصفحك وتلتقط اللون محليًا، فلا تغادر الصورة جهازك، وتظهر النتيجة فورًا. لا رفع، ولا حساب، وتستمر في العمل دون اتصال.
نصائح وأخطاء شائعة
- جرّب عدة بكسلات متقاربة في المناطق المشوشة وخذ القيمة المتكررة بدلًا من الأولى.
- الألوان الملتقطة من لقطة شاشة مضغوطة قد تختلف درجة؛ تحقق من ألوان الهوية في الملف المصدر.
- افحص نسبة التباين لأي زوج ألوان تنوي استخدامه للنصوص.
- ملفات ألوان الشاشات تختلف، فالقيمة الملتقطة على شاشة قد تبدو مختلفة على أخرى.
بداية سريعة: استخدام منتقي الألوان
- حمّل الصورة التي تريد أخذ اللون منها، أو استخدم «الالتقاط من الشاشة» إن كان متاحًا.
- اضغط على البكسل لقراءة قيمة لونه.
- انسخ الصيغة التي يحتاجها مشروعك: HEX أو RGB أو HSL.
- اختر من الدرجات الفاتحة والداكنة المقترحة إن احتجت تنويعات.
- جرّب بضع نقاط قريبة إذا كانت المنطقة مشوشة، وخذ القيمة المتكررة.
حوّل بين الصيغ أو ابنِ درجات فاتحة وداكنة بأداة محول الألوان.
ما الذي يعطيك إياه منتقي الألوان
أشِر إلى أي بكسل فتعرض الأداة رمز لونه بالصيغ التي يستخدمها المصممون والمطورون:
- HEX: مثل
#3A7BD5، المعيار في الويب وCSS. - RGB: مثل
rgb(58, 123, 213)، اللون نفسه كمقادير من الأحمر والأخضر والأزرق. - HSL: درجة اللون والتشبع والإضاءة، وهي مفيدة لصنع تنويعات.
وامتلاك الرمز الدقيق يعني أنك تستطيع إعادة إنتاج اللون تمامًا في أي مكان بدلًا من التخمين.
بناء لوحة ألوان من صورة
من أفضل الاستخدامات اشتقاق نظام ألوان من صورة فوتوغرافية أو صورة لعلامة تجارية:
- التقط اللون الغالب ليكون لونك الأساسي.
- اختر لونًا مميزًا متباينًا من جزء آخر من الصورة.
- سجّل لونًا فاتحًا وآخر داكنًا للخلفيات والنصوص.
ولوحة الألوان المستخلصة من صورة واحدة تبدو متناغمة بطبيعتها، لأن تلك الألوان تتعايش أصلًا في المشهد الحقيقي.
ملاحظة عن المطابقة الدقيقة
التقاط لون من صورة JPG قد يكون غير دقيق قليلًا، لأن ضغط JPG يزيح قيم البكسلات قليلًا، خاصة قرب الحواف. وللون هوية حاسم، التقطه من مصدر بلا فقدان، كملف PNG أو ملف التصميم الأصلي، لا من صورة مضغوطة. والتقاط بضعة بكسلات متجاورة ومقارنتها يساعدك على إيجاد اللون المقصود فعلًا.
استخدامات شائعة
- مطابقة لون علامة تجارية في تصميم.
- بناء لوحة ألوان من صورة.
- أخذ لون من موقع أو لقطة شاشة لتطبيق.
- إعادة إنتاج درجة لون بدقة في CSS أو مستند.