13,149,756 members (82,367 online)
alternative version

#### Stats

390K views
92 bookmarked
Posted 11 Mar 2003

# ColorMatrix Basics - Simple Image Color Adjustment

, 2 Apr 2003
 Rate this:
A beginners guide to using the GDI+ ColorMatrix.

## Introduction

This article discusses color operations on digital images, using the new `ColorMatrix` class provided by GDI+. The `ColorMatrix` is a welcome addition to the GDI library, especially with the increase in demand of digital imaging applications, as more and more consumer products are made available. This class, as well as many other new GDI classes, provide more control to the developer and reduce dependence on 3rd party applications such as LEAD tools, and others. Some basic knowledge of matrix operations (multiplication, addition, etc), the RGBA colorspace and GDI+ is assumed.

## Background

`ColorMatrix` operations are performed in the RGBA colorspace (red, green, blue, alpha). A `ColorMatrix` consists of a 5x5 matrix, with color values normalized to 1 for full intensity (255 -> 1.0). You might expect the matrix to be 4x4 ( [R, G, B, A] ), which would be sufficient if we only needed to perform linear transformations (multiplication: scaling, rotation, etc). However, one of the most frequent color manipulations, color adjustment, requires adding color values. This is a non-linear operation, referred to as a translation. Adding a 5th element to the color vector ( [R, G, B, A, w] ) combines these two operations, linear and non-linear, into a single operation called an affine transformation. The 5th element of the color vector is simply a dummy element, always with a value of 1, which only serves to allow a translation (addition) of the color vector.

The example below scales the color vector [255, 128, 102, 255] by .5 and then adds a value of 26 to the R, G and B components, leaving the A component at full intensity. Remember that the component values are normalized, with full intensity, 255, equal to 1.0 (values have been rounded to the nearest tenth). Also notice the addition of the 5th element to the color vector, which is simply ignored in the resultant color vector.

This takes the color and transforms it to .

Now that we've covered the basic principle of the `ColorMatrix` and it's operations on color vectors, we can start exploring some practical uses.

## Applying the code

Applying a `ColorMatrix` to an image is quite simple. You must first associate a `ColorMatrix` object with an `ImageAttributes` object. Then you simply pass the `ImageAttributes` object as a parameter to the `Graphics.DrawImage` method.

Color adjustment is one of the more common color operations applied to digital images. The code to do this might look as follows:

```Public Function translate(ByVal img As Image, ByVal red As Single, _
ByVal green As Single, ByVal blue As Single, _
Optional ByVal alpha As Single = 0) As Boolean

Dim sr, sg, sb, sa As Single

' noramlize the color components to 1
sr = red / 255
sg = green / 255
sb = blue / 255
sa = alpha / 255

' create the color matrix
dim New ColorMatrix(New Single()() _
{New Single() {1, 0, 0, 0, 0}, _
New Single() {0, 1, 0, 0, 0}, _
New Single() {0, 0, 1, 0, 0}, _
New Single() {0, 0, 0, 1, 0}, _
New Single() {sr, sg, sb, sa, 1}})

' apply the matrix to the image

End Function

Private Function draw_adjusted_image(ByVal img As Image, _
ByVal cm As ColorMatrix) As Boolean

Try
Dim bmp As New Bitmap(img) ' create a copy of the source image
Dim imgattr As New ImageAttributes()
Dim rc As New Rectangle(0, 0, img.Width, img.Height)
Dim g As Graphics = Graphics.FromImage(img)

' associate the ColorMatrix object with an ImageAttributes object
imgattr.SetColorMatrix(cm)

' draw the copy of the source image back over the original image,
'applying the ColorMatrix
g.DrawImage(bmp, rc, 0, 0, img.Width, img.Height, _
GraphicsUnit.Pixel, imgattr)

g.Dispose()

Return True

Catch
Return False
End Try

End Function```

Conversion to grayscale is another common conversion. Grayscale values are determined by calculating the luminosity of a color, which is a weighted average of the R, G and B color components. The average is weighted according to the sensitivity of the human eye to each color component. The weights used here are as given by the NTSC (North America Television Standards Committee) and are widely accepted.

```Public Function grayscale(ByVal img As Image) As Boolean

Dim cm As ColorMatrix = New ColorMatrix(New Single()() _
{New Single() {0.299, 0.299, 0.299, 0, 0}, _
New Single() {0.587, 0.587, 0.587, 0, 0}, _
New Single() {0.114, 0.114, 0.114, 0, 0}, _
New Single() {0, 0, 0, 1, 0}, _
New Single() {0, 0, 0, 0, 1}})

End Function```

The code below creates a digital negative:

```Public Function negative(ByVal img As Image) As Boolean

Dim cm As ColorMatrix = New ColorMatrix(New Single()() _
{New Single() {-1, 0, 0, 0, 0}, _
New Single() {0, -1, 0, 0, 0}, _
New Single() {0, 0, -1, 0, 0}, _
New Single() {0, 0, 0, 1, 0}, _
New Single() {0, 0, 0, 0, 1}})

End Function```

Color channel separations, alpha transparency adjustment, image toning (Sepia, etc) are just a few more common operations that can be easily performed with a `ColorMatrix`.

## Share

 Architect United States
Michael has been developing software for about 19 years primarily in C#, C/C++, Fortran, and Visual Basic. His previous experience includes Internet data services (communication protocols, data storage and GIS) for the mortgage industry, oil platform instrumentation and explosives simulation and testing. He holds a B.S. in astrophysics and computer science. He is currently working for Global Software in Oklahoma City developing law enforcement and emergency services related software.

## You may also be interested in...

 First PrevNext
 Great but a couple typos Member 1146521410-Apr-17 3:52 Member 11465214 10-Apr-17 3:52
 Thanks Member 1207749530-Nov-15 17:37 Member 12077495 30-Nov-15 17:37
 My Vote 5. Nathan Ferreira4-Dec-14 0:20 Nathan Ferreira 4-Dec-14 0:20
 My vote of 1 Xmen W.K.6-Jul-10 3:01 Xmen W.K. 6-Jul-10 3:01
 My vote of 4 joerg-schumann29-Jun-10 1:46 joerg-schumann 29-Jun-10 1:46
 I have an error "A Graphics object cannot be created from an image that has an index" rpiniones7-Apr-10 0:46 rpiniones 7-Apr-10 0:46
 aspx file ? How to call in a page to see resluts ? Alain Van haecke9-Jul-09 3:00 Alain Van haecke 9-Jul-09 3:00
 Colorize Image danielku1531-May-09 9:46 danielku15 31-May-09 9:46
 Sub OffsetMatrix incorrect Thomas Nichols17-Mar-09 6:19 Thomas Nichols 17-Mar-09 6:19
 Alpha Channel Bug Andy Davies27-Feb-09 22:09 Andy Davies 27-Feb-09 22:09
 Method for producing a "Color Match"? [modified] Michael Schäuble21-Sep-08 3:29 Michael Schäuble 21-Sep-08 3:29
 Pure Black and White [modified] Luca Crisi, MCP22-May-08 23:44 Luca Crisi, MCP 22-May-08 23:44
 Re: Pure Black and White [modified] Luca Crisi, MCP23-May-08 2:19 Luca Crisi, MCP 23-May-08 2:19
 Re: Pure Black and White Aamir Mustafa9-Oct-08 17:43 Aamir Mustafa 9-Oct-08 17:43
 Re: Pure Black and White Luca Crisi, MCP13-Oct-08 8:27 Luca Crisi, MCP 13-Oct-08 8:27
 Saving Changed Image Format stixoffire19-Sep-07 0:16 stixoffire 19-Sep-07 0:16
 How to Apply *shona13-Aug-07 0:53 *shona 13-Aug-07 0:53
 How to do softlight on an image? freecoke12-Apr-07 6:41 freecoke 12-Apr-07 6:41
 Save File [modified] CarlHackman11-Mar-07 13:22 CarlHackman 11-Mar-07 13:22
 abaout grayscale aimaniez10-Mar-07 13:22 aimaniez 10-Mar-07 13:22
 Understanding The Matrix JonFrost25-Nov-06 23:32 JonFrost 25-Nov-06 23:32
 Coloring a grayscale image kspaun28-Sep-06 2:17 kspaun 28-Sep-06 2:17
 Re: Coloring a grayscale image thefellow3j3-Feb-07 20:32 thefellow3j 3-Feb-07 20:32
 how to do sharpness and blur [modified] singam17-Jul-06 3:35 singam1 7-Jul-06 3:35
 Re: how to do sharpness and blur [modified] wlh21cn19-Jul-06 23:44 wlh21cn 19-Jul-06 23:44
 Strange bug while printing Pugwash200410-May-06 0:23 Pugwash2004 10-May-06 0:23
 Complete Grayscale Class Anonymous3-May-05 10:49 Anonymous 3-May-05 10:49
 Re: How about 256-colored pictures [modified] Luca Crisi, MCP23-May-08 2:30 Luca Crisi, MCP 23-May-08 2:30
 Hue, Saturation and Brightness... AndrewVos1-Apr-05 1:30 AndrewVos 1-Apr-05 1:30
 Re: Hue, Saturation and Brightness... codepunk9-Feb-06 12:29 codepunk 9-Feb-06 12:29
 Re: Hue, Saturation and Brightness... Thomas Nichols17-Mar-09 6:29 Thomas Nichols 17-Mar-09 6:29
 Translucent Example Anonymous19-Mar-05 2:20 Anonymous 19-Mar-05 2:20
 Why doi get an error BigBertB4-Mar-05 1:47 BigBertB 4-Mar-05 1:47
 Re: Why do i get an error Olaf.Rabbachin19-Mar-05 7:03 Olaf.Rabbachin 19-Mar-05 7:03
 Re: Why do i get an error speqter19-Jul-07 20:29 speqter 19-Jul-07 20:29
 Wow! K.h.e.o.p.s14-Dec-04 9:25 K.h.e.o.p.s 14-Dec-04 9:25
 Yeah, fine... Anonymous15-Jun-04 21:31 Anonymous 15-Jun-04 21:31
 Negative matrix correction Konstantin Vasserman20-Nov-03 16:39 Konstantin Vasserman 20-Nov-03 16:39
 Re: Negative matrix correction Anthony Queen24-May-06 5:37 Anthony Queen 24-May-06 5:37
 Re: Negative matrix correction MikeDC18-Sep-06 19:04 MikeDC 18-Sep-06 19:04
 Saving the new changed image Qaiser_Awan21-Oct-03 0:03 Qaiser_Awan 21-Oct-03 0:03
 Re: Saving the new changed image Michael Combs21-Oct-03 4:20 Michael Combs 21-Oct-03 4:20
 Re: Saving the new changed image Qaiser_Awan22-Oct-03 21:40 Qaiser_Awan 22-Oct-03 21:40
 Re: Saving the new changed image thefellow3j3-Feb-07 20:36 thefellow3j 3-Feb-07 20:36
 avg rgb values wiseleyb1-Jul-03 13:25 wiseleyb 1-Jul-03 13:25
 Re: avg rgb values Michael Combs2-Jul-03 4:50 Michael Combs 2-Jul-03 4:50
 Re: avg rgb values MikeDC28-Sep-06 2:38 MikeDC 28-Sep-06 2:38
 Last Visit: 31-Dec-99 18:00     Last Update: 25-Sep-17 7:21 Refresh 12 Next »

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Web01 | 2.8.170924.2 | Last Updated 3 Apr 2003
Article Copyright 2003 by Michael Combs