تغيير ألوان الصورة باستخدام css

نعم يمكنك ذلك باستخدام المرشحات أو ما يعرف بالفلاتر, هناك العديد من الفلاتر ولكل منها استخدام مختلف
هذا شكل الصورة قبل استخدام الفلاتر
والآن لنستخدم احدى الفلاتر على الصورة
لاحظ لو سمحت الكود الآتي

// كود Html
<img src="test.png" alt="">

// كود css
img{
filter: brightness(0.25);
}

سوف تكون النتيجة كالأتي
تستطيع استخدام اكثر من فلتر في نفس الوقت, لاحظ الكود الاتي لو سمحت

img{
    filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(130deg) brightness(95%) contrast(80%); 
}

سوف تكون النتيجة كالتالي
تستطيع التعديل في قيمة الفلاتر كما يحلو لك

يمكنك استخدام  filter لتغيير الوان الصورة ككل  فمثلا لا حظ الصورتين في الاسفل

      .image-1 {
        filter: invert(100%);
        -webkit-filter: invert(100%);
      }
      .image-2 {
        filter: sepia(100%);
        -webkit-filter: sepia(100%);
      }

باستخدام الفلاتر يتغير لون الصورة ليصبح بالشكل التالي

أما اذا كنت تريد تغيير جزء معين من الصورة فيمكنك ادخال الصورة الى photoshop ثم تقوم بتقطيع الجزء الذي تريد تلوينه الى layer لوحده ثم  تقوم بتلوينه باللون المراد و تحفظ الصورة ككل ك svg

ثم ب css تقوم بتغيير ال blend mode

.image svg {
  mix-blend-mode: multiply;
}

لتتحصل على الاتي

يمكنك استخدام خاصية filter في css وتستخدم هذه الخاصية بهذا الشكل 

.img{
	filter: saturate(3);
}

هناك عدة فلاتر ومنها: 

• saturate(): تستخدم لضبط تشبع الصورة.
• brightness : تستخدم لضبط سطوع الصورة.
• contrast(%): تستخدم لضبط تباين الصورة.
• drop-shadow(h-shadow v-shadow blur spread color) : تستخدم لضبط الظل المسقط على الصورة.
• grayscale(%) تستخدم لتحويل الصورة إلى التدرج الرمادي.
• hue-rotate(deg): تستخدم لتطبيق تدوير على الصورة.
• invert(%): تستخدم لعكس العينات في الصورة.
• opacity(%): تستخدم لضبط مستوى التعتيم للصورة.
• sepia(%): تحول الصورة إلى بني داكن.
• blur(px): تستخدم لتطبيق تأثير التمويه على الصورة.