Click here to Skip to main content
12,629,978 members (31,342 online)
Click here to Skip to main content
Add your own
alternative version


49 bookmarked

Create Custom Color Maps in C#

, 15 May 2007
Rate this:
Please Sign up or sign in to vote.
This article shows how to create various custom color maps


In C#, there is a default ColorMap class, defined in the System.Drawing.Imaging namespace. This class defines a mapping between existing colors and the new colors to which they are to be converted. When the map is applied, any pixel of the old color is converted to the new color. This class is useful for image processing applications.

However, in some graphics and chart applications, you may need the custom color maps to achieve specific visual effects. These color maps are simply tables or lists of colors that are organized in some desired fashion. The surface, patch, and image objects can be associated with a custom color map. This article shows you how to create such custom color maps.


To create a custome color map in C#, you need to construct a color map with an m x 4 color map matrix. Each row of this matrix represents ARGB values. The row index can represent the y data of a 2D chart or the height (the z data) of a 3D surface plot. For a given color map matrix with m rows, the color data values can be linearly scaled to the color map.

For example, if you want to use the color map to represent the y coordinates of a 2D graphics object, you can use the YMin and YMax to linearly transform the y data values to indices where each index identifies an ARGB row (i.e., a color) in the color map matrix. The mathematical transformation of the color index values is described by the formula:

<shapetype id="_x0000_t75" stroked="f" filled="f" path="m@4@5l@4@11@9@11@9@5xe" o:preferrelative="t" o:spt="75" coordsize="21600,21600"><stroke joinstyle="miter"><formulas /><f eqn="if lineDrawn pixelLineWidth 0"><f eqn="sum @0 1 0"><f eqn="sum 0 0 @1"><f eqn="prod @2 1 2"><f eqn="prod @3 21600 pixelWidth"><f eqn="prod @3 21600 pixelHeight"><f eqn="sum @0 0 1"><f eqn="prod @6 1 2"><f eqn="prod @7 21600 pixelWidth"><f eqn="sum @8 21600 0"><f eqn="prod @7 21600 pixelHeight"><f eqn="sum @10 21600 0"></formulas /><path o:connecttype="rect" gradientshapeok="t" o:extrusionok="f"><lock aspectratio="t" v:ext="edit"><shape id="_x0000_i1025" style="WIDTH: 252.75pt; HEIGHT: 54.75pt" type="#_x0000_t75"><imagedata src="file:///C:\DOCUME~1\jhxu\LOCALS~1\Temp\msohtml1\01\clip_image001.wmz">

Here y is the individual value of Y data and m is the length of the color map matrix. This allows you to use the entire range of colors in the color map over the plotted data. For 3D graphics objects and 3D surface charts, the y data should be replaced with the z data.

Now we can implement the colormap matrix class. Let's use a custom colormap named "Spring" as an example to illustrate how easily it is to create a custom colormap.

using System;

using System.Drawing;

using System.Drawing.Drawing2D;

namespace Example1_8


public class ColorMap


private int colormapLength = 64;

private int alphaValue = 255;

public ColorMap()



public ColorMap(int colorLength)


colormapLength = colorLength;


public ColorMap(int colorLength, int alpha)


colormapLength = colorLength;

alphaValue = alpha;


public int[,] Spring()


int[,] cmap = new int[colormapLength, 4];

float[] spring = new float[colormapLength];

for (int i = 0; i < colormapLength; i++)


spring[i] = 1.0f * i / (colormapLength - 1);

cmap[i, 0] = alphaValue;

cmap[i, 1] = 255;

cmap[i, 2] = (int)(255 * spring[i]);

cmap[i, 3] = 255 - cmap[i, 1];


return cmap;





In this class, there are three constructors. If you use

ColorMap cm = new ColorMap();

to create a new ColorMap object, the default parameters colormapLength = 64 and alphaValue = 255 will be used. Here colormapLength is the length of the color map matrix and the alphaValue is the color transparency parameter. The default alphaValue of 255 represents an opaque color. The following constructor

ColorMap cm = new ColorMap(32);

overrides the colormapLength with the input parameter 32, and the alphaValue remains the default value of 255. You can override both parameters by calling the ColorMap class with the following code snippet:

COlorMap cm = new ColorMap(32, 100);

This sets colormapLength = 32 and alphaValue = 100.

I have add eight commonly used custom colormaps to the ColorMap class. You can easily add more custom colormaps following the procedure described here.

<h2>Using the code</h2>

The ColorMap class can be used in your C# applications. The follwoing Form1 class demonstrate how to draw various color bars using the ColorMap class. Here is the code snippet of the Form1 class:

using System;

using System.Drawing;

using System.Windows.Forms;

namespace Example1_8


public partial class Form1 : Form


public Form1()



SetStyle(ControlStyles.ResizeRedraw, true);

This.BackColor = Color.White;

this.Width = 340;

this.Height = 340;


protected override void OnPaint(PaintEventArgs e)


Graphics g = e.Graphics;

int width = 30;

int height = 128;

int y = 10;

// Create opaque color maps with alpha = 255:

ColorMap cm = new ColorMap();

Font aFont = new Font("Arial", 20, FontStyle.Bold);

g.DrawString("OPAQUE COLOR", aFont, Brushes.Black, 10, 60);

DrawColorBar(g, 10, y, width, height, cm, "Spring");

DrawColorBar(g, 10 + 40, y, width, height, cm, "Summer");

DrawColorBar(g, 10 + 2 * 40, y, width, height, cm, "Autumn");

DrawColorBar(g, 10 + 3 * 40, y, width, height, cm, "Winter");

DrawColorBar(g, 10 + 4 * 40, y, width, height, cm, "Jet");

DrawColorBar(g, 10 + 5 * 40, y, width, height, cm, "Gray");

DrawColorBar(g, 10 + 6 * 40, y, width, height, cm, "Hot");

DrawColorBar(g, 10 + 7 * 40, y, width, height, cm, "Cool");

y = y + 150;

// Create transparent color maps with alpha = 150:

ColorMap cm1 = new ColorMap(64, 150);

g.DrawString("TRANSPARENT COLOR", aFont, Brushes.Black, 10, 210);

DrawColorBar(g, 10, y, width, height, cm1, "Spring");

DrawColorBar(g, 10 + 40, y, width, height, cm1, "Summer");

DrawColorBar(g, 10 + 2 * 40, y, width, height, cm1, "Autumn");

DrawColorBar(g, 10 + 3 * 40, y, width, height, cm1, "Winter");

DrawColorBar(g, 10 + 4 * 40, y, width, height, cm1, "Jet");

DrawColorBar(g, 10 + 5 * 40, y, width, height, cm1, "Gray");

DrawColorBar(g, 10 + 6 * 40, y, width, height, cm1, "Hot");

DrawColorBar(g, 10 + 7 * 40, y, width, height, cm1, "Cool");


private void DrawColorBar(Graphics g, int x, int y,

int width, int height, ColorMap map, string str)


int[,] cmap = new int[64, 4];



case "Jet":

cmap = map.Jet();


case "Hot":

cmap = map.Hot();


case "Gray":

cmap = map.Gray();


case "Cool":

cmap = map.Cool();


case "Summer":

cmap = map.Summer();


case "Autumn":

cmap = map.Autumn();


case "Spring":

cmap = map.Spring();


case "Winter":

cmap = map.Winter();



int ymin = 0;

int ymax = 32;

int dy = height / (ymax - ymin);

int m = 64;

for (int i = 0; i < 32; i++)


int colorIndex = (int)((i - ymin) *

m / (ymax - ymin));

SolidBrush aBrush = new SolidBrush(Color.FromArgb(

cmap[colorIndex, 0], cmap[colorIndex, 1],

cmap[colorIndex, 2], cmap[colorIndex, 3]));

g.FillRectangle(aBrush, x, y + i * dy, width, dy);





Inside the DrawColorBar method, we draw a color bar by dividing it into 32 sub-rectangles. We thenassign the y data from 0 to 31. The switch statement selects a specified color map matrix. The following code snippet

int colorIndex = (int)((i - ymin) * m / (ymax - ymin));

computes the index of the color map matrix using the Y data. Then we create a SolidBrush object using this color map matrix.

Inside the OnPaint method, we create two ColorMap objects, cm and cm1. cm uses the default parameters: colormapLength = 64 and alphaValue = 255; i.e. the opaque color. The parameters of cm1 are reassigned to colormapLength = 64 and alphaValue = 150, indicating that the color becomes transparent.

This project produces the output shown in the following screenshot, which shows eight different color maps defined in the ColorMap class.

This project is from the examples of the new book "Practical C# Charts and Graphics", where you can find more advanced chart and graphics programming for real-world .NET applications. For more information, please visit my website at

<h2>About the Author</h2>

Dr. Jack Xu has a Ph.D in theoretical physics. He has over 15 years programming experience in Basic, Fortran, C, C++, Matlab, and C#, specializing in numerical computation methods, algorithms, physical modeling, computer-aided design (CAD) development, graphics user interface, and 3D graphics. Currently, he is responsible for developing commercial CAD tools based on Microsoft .NET framework.

Please read my other articles:

"Draw US Flag using C# and GDI+"

"Create a Custom Color Shading in C#"

"Spherical Coordinates in C#"


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Jack J. H. Xu
United States United States
No Biography provided

You may also be interested in...


Comments and Discussions

GeneralMy vote of 5 Pin
manoj kumar choubey18-Feb-12 4:24
membermanoj kumar choubey18-Feb-12 4:24 
QuestionColorBar Pin
hernono23-Jan-12 14:55
memberhernono23-Jan-12 14:55 
GeneralMy vote of 2 Pin
Günther M. FOIDL4-Oct-09 21:41
memberGünther M. FOIDL4-Oct-09 21:41 
QuestionIs Dr. Xu Still Around? Pin
One Smart Motor Scooter14-Aug-09 13:45
memberOne Smart Motor Scooter14-Aug-09 13:45 
General[Message Deleted] [modified] Pin
Coskun Oba2-Jun-08 18:35
memberCoskun Oba2-Jun-08 18:35 
GeneralRe: Great Work! Pin
Jack J. H. Xu2-Jun-08 22:33
memberJack J. H. Xu2-Jun-08 22:33 
GeneralCorrection... Pin
Paul Selormey21-May-07 0:12
memberPaul Selormey21-May-07 0:12 
GeneralRe: Correction... Pin
Jack J. H. Xu2-Aug-07 21:05
memberJack J. H. Xu2-Aug-07 21:05 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

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

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.161205.3 | Last Updated 15 May 2007
Article Copyright 2007 by Jack J. H. Xu
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid