I have this image in my website, is a png:
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.Sign up to join this community
I'm not sure this belongs on GD, but...
It can be done using HTML5's
CANVAS element, here's a super quick & dirty:
BUT YOU DON'T WANT TO DO THIS!
getImageDatarequires privilege elevation unless the source images are hosted on the same domain as the script. You can't use any hosting services unless you want to bother users with priv-escalation prompts.
canvasimplementation could change.
You can save CPU cycles for you and your users by just creating the colors you need server-side (there are scripts that can do this for you) and serving them the colors they need. You only want to use
canvas for this if you have no other choice (e.g. the user is determining the color on the fly).
Similar questions have also been asked on SO a few times: