Coloriser une image en CSS

Salut,

J‘ai pas mal googlé, mais je ne dois taper la mauvaise requête…

Je cherche à coloriser une image comme sous Photoshop. Filtre « couleur ».

Par exemple en red.

Je continue de chercher, mais si vous avez déjà la réponse, je suis preneuse.

Merci beaucoup de votre attention.

//EDIT : j’essaie avec mix-blend-mode: color; mais je ne comprends pas où je dois rajouter la couleur de colorisation.
//EDIT2 : la couleur doit être dans le parent, à priori. Mais ce n‘est pas ce que j’ai fait sous Photoshop, en rajoutant un calque de couleur et le mettant à color. Je vais donc devoir passer mes images par Photoshop, je crois bien. Dommage.
Modifié par myself (24 Aug 2023 - 14:04)

Salut,

Essaie quelque chose comme ceci :

img {
  filter: hue-rotate(0deg);
}

Olivier C a écrit :
Salut,

Essaie quelque chose comme ceci :

img {
  filter: hue-rotate(0deg);
}

Non, ce n‘est pas le rendu Photoshop en question.

En fait, il me faudrait superposer un calque au dessus de l’image, à sa bonne taille, avec un fond de couleur, et un blending mode sur la couleur.

Je continue de chercher.
Modifié par myself (24 Aug 2023 - 14:58)

Oui, tu as en effet quelques options via filter, mix-blend-mode et des calques , mais rien de convaincant.

petite démo : https://codepen.io/gc-nomade/pen/jOXbNym en partie inspiré de https://codepen.io/gc-nomade/pen/PoPbOd

cdt

Merci. En effet, ça se rapproche le plus de l‘effet recherché. Mais je crois que le plus simple reste d’écraser mes images par la version colorisée sous Photoshop.

L‘inconvénient de la méthode : les miniatures Google et Pinterest, par exemple, seraient toutes en bichro également, sans offrir une vignette toute colorée (chamarrée).

Oh là là, merci Raphael pour cette démonstration. C’est super.

Bon week-end à toustes.