عندما يستخدم التصميم لونًا تريد إعادة استعماله، فإن تقديره بالعين بطيء وغير متسق. تقرأ أداة اختيار اللون من الصورة البكسل الذي تحدده وتعرض قيم HEX وRGB وHSL. افتح أداة اختيار اللون من الصورة، وحمّل صورة أو لقطة شاشة، وانقر على اللون، ثم انسخ القيمة التي تحتاجها.
تقرأ الأداة الصورة داخل المتصفح، وتدعم ملفات JPG وPNG وWebP، وتتيح تكبير اللوحة عندما يصعب تحديد نقطة دقيقة. يمكنك النقر بالماوس أو استخدام مفاتيح الاتجاه، وتبقى عينة لون واحدة نشطة في كل مرة.
ماذا تفعل أداة اختيار اللون من الصورة؟
تأخذ الأداة عينة من بكسل محدد وتحولها إلى صيغ شائعة:
- HEX مناسب لـ CSS وتصميم الويب ومتغيرات التصميم.
- RGB مفيد عندما يتطلب سير العمل قيم الأحمر والأخضر والأزرق.
- HSL يساعد على التفكير في درجة اللون والتشبع والإضاءة.
انقر على نقطة أخرى لاستبدال العينة الحالية، ثم انسخ القيمة الجديدة. يفيد ذلك في مطابقة خلفية أو فحص صورة منتج أو تحويل لون لقطة شاشة إلى قيمة قابلة لإعادة الاستخدام.
كيفية اختيار لون من صورة عبر الإنترنت
1. اختر صورة مصدر واضحة
استخدم الصورة الأصلية أو لقطة شاشة عالية الدقة. قد لا تحتوي الصورة المصغرة المضغوطة أو المعاينة الضبابية أو الصورة ذات المرشح اللوني على اللون الدقيق الذي تريد تكراره.
2. افتح أداة اختيار اللون
افتح أداة اختيار اللون من الصورة واختر ملف JPG أو PNG أو WebP. تتم قراءة الصورة في المتصفح، لذلك لا تحتاج إلى رفعها إلى خادم لخطوة أخذ العينة.
3. حدد البكسل المطلوب
انقر على الجزء الذي تريد معرفة لونه. في الخلفية المسطحة، ابتعد عن الحواف والظلال. في المنتج أو الرسم، اختر مساحة ممثلة بدل انعكاس أو لمعان أو حافة مضادة للتعرج. استخدم التكبير عند الحاجة.
4. انسخ رمز اللون
انسخ HEX عندما تحتاج لون CSS، أو استخدم RGB وHSL عندما يتطلبها نظام التصميم أو الأداة التالية. ألصق القيمة في الكود أو ملف التصميم أو ملاحظات العلامة، ثم راجعها في المكان الفعلي الذي ستستخدم فيه.
كيف تحصل على عينة لون أكثر موثوقية؟
يتأثر اللون الظاهر في الصورة بالإضاءة والظلال والانعكاسات والضغط والشاشة. أخذ عينة من بكسل واحد يعطي قيمة ذلك البكسل، لكنه لا يستعيد بالضرورة لون العلامة الأصلي الذي ربما تغير أثناء التصوير أو المعالجة.
في الرسم المسطح، اختر منطقة وسطية ذات تعبئة متجانسة. في الصورة الفوتوغرافية، خذ عدة عينات من المادة نفسها وقارنها. تجنب الحواف والنصوص ذات التعرج والأسطح اللامعة.
إذا كانت الصورة كبيرة جدًا، استخدم أداة تغيير حجم الصورة لإنشاء نسخة عمل مع الاحتفاظ بالأصل. وإذا كانت هناك حدود مشتتة، استخدم أداة قص الصورة قبل أخذ العينات.
أي قيمة أستخدم: HEX أم RGB أم HSL؟
استخدم HEX لأنماط الويب
HEX مختصر وشائع في CSS ومتغيرات التصميم والتوثيق. يمكن لصق قيمة مثل #2F80ED مباشرة في ورقة الأنماط أو متغير اللون.
استخدم RGB للقنوات والشفافية
يعرض RGB قيم القنوات الثلاث منفصلة. يفيد عند مقارنة القنوات أو تمرير اللون إلى سير عمل رسومي أو تحويله إلى rgba() مع إعداد شفافية منفصل.
استخدم HSL للتغييرات المضبوطة
يفصل HSL بين درجة اللون والتشبع والإضاءة، ما يسهل إنشاء خلفية أفتح أو حد أقل تشبعًا أو حالة تحويم أغمق مع الحفاظ على اللون الأساسي.
أخطاء شائعة عند اختيار الألوان
أخذ عينة من الظل بدل اللون الأساسي
قد يجعل الظل السطح المحايد رماديًا أو يجعل اللون أغمق بكثير. اختر منطقة مضاءة وممثلة وقارن نقاطًا قريبة.
اختيار بكسل على الحافة
قد تحتوي الحواف على بكسلات ممزوجة بسبب التعرج أو الضغط. حرك المؤشر إلى وسط الكائن أو الخلفية.
أخذ عينة من لقطة شاشة عليها مرشح
قد يغير الوضع الليلي أو HDR أو ملف الألوان طريقة ظهور الصورة. عندما يكون اللون مهمًا، استخدم الملف الأصلي أو لقطة غير معدلة وتحقق من النتيجة في التطبيق المستهدف.
اعتبار عينة واحدة لوحة ألوان كاملة
تحدد الأداة اللون الذي تنقر عليه وتحتفظ بعينة نشطة واحدة، لكنها لا تستنتج لوحة كاملة تلقائيًا. خذ عينات الألوان الرئيسية واحدة تلو الأخرى وسجّل دور كل لون.
نسيان سياق الاستخدام
قد يبدو اللون مختلفًا بجانب خلفية أخرى أو على شاشة مختلفة. اختبر القيمة المنسوخة في الصفحة أو المكوّن أو الإعلان أو ملف التصميم الفعلي، وراجع التباين والوضوح.
سير عمل بسيط لتسليم التصميم
- احتفظ بالصورة الأصلية كمرجع.
- خذ عينات الخلفية والموضوع والنص واللون المميز كلٌّ على حدة.
- سجّل كل قيمة HEX مع دور واضح بدل رقم فقط.
- استخدم RGB أو HSL عندما يحتاج التنفيذ أو التغيير إلى ذلك.
- افحص التباين وحالات التحويم وحجم العرض قبل النشر.
استخدم ضاغط الصور بعد الانتهاء من أخذ العينات فقط، وحوّل نسخة التسليم إلى PNG إلى WebP عندما يدعم الوجهة، مع الاحتفاظ بالمصدر لفحوص الألوان المستقبلية.
الأسئلة الشائعة
كيف أختار لونًا من صورة؟
افتح أداة اختيار اللون من الصورة، واختر JPG أو PNG أو WebP، وانقر على البكسل المطلوب، ثم انسخ قيمة HEX أو RGB أو HSL.
كيف أجد رمز HEX من صورة؟
حمّل الصورة في أداة اختيار HEX من الصورة، وانقر على بكسل ممثل، وانسخ قيمة HEX الظاهرة.
هل يمكنني اختيار لون من لقطة شاشة؟
نعم. تعامل الأداة مع لقطة الشاشة مثل أي صورة مدعومة. للحصول على نتيجة أقرب، استخدم لقطة غير مضغوطة وتجنب الحواف والظلال ومرشحات الشاشة.
هل يمكن اختيار عدة ألوان؟
نعم، لكن عينة واحدة تكون نشطة في كل مرة. انقر على كل نقطة وسجّل أو انسخ القيمة قبل اختيار النقطة التالية.
هل أداة اختيار اللون خاصة؟
تتم خطوة أخذ العينة في المتصفح بعد تحميل الصفحة، ولا يلزم رفع الصورة إلى خادم لقراءة البكسل.
مواصلة استخدام أدوات الصور
استخدم أداة اختيار اللون من الصورة عندما تحتاج قيمة لونية من صورة أو لقطة شاشة. استخدم أداة قص الصورة لإزالة الحدود، وأداة تغيير حجم الصورة لنسخة العمل، وضاغط الصور لملف التسليم النهائي.