In my rhythm game, I have a note object which can be of a different color depending on the note chart. I could use a sprite sheet with all the different color variations I use, but I would prefer to parametrize this. (Each note sprite is made of different shades of a hue. For example a red note has only red, light red and dark red.)

How can I colourise a sprite anew?

I'm working with OpenGL, but any algorithm or math explanation will do. :)


2 Answers 2


I'd probably use a single color image (eg. your note-sprite) with alpha channel and then color the whole image with your base-color. So, something like in the following image (from wikimedia commons):

image of a music-note

If your color was red, you would then color the note (all the black parts) with the same red. What you would need in addition, is a grayscale image with the shading of the note. Then combine the shading with the flat color by using blend-modes like Multiply and/or Screen.

Another, probably simpler approach would be to just have a grayscale image where you would multiply each color component with your selected color. So if you have a gray value of 0.5, and a red color RGB(1.0, 0.0, 0.0), that would result in RGB(0.5, 0.0, 0.0) for the given pixel.

Update: Here's an example image to illustrate what I mean with the blend-modes:

blending layers

Of course you could just use the shadow layer if you don't need the highlights (which is basically the same as the simpler approach mentioned above).

  • 2
    \$\begingroup\$ This is so off-topic but I got to ask - how did you make that second image? \$\endgroup\$
    – DMan
    Feb 12, 2011 at 4:18
  • \$\begingroup\$ @DMan Photoshop for the different note images and then Illustrator to arrange stuff ;) \$\endgroup\$
    – bummzack
    Feb 12, 2011 at 10:10
  • \$\begingroup\$ Thanks for your explanation. :) Is it possible to do the blend into a fragment shader ? Or is it preferable to stay with the opengl blend function and render the 3 images separately ? \$\endgroup\$
    – Mr_Qqn
    Feb 12, 2011 at 11:31
  • \$\begingroup\$ I'm not a shader expert, but from my limited knowledge I'd say it shouldn't be a problem. Alternatively you could just pre-calculate the images you need on the CPU? \$\endgroup\$
    – bummzack
    Feb 12, 2011 at 12:04
  • \$\begingroup\$ Yes, for the moment I will generate a sprite sheet with all the variations. \$\endgroup\$
    – Mr_Qqn
    Feb 12, 2011 at 16:46

Make a greyscale (or just white) version of the image you want to show, with a suitable alpha channel. Use the vertex color to "dye" the image.

Vertex color multiplies each channel, so white x red = red, 50% grey x red = 50% red, and so on.

  • \$\begingroup\$ Problem with this is that the shading won't be recognizable when using bright colors (for example yellow). \$\endgroup\$
    – bummzack
    Feb 11, 2011 at 23:00
  • \$\begingroup\$ Not sure what you mean. Black or very dark grey in the greyscale image multiplied by very bright yellow is still black or very dark yellow. \$\endgroup\$
    – ggambetta
    Feb 11, 2011 at 23:02
  • \$\begingroup\$ BTW, I'm sorry, I hadn't seen the "probably simpler approach" in your answer. \$\endgroup\$
    – ggambetta
    Feb 11, 2011 at 23:04
  • 1
    \$\begingroup\$ You're right about the multiplying. I was mixing things up. Lack of coffee I guess. \$\endgroup\$
    – bummzack
    Feb 11, 2011 at 23:55
  • \$\begingroup\$ Thanks for your answer, but as I'm learning opengl 3 I'd prefer to use the other method. :) \$\endgroup\$
    – Mr_Qqn
    Feb 12, 2011 at 11:35

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .