It is currently October 22nd, 2019, 6:06 pm

## ColorMatrix setting method and some usage examples

Tips and Tricks from the Rainmeter Community
kenz0
Developer
Posts: 264
Joined: July 31st, 2009, 2:23 pm
Location: Tokyo, JPN

### ColorMatrix setting method and some usage examples

The following shows the actual matrix values of the brightness, contrast, and saturation.

Code: Select all

``````Brightness Matrix    Contrast Matrix         Saturation Matrix

R G B A W           R G B A W            R   G   B   A   W

R  [1 0 0 0 0]      R  [c 0 0 0 0]      R  [sr+s sr  sr  0   0]
G  [0 1 0 0 0]      G  [0 c 0 0 0]      G  [ sg sg+s sg  0   0]
B  [0 0 1 0 0]      B  [0 0 c 0 0]      B  [ sb  sb sb+s 0   0]
A  [0 0 0 1 0]      A  [0 0 0 1 0]      A  [ 0   0   0   1   0]
W  [b b b 0 1]      W  [t t t 0 1]      W  [ 0   0   0   0   1]

b = brightness      c = contrast         s  = saturation
t = (1.0 - c) / 2.0  sr = (1 - s) * lumR
Legend                                   sg = (1 - s) * lumG
R = red                                  sb = (1 - s) * lumB
G = green
B = blue                                 lumR = 0.3086  or  0.2125
A = alpha                                lumG = 0.6094  or  0.7154
W = white                                lumB = 0.0820  or  0.0721``````
• The brightness matrix is a simple translation matrix on the RGB elements.
• The contrast matrix is a scaling matrix on the RGB elements. The extra translation parameters in the contrast matrix is used for shifting the base color (when c = 0)from black to gray.
• The saturation matrix re-adjust the RGB color distribution so that at s = 0, R = G = B = luminance brightness in grayscale).
From the above information, we can calculate the proper color matrix to transform a given image. To use all three matrices, we need to multiply them together into one single transformation matrix (using matrix multiplication). The result of multiplication is as follows:

Code: Select all

``````     R G B A W            R G B A W             R   G   B   A   W

R  [1 0 0 0 0]       R  [c 0 0 0 0]       R  [sr+s sr  sr  0   0]
G  [0 1 0 0 0]       G  [0 c 0 0 0]       G  [ sg sg+s sg  0   0]
B  [0 0 1 0 0]    X  B  [0 0 c 0 0]    X  B  [ sb  sb sb+s 0   0]
A  [0 0 0 1 0]       A  [0 0 0 1 0]       A  [ 0   0   0   1   0]
W  [b b b 0 1]       W  [t t t 0 1]       W  [ 0   0   0   0   1]

Brightness Matrix     Contrast Matrix          Saturation Matrix

R      G      B      A      W

R  [c(sr+s) c(sr)  c(sr)    0      0   ]
G  [ c(sg) c(sg+s) c(sg)    0      0   ]
===>    B  [ c(sb)  c(sb) c(sb+s)   0      0   ]
A  [   0      0      0      1      0   ]
W  [  t+b    t+b    t+b     0      1   ]

Transformation Matrix``````
If you want to know more about it, you can check out the MSDN Site for an excellent explanation on this topic in relation to the usage of the ColorMatrix object.

[Source from Code Project]

Applies above method to actual Rainmeter config:
You can set the value in [Variables] arbitrarily.
• Default value:
• Brightness = 0
• Contrast = 1
• Saturation = 1

Code: Select all

``````[Variables]
Brightness=-0.2
Contrast=1.2
Saturation=1.5

[b]
Measure=Calc
Formula=#Brightness#

[c]
Measure=Calc
Formula=#Contrast#

[s]
Measure=Calc
Formula=#Saturation#

[t+b]
Measure=Calc
Formula=((1.0-c)/2)+b

[c(sr)]
Measure=Calc
Formula=c*((1-s)*0.3086)

[c(sg)]
Measure=Calc
Formula=c*((1-s)*0.6094)

[c(sb)]
Measure=Calc
Formula=c*((1-s)*0.0820)

[c(sr+s)]
Measure=Calc
Formula=c*(((1-s)*0.3086)+s)

[c(sg+s)]
Measure=Calc
Formula=c*(((1-s)*0.6094)+s)

[c(sb+s)]
Measure=Calc
Formula=c*(((1-s)*0.0820)+s)

[Image]
Meter=IMAGE
ImageName=cats.jpg
ColorMatrix1=[c(sr+s)];[c(sr)];[c(sr)];0;0
ColorMatrix2=[c(sg)];[c(sg+s)];[c(sg)];0;0
ColorMatrix3=[c(sb)];[c(sb)];[c(sb+s)];0;0
ColorMatrix4=0;0;0;1;0
ColorMatrix5=[t+b];[t+b];[t+b];0;1
DynamicVariables=1
``````
______________________________________________

Some examples of matrix values as color filter:

[Original]

[Grayscale]

Code: Select all

``````ColorMatrix1=0.33;0.33;0.33;0;0
ColorMatrix2=0.59;0.59;0.59;0;0
ColorMatrix3=0.11;0.11;0.11;0;0``````
[Invert]

Code: Select all

``````ColorMatrix1=-1;0;0;0;0
ColorMatrix2=0;-1;0;0;0
ColorMatrix3=0;0;-1;0;0
ColorMatrix5=1;1;1;0;1``````
[Swap RGB to BGR]

Code: Select all

``````ColorMatrix1=0;0;1;0;0
ColorMatrix2=0;1;0;0;0
ColorMatrix3=1;0;0;0;0``````
[Sepia Color]

Code: Select all

``````ColorMatrix1=0.393;0.349;0.272;0;0
ColorMatrix2=0.769;0.686;0.534;0;0
ColorMatrix3=0.189;0.168;0.131;0;0``````
[B/W]

Code: Select all

``````ColorMatrix1=1.5;1.5;1.5;0;0
ColorMatrix2=1.5;1.5;1.5;0;0
ColorMatrix3=1.5;1.5;1.5;0;0
ColorMatrix5=-1;-1;-1;0;1``````
[Polaroid Color]

Code: Select all

``````ColorMatrix1=1.438;-0.062;-0.062;0;0
ColorMatrix2=-0.122;1.378;-0.122;0;0
ColorMatrix3=-0.016;-0.016;1.483;0;0
ColorMatrix5=-0.03;0.05;-0.02;0;1``````
[White to Alpha]

Code: Select all

``````ColorMatrix1=1;0;0;-1;0
ColorMatrix2=0;1;0;-1;0
ColorMatrix3=0;0;1;-1;0``````
_________________________________________________

Now, I attempt to create a realistic old photo using ColorMatrix.

First, adjust each RGB matrix values and increase contrast slightly like this.

Code: Select all

``````ColorMatrix1=0.25;0.25;0.25;0;0
ColorMatrix2=0.5;0.5;0.5;0;0
ColorMatrix3=0.125;0.125;0.125;0;0
ColorMatrix5=0.2;0.2;0.2;0;1``````
Next, find the image of such old paper and overlays it on the original image.

Then, increase contrast of the old paper, and set alpha value of the whole image to 50%.

Code: Select all

``````ColorMatrix1=2;0;0;0;0
ColorMatrix2=0;2;0;0;0
ColorMatrix3=0;0;2;0;0
ColorMatrix4=0;0;0;0.5;0
ColorMatrix5=-0.1;-0.1;-0.1;0;1``````
Result,

Full code is here:

Code: Select all

``````[Original]
Meter=IMAGE
ImageName=cats.jpg
X=0
Y=0
W=380
H=300
ColorMatrix1=0.25;0.25;0.25;0;0
ColorMatrix2=0.5;0.5;0.5;0;0
ColorMatrix3=0.125;0.125;0.125;0;0
ColorMatrix5=0.2;0.2;0.2;0;1

[OldPaper]
Meter=IMAGE
ImageName=oldpaper.jpg
X=0r
Y=0r
W=380
H=300
ColorMatrix1=2;0;0;0;0
ColorMatrix2=0;2;0;0;0
ColorMatrix3=0;0;2;0;0
ColorMatrix4=0;0;0;0.5;0
ColorMatrix5=-0.1;-0.1;-0.1;0;1``````
Last edited by kenz0 on March 4th, 2010, 12:16 am, edited 1 time in total.
.
maminscris
Posts: 522
Joined: April 24th, 2009, 3:17 pm
Location: Bucharest, Romania Lat 44,43° Lon 26,1°

### Re: ColorMatrix setting method and some usage example

:shock: wow this should be in the manual
Zero at programing, zero at writing codes, so far 2 at making images
But I'm good at copy/paste, and I not always like this
jsmorley
Developer
Posts: 19613
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

### Re: ColorMatrix setting method and some usage example

I will be adding this to tips and tricks on the main site as soon as I get a chance.
killall-q
Posts: 285
Joined: August 14th, 2009, 8:04 am

### Re: ColorMatrix setting method and some usage examples

Wow, now ColorMatrix is... easy.
jsmorley
Developer
Posts: 19613
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

### Re: ColorMatrix setting method and some usage examples

UNleash
Posts: 51
Joined: December 13th, 2009, 4:28 am
Location: North-West Germany

### Re: ColorMatrix setting method and some usage examples

You kidding, right? This isn't live and already implemeted?
:ugeek: :ugeek:

Nice, really. :thumbsu:
burnwell88
Posts: 92
Joined: August 13th, 2009, 8:37 am

### Re: ColorMatrix setting method and some usage examples

WOW.....you got skills:D ... i have a question do ..... in adobe photoshop you have an efect on the layer called OVERLAY if you now about it .... is there any way to make that posible?

normal

overlay

this will defenetly improve the looks for the next generation skins .....
kenz0
Developer
Posts: 264
Joined: July 31st, 2009, 2:23 pm
Location: Tokyo, JPN

### Re: ColorMatrix setting method and some usage examples

Unfortunately, the effect like "blend mode" cannot be realized with ColorMatrix.
.
Chewtoy
Moderator
Posts: 1010
Joined: June 10th, 2009, 12:44 pm
Location: Sweden

### Re: ColorMatrix setting method and some usage examples

If it's white, wouldn't you just have to turn down the alpha value to get an effect sort of like the blend effect?
I don't think, therefore I'm not.
220v110
Posts: 26
Joined: February 17th, 2014, 1:33 pm

### Re: ColorMatrix setting method and some usage examples

I found a great app to play with matrices:
http://arcanesanctum.net/colormatrix-viewer/