RGB Image Technique for Colorable Images

[RicardoTM]

I was experimenting with Color Matrices to colorize images without affecting their contrast. Practically I wanted to have full control of how an image looks. This tip I'm about to share is more about design than it is about Rainmeter, but hey, at the end, design is what makes skins look great right?.

I'm referring to designed images, not photographs.

After experimenting for some time I remembered the method that is used on BeamNG (a videogame) to make skins, which probably might be used on a lot of stuff. This method has a drawback of course, the images have to be designed with that in mind. Basically color matrices are just RGB values naturalized (divided by 255), so this method uses a 3x3 matrix for red, green and blue, and we assign those colors to our images, where shadows are red, midtones are green and highlights are blue. This way we can manipulate the image's look pretty easily, we just need to control the amount of each color using their alpha channels.

An image says more than a thousand words:

Captura de pantalla 2024-03-24 001600.jpg

Here, as I said, I used blue to represent white, green to represent color and red to represent black. Controlling the amount of each color helps to establish the maximum contrast the image will have, so, everything that is 100% red will be black and 100% blue will be white. Anything else will be a shade or a tint of whatever color green represents. You can either use color to color gradients or, as I prefer, start with a green layer, then add the blue layer and finally the red layer, I do it with color to transparent gradients.

Now, let's explore why this is useful. Take this background image poiru made for the Illustro skin as an example:

Background.png

If we wanted to change its color to red, we could try with an ImageTint option.

Code: Select all

[Test]
Meter=Image
MeterStyle=ImageStyle
ImageName=#@#bg.png
imagetint=255,0,0

Captura de pantalla 2024-03-24 111532.jpg

But we find out that all it does is change the stroke's color and anything else, even if we use greyscale=1. That's because black has no hue, nor saturation. There's no information, but white on the other hand does have color information, so it can be tinted just fine. So we could just try a color matrix on it instead..

Code: Select all

[Test]
Meter=Image
MeterStyle=ImageStyle
ImageName=#@#bg.png
;We set 1 on all 3 Red color channels:
ColorMatrix1=1;0;0;0;0
ColorMatrix2=1;0;0;0;0
ColorMatrix3=1;0;0;0;0

Only to find out that we get the same result...

Captura de pantalla 2024-03-24 111729.jpg

The color looks much better, but not quite what we want.

Let's do some adjusting on the ColorMatrix:

Code: Select all

[Test]
Meter=Image
ImageName=#@#bg.png
ColorMatrix1=1;0;0;0;0
ColorMatrix2=0;1;0;0;0
ColorMatrix3=0;0;1;0;0
ColorMatrix4=0;0;0;1;0
ColorMatrix5=1;0;0;0;1

Example provided by Yincognito

ColorMatrix.jpg

Well, now that's red, but now the stroke is lost and the shadows are also red (looks nice tho), but is not what we want either, we want to only change the hue, not just make everything red.

So, we know that's not possible unless we spend 3 hours tweaking the matrix until we get where we want. We should just spend that time designing our images for this purpose in the first place.

So, let's redesign the image utilizing the RGB technique:

Background.png

Now, we can assign a color matrix to it

Code: Select all

ColorMatrix1=(R1/255);(G1/255);(B1/255);0;0
ColorMatrix2=(R2/255);(G2/255);(B2/255);0;0
ColorMatrix3=(R3/255);(G3/255);(B3/255);0;0

where
Red=R1,G1,B1
Green=R2,G2,B2
Bue=R3,G3,B3

So this:

Code: Select all

[Test]
Meter=Image
MeterStyle=ImageStyle
ImageName=#@#background.png
ColorMatrix1=(0/255);(0/255);(0/255);0;0 <-- Red
ColorMatrix2=(255/255);(0/255);(0/255);0;0 <-- Green
ColorMatrix3=(255/255);(255/255);(255/255);0;0 <-- Blue

Results on this:

Captura de pantalla 2024-03-24 111048.jpg

Now we can colorize it however we want, we have full control of body, stroke and shadow colors.

Captura de pantalla 2024-03-24 112337.jpg

This would get you the original black with grey stroke look:

Code: Select all

[Test]
Meter=Image
MeterStyle=ImageStyle
ImageName=#@#background.png
ColorMatrix1=(0/255);(0/255);(0/255);0;0 <-- Red
ColorMatrix2=(0/255);(0/255);(0/255);0;0 <-- Green
ColorMatrix3=(85/255);(85/255);(85/255);0;0 <-- Blue

Captura de pantalla 2024-03-24 112954.jpg

This technique has a limitation tho, you are limited to 3 colors max. Unless you simply used black for shadows, normally shadows are black unless you wanted to transform them into a glow effect. So we can take advantage of the fact that black has no color information, so it won't be affected by the color matrices. So you now have 3 colors + black.

Background2.png

Captura de pantalla 2024-03-24 120257.jpg

This method is especially helpful when dealing with more complex designs, like one of my gauges

Captura de pantalla 2024-03-24 173617.jpg

Hopefully I managed to illustrate the use case scenario, what you guys think? Have you used this technique before? Just wanted to share it here since it can be useful on many situations.

[Yincognito]

So we could just try a color matrix on it instead..

Code: Select all

[Test]
Meter=Image
MeterStyle=ImageStyle
ImageName=#@#bg.png
;We set 1 on all 3 Red color channels:
ColorMatrix1=1;0;0;0;0
ColorMatrix2=1;0;0;0;0
ColorMatrix3=1;0;0;0;0

Only to find out that we get the same result...
[...]
The color looks much better, but not quite what we want.
[...]
So what you guys think? Have you used this technique before? Just wanted to share it here since it can be useful on many situations.

Well, the technique is certainly smart, but I'm not sure it is really necessary:

Code: Select all

[Test]
Meter=Image
ImageName=#@#bg.png
ColorMatrix1=1;0;0;0;0
ColorMatrix2=0;1;0;0;0
ColorMatrix3=0;0;1;0;0
ColorMatrix4=0;0;0;1;0
ColorMatrix5=1;0;0;0;1

ColorMatrix.jpg

The above is using the original background image poiru made for the Illustro skin, i.e. the 2nd image you posted above. No modification needed. The change is operated in the ColorMatrix5 option.

I don't know if it's what you envisioned, but if it is, I would suggest making yourself a test skin for the color matrix options (say, one where you can scroll to change each of the 25 values), so you can understand better what each of those values does. Personnally, I never truly understood practically what each value did until I used a matrix where I could change the values at will (I limited the change between -9.99 and 9.99 in my case, which was the plain Rainmeter version of this, which I can't post here since it's 9 GB of images - but you can see the little colored color matrix panels at the bottom of the screenshot). The color matrix guide in the manual is great, but it focuses on slightly different things like the brightness, contrast and saturation relation with the values, and not too much on what each of those values actually mean in practice.

[RicardoTM]

Well, the technique is certainly smart, but I'm not sure it is really necessary:

Code: Select all

[Test]
Meter=Image
ImageName=#@#bg.png
ColorMatrix1=1;0;0;0;0
ColorMatrix2=0;1;0;0;0
ColorMatrix3=0;0;1;0;0
ColorMatrix4=0;0;0;1;0
ColorMatrix5=1;0;0;0;1

ColorMatrix.jpg
The above is using the original background image poiru made for the Illustro skin, i.e. the 2nd image you posted above. No modification needed. The change is operated in the ColorMatrix5 option.

I don't know if it's what you envisioned, but if it is, I would suggest making yourself a test skin for the color matrix options (say, one where you can scroll to change each of the 25 values), so you can understand better what each of those values does. Personnally, I never truly understood practically what each value did until I used a matrix where I could change the values at will (I limited the change between -9.99 and 9.99 in my case, which was the plain Rainmeter version of this, which I can't post here since it's 9 GB of images - but you can see the little colored color matrix panels at the bottom of the screenshot). The color matrix guide in the manual is great, but it focuses on slightly different things like the brightness, contrast and saturation relation with the values, and not too much on what each of those values actually mean in practice.

The problem with your method is that it simply colorizes the whole image, look at the shadows for example. They're also red, as well as the stroke. To find the perfect spot where you could get a different color on each of them, would need a lot of tweaking, and of course, it would only work on that specific image (I think, haven't tried it). Whereas the method I described above will get you consistent results (if you design your images following some rule). The target are images that have light and shadows, there are times we want to preserve the overall look of the image, and only change the color hue without affecting the shadows nor the highlights, so shadows should always be black/grey and light white. Using your method, try making the image white, with a black stroke and black shadows:

Captura de pantalla 2024-03-24 135107.jpg

or maybe a red stroke?

Captura de pantalla 2024-03-24 135221.jpg

What if you wanted it to be dynamic? Using the method I described and the raincolors.lua script I can simply do this, and get any variant I want:

Code: Select all

ColorMatrix1=[&C:matrix('[#Shadow]')];0;0
ColorMatrix2=[&C:matrix('[#Color]')];0;0
ColorMatrix3=[&C:matrix('[#Light]')];0;0

[Yincognito]

The problem with your method is that it simply colorizes the whole image, look at the shadows for example. They're also red, as well as the stroke.

Well, I thought that's what you wanted, given the ImageTint attempt (why else you'd try to use it if you didn't want to tint the whole image?), but obviously I didn't pay enough attention to the other details in your post that refer to different parts of the image - my bad. That being said, it's logical that if you want to treat a part of an image (which is an unit itself) in a different way, you have to either separate image parts either by redesigning the image (like you did), or by using different images to begin with (and have no 3 color limitation). Which of these two is most feasible probably depends on the particularities of the image - an image with gradients will probably be suited for redesigning indeed.

[RicardoTM]

Well, I thought that's what you wanted, given the ImageTint attempt (why else you'd try to use it if you didn't want to tint the whole image?), but obviously I didn't pay enough attention to the other details in your post that refer to different parts of the image - my bad. That being said, it's logical that if you want to treat a part of an image (which is an unit itself) in a different way, you have to either separate image parts either by redesigning the image (like you did), or by using different images to begin with (and have no 3 color limitation). Which of these two is most feasible probably depends on the particularities of the image - an image with gradients will probably be suited for redesigning indeed.

Well, everything was hypothetical, the mentioning of imagetint and the 3x3 matrix had more to do with showing their limitations to better illustrate the use of the RGB method. You know my intention was not even to modify the original illustro background image in the first place. I used it as an example because I was lazy to design something only as an example (I did the ball tho). Maybe that was not clear, my bad. My original intention was to have control of the color of my gauges, which are much more complicated designs than this background image.

Indeed, the use of multiple images will be necessary if we would want to colorize different parts of a complete element, which of course, depends on the project itself. This is not a "necessary" technique, but just wanted to show that it exists and it can be useful for certain projects.

By the way, I added your image and you code to the example, thanks.

[Yincognito]

Well, everything was hypothetical, the mentioning of imagetint and the 3x3 matrix had more to do with showing their limitations to better illustrate the use of the RGB method. You know my intention was not even to modify the original illustro background image in the first place. I used it as an example because I was lazy to design something only as an example (I did the ball tho). Maybe that was not clear, my bad. My original intention was to have control of the color of my gauges, which are much more complicated designs than this background image.

Indeed, the use of multiple images will be necessary if we would want to colorize different parts of a complete element, which of course, depends on the project itself. This is not a "necessary" technique, but just wanted to show that it exists and it can be useful for certain projects.

No worries, you were right to use examples to compare related outcomes, and now the purpose of the technique is crystal clear. Sometimes there are details that only the OP is aware of (especially if related to other specific projects) and laying out the goal of the method in a more "abstract" fashion helps readers better understand where such an approach might be useful.

By the way, I added your image and you code to the example, thanks.

No problem - if it helps illustrate the point you were making, it's all good.

[RicardoTM]

No problem - if it helps illustrate the point you were making, it's all good.

I hope it helps. I also added one of my gauges in the hope it makes it more clear.

[Yincognito]

I hope it helps. I also added one of my gauges in the hope it makes it more clear.

Yeah, well, you didn't have to do it just because it happened that I didn't understand your goal the first time, it's OK. Like I said, from my side, the examples were fine, it's just that it wasn't clearly written somewhere in the beginning that you wanted different parts of the image (contents, border, shadows) to be colored differently, that's all - it was mainly implied based on the results, if careful enough to notice. Then, the examples, even if fewer or vaguely related, would have made sense. But again, that's just me, maybe others reading it got it the first time. Now it's perfectly clear based on our conversation anyway.

[RicardoTM]

Yeah, well, you didn't have to do it just because it happened that I didn't understand your goal the first time, it's OK. Like I said, from my side, the examples were fine, it's just that it wasn't clearly written somewhere in the beginning that you wanted different parts of the image (contents, border, shadows) to be colored differently, that's all - it was mainly implied based on the results, if careful enough to notice. Then, the examples, even if fewer or vaguely related, would have made sense.

Yup, I also edited the beginning because that information was not necessary and you were right about it being misleading from the main topic.

Don't worry, I didn't edit it because you didn't understand, I did it to make it easier to understand. While vaguely related examples may suit experienced guys like you, balala and eclectic, I made it thinking about less experienced people as well, like a walk through the why the technique could be useful. I believe it is important to understand the whys as well as the hows for a topic to be transcendent

I guess it's a normal thing that the experienced read over stuff and just don't get it (or just think they got it and move on) while the less experienced feel like there's missing information. So I was trying to balance it.

But again, that's just me, maybe others reading it got it the first time. Now it's perfectly clear based on our conversation anyway.

Well, that's hard to know given that nobody else has said anything yet but let's hope it is