It is currently March 28th, 2024, 1:30 pm

ColorMatrix setting method and some usage examples

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

ColorMatrix setting method and some usage examples

Post by kenz0 »

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]
Image

[Grayscale]
Image

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]
Image

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]
Image

Code: Select all

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

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]
Image

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]
Image

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]
Image

Code: Select all

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

Additional Tips:

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

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

Image

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.

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,

Image

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.
User avatar
maminscris
Posts: 509
Joined: April 24th, 2009, 3:17 pm
Location: Bucharest, Romania Lat 44,43° Lon 26,1°
Contact:

Re: ColorMatrix setting method and some usage example

Post by maminscris »

:shock: wow this should be in the manual
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: ColorMatrix setting method and some usage example

Post by jsmorley »

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

Re: ColorMatrix setting method and some usage examples

Post by killall-q »

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

Re: ColorMatrix setting method and some usage examples

Post by jsmorley »

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

Re: ColorMatrix setting method and some usage examples

Post by UNleash »

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

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

Re: ColorMatrix setting method and some usage examples

Post by burnwell88 »

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 :D .....
User avatar
kenz0
Developer
Posts: 263
Joined: July 31st, 2009, 2:23 pm
Location: Tokyo, JPN
Contact:

Re: ColorMatrix setting method and some usage examples

Post by kenz0 »

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

Re: ColorMatrix setting method and some usage examples

Post by Chewtoy »

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?
User avatar
220v110
Posts: 26
Joined: February 17th, 2014, 1:33 pm

Re: ColorMatrix setting method and some usage examples

Post by 220v110 »

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