ColorMatrix Guide


Tip by kenz0

The ColorMatrix option represents a 5x5 matrix used to manipulate the color values of an image in an Image meter. It is divided into five separate parameters, one for each row, each numbered. The default matrix is as follows:

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=0; 0; 0; 0; 1

The values on the main diagonal are, from top-left to bottom-right: Red, Green, Blue, Alpha and a placeholder. The values represent the percentage of of the particular value present in the image, where 0.0 is none and 1.0 is normal. The remaining entries in the matrix allow a color to have its value modified in terms of another color (ex: the value of Red might have half of the Blue value added), with the entries in the final row (ColorMatrix5) determining offset values that are added directly to the color. (ex: ColorMatrix5=0.5; 0; 0; 0; 1 will add 50% to the red value)

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

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:

     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 docs.microsoft.com for an excellent explanation on this topic in relation to the usage of the ColorMatrix object. [Source from Code Project]

Apply the above method to an actual Rainmeter config

You can set the value in [Variables] arbitrarily.
Default value:

  • Brightness = 0
  • Contrast = 1
  • Saturation = 1

[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 a color filter

[Original Image]



[Grayscale]

;GreyScale
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]

;Invert
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]

;Swap RGB to BGR
ColorMatrix1=0;0;1;0;0
ColorMatrix2=0;1;0;0;0
ColorMatrix3=1;0;0;0;0


[Sepia Color]

;Sepia Color
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


[Black & White]

;Black & White
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]

;Polaroid Color
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]

;White to Alpha
ColorMatrix1=1;0;0;-1;0
ColorMatrix2=0;1;0;-1;0
ColorMatrix3=0;0;1;-1;0


Additional Tips

Create a realistic old photo using ColorMatrix.

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

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 an image of some old paper and overlay it on the original image.

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

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 for this effect:

[Original]
Meter=Image
ImageName=ColorMatrixOriginal.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=ColorMatrixOldPaper.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