1

I have these four icons that look like this:

enter image description here enter image description here enter image description here enter image description here

But I want to be able to just have 1 gray icon and then tint them different colors by setting the color in XNA / Monogames Draw function.

I took one of the images and pulled all the colour out and made it a bit lighter it to get

enter image description here

I also tried a version where the center of the gray image is fully white but neither look right in the game, here's an image with the icons on top and my tinted gray on the bottom (the tint color is sampled from the center of the original icons):

enter image description here

I figure there should be a way, given the original icons, to figure out how to make the gray icon and also the colors to plug into the draw function so that I get an exact copy of the original. I assume this is possible? How do you do it?

EDIT:

To elaborate on my issue here is another image all with blue icons, the top images are all the original blue icon for comparison. The bottom images are all grey icons I used to tint to make the middle icons. The grey icons are, from left to right, 0 saturation, 0 saturation and 100 brightness, and auto level + 0 saturation. It seems to me that by setting the saturation to 0 I am losing the ability to make the icon look right as it's not just "darker" blue but also "bluer" blue.

enter image description here

EDIT 2: I don't think it's possible, thanks for the help Goose.

2
  • 1
    Your question is fascinating. I messed around with this for ages tonight and the conclusion I came to is that you are loosing color information by making it black and white. For example, the blue image's brightest color is (100,162,255) and it's dullest color is (0,70,135). The problem is, there's no shade of gray that will ever produce 0 red and 135 blue. At least, not with a multiplying blend mode. Perhaps some other blend mode might work. Jul 23, 2014 at 13:24
  • 1
    I have tackled this problem before, the conclusion I arrived at was to use a kind of a piecewise function with cutoff at 0.5 gray. Here's a writeup I did, including images and code, not sure if I should turn this into an answer. reddit.com/r/gamedev/comments/6bze8v/… Apr 6, 2018 at 11:04

1 Answer 1

1

Would it work if the grey icon was full white at the center (it's brightest point) and got darker from there.

Then you could just sample the color at the center of your source image (the colored ones) and tint with that.

I think the issue you are seeing now is that the grey image will darken the color you are tinting with, so you actually want to tint with the source color PLUS the amount of grey at the brightest point in the image (if that makes sense).

5
  • I did sample from the center of the source images, and also tried making the center white, but in the act of making the gray images center white I think you loose contrast or something. I updated the question with extra info to try to make it clearer.
    – Ian Hern
    Jul 23, 2014 at 4:47
  • 1
    One thing you could try is seeing if you can recreate the look you want in photoshop (or some other paint program) using adjustment layers. That might get you pointed in the right direction for what solution you need. Looking at the updated sample it seems kind of tough, as you are expecting the darker areas to actually get brighter while the lighter areas do not (I think).
    – Goose
    Jul 23, 2014 at 18:43
  • Layers sounds good, it's additive right? SO just putting the grey under the colour with alpha at 50% then?
    – Ian Hern
    Jul 27, 2014 at 9:23
  • 1
    Additive doesn't sound right, since adding blue to white is still white. It seems more like a multiply, but then your dark areas will get darker.
    – Goose
    Jul 28, 2014 at 21:59
  • 1
    The trick is to multiply when it's below middle gray and add otherwise. Apr 6, 2018 at 11:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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