Game Development Stack Exchange is a question and answer site for professional and independent game developers. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I have a texture and I want to "colorize" it with a given color, lets say cyan (#00ffff) or purple (#800080). What I want to do, is get all the pixel values from the texture, and remove the color and keep the "brightness" and "saturation" and apply to the desired color. There is a tool in GIMP to do this called Colorize (Colors -> Colorize.. while editing), I made an example below.

This is will all be done in a shader (GLSL), although this is probably a general algorithm.

enter image description here

share|improve this question
up vote 2 down vote accepted

This live demo uses the algorithm described by @Dries in a fragment shader to colorize the incoming fragment color.

It basically can be summarised by:

vec4 getInputColor()
    TODO: sample from a texture / use a uniform var / varying ...

vec4 toGrayscale(in vec4 color)
  float average = (color.r + color.g + color.b) / 3.0;
  return vec4(average, average, average, 1.0);

vec4 colorize(in vec4 grayscale, in vec4 color)
    return (grayscale * color);

void main()
  // This is the color you want to apply
  // in the "colorize" step. Should ultimately be a uniform var.
  vec4 c = vec4(0.0, 1.0, 1.0, 1.0);

  // The input fragment color.
  // Can come from a texture, a varying or a constant.
  vec4 inputColor = getInputColor();

  // Convert to grayscale first:
  vec4 grayscale = toGrayscale(inputColor);

  // Then "colorize" by simply multiplying the grayscale
  // with the desired color.
  vec4 colorizedOutput = colorize(grayscale, c);

  // Done!
  gl_FragColor = colorizedOutput;
share|improve this answer
This would be better as a comment, since without the link, it's a very vague answer. – Byte56 May 31 '14 at 22:04
@Byte56 Without the link? – glampert May 31 '14 at 22:06
Yes. In the future, if the link were to no longer point to anything, this answer would be no good. – Byte56 May 31 '14 at 22:44
Why, the only way it can happen is if the website goes offline, and this can happen even with Wikipedia. I'm pretty sure the shader source is encoded in the URL, so it doesn't have an expiration date. But to be sure, I'll post a code snippet here then... – glampert May 31 '14 at 23:20

If you want it exactly like the thing above you'll first have to make your render grayscale.

You can do this in the pixel shader by taking a sample of the texture you were using (or only the color doesn't matter). Make a sum of the r, g and b value and divide that by 3. Return that value as the rgb values from the pixel shader.

Then do this (with or without the grayscale). Multiply the color of your texture (or the value of the grayscale) with the color you want.

Return that value in your pixel shader and that should be it.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.