Custom element to show image shifted to a different color.
Sometimes you want to show an image, usually a logo in different colors. If you had the logo in SVG, then you could easily change the colors using CSS. But what if the image is a png or a jpeg?
recolored-image is a custom-element to show an image color shifted to a target color. You can also save this new image.
This adapted and inspired from @vjeux/image-recolor/ and the related @tweet
Install from npm
npm i recolored-image
or use directly in your web page
<script type="module" src="https://unpkg.com/recolored-image?module"></script>In your HTML
<!-- original image -->
<img src="./logo.png">
<!-- colored versions -->
<recolored-image src="./logo.png" color="#D0021B"></recolored-image>
<recolored-image src="./logo.png" color="#417505"></recolored-image>
<recolored-image src="./logo.png" color="#8B572A"></recolored-image>
You can play with it live on Codesandbox