A tutorial by jim bumgardner (@jbum on twitter)

6/2012: You'll find a great, mind-blowing overview of how color perception works on Jason Cohen's blog. He points to a far more in-depth source which will also reward your time.

12/2011: Charlie Loyd has written a nice analysis of the techniques presented in this article, and makes a good case for sine-generated rainbows (which he has nicely dubbed the "Sinebow") as an aesthetic improvement over the more common HSB-space rainbows (which have brightness/saturation spokes).

1/2011: Since I wrote this tutorial, CSS3 has introduced the hsla() color specifications, which makes the kinds of tricks explained in this article much easier on browsers that support CSS3. Since my intent was to teach some simple color theory and applied mathematics, I suggest you pretend this feature doesn't exist as you read this article. Then, afterwards, feel free to use it willy nilly! However, the sinebow presented here has some aesthetic improvements over an HSL hue sweep, as you will see.

This is a tutorial on how to produce sequences of discrete colors, for use in fonts, graphics or tables, such as in the color strips shown here, or the title of this article.

Obviously you can make a webpage look incredibly annoying if you overuse this technique (and by overuse, I mean use at all), but you may have fun learning to do it, and you will improve your javascript skills, and your understanding of how colors work.

I am going to use javacsript for my code examples, but you can use the same basic techniques in any language, and indeed I originally developed these tricks in C, but I now use the same old tricks in C++, Perl, Processing, Java, Flash Actionscript and other languages.

To get the most out of this tutorial, you will need to know a little Javascript, and a little HTML. However, you won't need to know a whole lot. I mean c'mon. I even explain how hexadecimal works in this document, and why '#FF0000' comes out red, and so on...

Well, let's get to it, shall we?

Converting R,G,B values to HTML hex notation

To generate rainbow-like sequences of colors, I am going to be manipulating the individual RGB components of each subsequent color. So the first thing I need is a utility function to convert individual red, green and blue values to an HTML hex color specification, which looks something like this:

#AABBCC

This represents an RGB color with 8-bits per component. In an 8-bit color system, the values of the color components, R, G, and B can go from 0-255. But the HTML color specification uses hexadecimal notation for each of the components, so that they each occupy two digits.

In hexadecimal, each color component (red, green, and blue) occupies two digits, like so: #RRGGBB. So our color has the following hex values:

Component
Value (in hex)
Red
AA
Green
BB
Blue
CC

Hexadecimal	0	1	2	3	4	5	6	7	8	9	A	B	C	D	E	F
Decimal	0	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15

If you don't have a calculator handy that does hexadecimal -> decimal conversion, it's not too hard to do it yourself. Just take the first digit, convert it to decimal (using the above table, which is easily memorized, especially if you're not busy friday), multiply it by 16, and then add the decimal equivalent of the second digit. For example, the number AB corresponds to 10*16 + 11, or 171.

Using this formula, you will see that the color #AABBCC corresponds to the following values:

Component
Value (in hex)
Value (in decimal)
Red
AA
170
Green
BB
187
Blue
CC
204

What I need for this tutorial is a function that does the reverse - converts 170,187,204 back to #AABBCC. I would use it like this:

output = RGB2Color(170,187,204);

And know that the string '#AABBCC' is in the output value, ready to be output as HTML, using the document.write() command.

Here is the function.

  function RGB2Color(r,g,b)
  {
    return '#' + byte2Hex(r) + byte2Hex(g) + byte2Hex(b);
  }

  function byte2Hex(n)
  {
    var nybHexString = "0123456789ABCDEF";
    return String(nybHexString.substr((n >> 4) & 0x0F,1)) + nybHexString.substr(n & 0x0F,1);
  }

I should point out that decimal -> hex conversion (and number formatting in general) is much easier in languages that provide a 'printf' function - something sorely missing from Javascript.

In Perl, you can do this same conversion in one line, like so:

  output = sprintf '#%02x%02x%02x', $r, $g, $b;

If you can live without an old-style CSS color specification, you can also produce colors more simply without byte2Hex, like so:

  function RGB2Color(r,g,b)
  {
    return 'rgb(' + Math.round(r) + ',' + Math.round(g) + ',' + Math.round(b) + ')';
  }

Sine wave cycles

The basic tool I am going to use to make color cycles is the sine wave. There is a function in Javascript, Math.sin() which will produce a smoothly undulating value that goes from 0 to 1 to 0 to -1 and back to 0. Here are some samples:

Sine waves are really useful in real life, contrary to what you might have inadvertantly learned in trig class, and they are especially useful for all kinds of things relating to graphics and music.

To get this pattern, I have input into the Math.sin() function a value which is steadily increasing. You can produce a series of sine wave values using a loop, like so:

var frequency = .3;
for (var i = 0; i < 32; ++i)
{
   Document.write( Math.sin(frequency * i)  );
}

At this time I would like to apologize for how crappy the π (PI) character looks in the san-serif font used in 80% of the computers out there. If I were using lovely Times Roman, the π character would be far more recognizeable. Sadly, I'm not, because for just about everything else I find the San Serif font more readable. But I digress...

There is a relationship between these π units which are used with the Math.sin() function (called radians) and the more familiar degrees which go from 0-360 (degrees are an old Babylonian unit -- the Babylonians really liked numbers like 60 and 360 because all kinds of numbers go evenly into them. Also, the Babylonians hadn't invented pie yet...)

Degrees	Radians
0	0
90	π/2
180	π
270	3*π/2
360	2*π

You can produce a value for π in Javascript by saying:

    document.write(Math.PI);

I personally have π memorized up to 8 digits. Kind of a waste of gray matter, really.

Speaking of gray matter...

Using sine waves to make shades of gray

This isn't too hard because we know that we want the sine value to start at some center value, and then go up and down by some amount. Since the sine wave goes up to 1, and down to -1, it is already normalized (meaning that it's maximum value is 1, a very useful number). We can just multiply it by some other number, and it will go up to that number, and down to the negative version of that number.

For our color values, it will work well if we use 255/2 for our center value, and have the sine value go up and down with an amplitude of 255/2 (which will take us to 255 and down to 0.

color_component = Math.sin(frequency*i)*255/2 + 255/2;

color_component = Math.sin(frequency*i)*128 + 127;

More generally, when we want to use a sine wave to oscillate something, we will use the formula

value = Math.sin(frequency*increment)*amplitude + center;

frequency is a constant that controls how fast the wave oscillates
increment is a variable that counts up, typically provided by a loop
amplitude controls how high (and low) the wave goes
center controls the center position of the wave.

Now I can modify my original sine wave loop, and produce a series of test colors.

var frequency = .3;
var amplitude = 127;
var center = 128;

for (var i = 0; i < 32; ++i)
{
   v = Math.sin(frequency*i) * amplitude + center;

   // Note that &#9608; is a unicode character that makes a solid block
   document.write( '<font style="color:' + RGB2Color(v,v,v) + '">&#9608;</font>');
}

And here's what the code produces -- a kind of color sine wave:

For fun, I can try using a series of different values for frequency. This is what I'll get if I add an additional outer loop that changes the value of frequency.

Using out-of-phase sine waves to make rainbows

RGB2Color(v,v,v)

RGB2Color(v,v+30,v+60)

This is interesting, but it is not quite what I want. A better technique is to generate 3 out-of-phase sine waves, by doing something like this:

var frequency = .3;
for (var i = 0; i < 32; ++i)
{
   red   = Math.sin(frequency*i + 0) * 127 + 128;
   green = Math.sin(frequency*i + 2) * 127 + 128;
   blue  = Math.sin(frequency*i + 4) * 127 + 128;

   document.write( '<font color="' + RGB2Color(red,green,blue) + '">&#9608;</font>');
}

Which produces this:

As you can see I am using the values 2 and 4 to change the alignment (or phase) of the green and blue sine waves. I chose 2 and 4 because they nearly divide the range of the sine wave (2π or 6.2) into three equal parts, which puts each sine wave approximately 1/3rd of a cycle, or 120°, out of phase, like so:

red     (phase = 0)
green   (phase = 2)
blue    (phase = 4)
RGB    

If I wanted exactly 120° I can use 2*Math.PI/3 in place of 2, and 4*Math.PI/3 in place of 4, which produces this nearly identical (but perfect) color cycle:

However, the results are so close, that I think 2 and 4 are fine substitutes. It is said that ancient Egyptians thought that π was equal to three. And in this tutorial, we're gonna code like an Egyptian.

More about the hue cycle

This basic phenomenon - that three 120° out-of-phase sine waves produces a rainbow effect is something I've known about for a long time - since the mid 1980s actually. I originally discovered it just by playing around with using sine waves to make color (a frequent activity which took the place of having a life). Once I learned this trick, I started using it whenever I wanted an assortment of bright colors. For example, the dots in my Whitney Music Box are colored using this system.

Later, when I learned more about color theory, I found out that what I'm doing is basically causing the hue of the color to travel around the circle of a color wheel. If you plot the path that I'm making on the hue-saturation circle commonly seen in color pickers, you'll find it doesn't produce a perfect circle, but more of a trefoil pattern, like so:

Note: I used the Processing language to produce this illustration. Making it in Javascript would be a bit of a chore. If you like graphics programming in Javascript, you'll love it in Processing.js, and you will enjoy my Processing blog (and unfinished book): The Joy of Processing.

Even though it doesn't make a perfect hue circle, the sine-wave trefoil makes a pretty color gradient, and it's pretty easy to get a rainbow effect in just a few lines of code. I actually prefer it to the "correct" HSB / HSL hue cycle, because it has more consistent brightness. It minimizes the spokes at yellow, cyan and magenta, which you can see in the picture.

Now, I'll talk about how to modify the function to produce a greater assortment of colors, and different shades, such as pastels.

Generalizing it

  function makeColorGradient(frequency1, frequency2, frequency3,
                             phase1, phase2, phase3,
                             center, width, len)
  {
    if (center == undefined)   center = 128;
    if (width == undefined)    width = 127;
    if (len == undefined)      len = 50;

    for (var i = 0; i < len; ++i)
    {
       var red = Math.sin(frequency1*i + phase1) * width + center;
       var grn = Math.sin(frequency2*i + phase2) * width + center;
       var blu = Math.sin(frequency3*i + phase3) * width + center;
       document.write( '<font color="' + RGB2Color(red,grn,blu) + '">&#9608;</font>');
    }
  }

    makeColorGradient(.3,.3,.3,0,2,4);

Making pastels

The basic trick to getting pastels is to change the gamut of the color components to use lighter colored values for the color components. So, when we convert the sine values, instead of convering to the full range (0 --> 255), we convert to something like (205 - 255). We change the last two parameters (center and width) as follows. Before:

   // center = 128, width = 127
   makeColorGradient(.3,.3,.3,0,2,4, 128,127);

   // center = 230, width = 25
   makeColorGradient(.3,.3,.3,0,2,4, 230,25);

And this makes a pastel strip:

I can get darker pastels by using a wider range (center=200, width=55), like so:

Get more stripes by increasing the frequency

When you change the value of frequency, you can get the colors to change more quickly, or more slowly. Up to now, I've mostly been using an frequency value of .3, but here are some other values:

Experimenting with phase

Get more variety by using separate frequencies for each component

Another trick I've used which produces greater color variety is to put each color component on a different frequency. Here's the code:

redFrequency = .1;
grnFrequency = .2;
bluFrequency = .3;
center = 128;
width = 127;
makeColorGradient(redFrequency,grnFrequency,bluFrequency,0,2,4,center,width,50);

If I separate out the individual channels, you can see what is going on:

red     (freq = .1)
green   (freq = .2)
blue    (freq = .3)
RGB    

Using three different frequencies may produce colors with a low saturation value, such as the black seen in the example above, or grays or whites. This happens when the three sine waves cross the same value simultaneously.

Getting cycles to repeat

center = 128;
width = 127;
steps = 6;
frequency = 2*Math.PI/steps;
makeColorGradient(frequency,frequency,frequency,0,2,4,center,width,50);

Getting cycles to not repeat

center = 128;
width = 127;
frequency = 2.4;
makeColorGradient(frequency,frequency,frequency,0,2,4,center,width,50);

If you combine this with the trick of using separate freqencies for each color, and insure that none of the individual frequencies are multiples of each other, you can get even more variety. Here I'm using frequency of 1.666, 2.666, and 4.666.

center = 128;
width = 127;
redFrequency = 1.666;
grnFrequency = 2.666;
bluFrequency = 3.666;
makeColorGradient(redFrequency,grnFrequency,bluFrequency,0,0,0,center,width,50);

Finally, here's a function that does the rainbow effect on a line of text.

function colorText(str,phase)
{
    if (phase == undefined) phase = 0;
  center = 128;
  width = 127;
  frequency = Math.PI*2/str.length;
  for (var i = 0; i < str.length; ++i)
  {
     red   = Math.sin(frequency*i+2+phase) * width + center;
     green = Math.sin(frequency*i+0+phase) * width + center;
     blue  = Math.sin(frequency*i+4+phase) * width + center;
     document.write( '<font style="color:' + RGB2Color(red,green,blue) + '">' + str.substr(i,1) + '</font>');
  }
}

Well, that's it. I hope you enjoyed the tutorial!

If you have any questions or comments, add them to the blog entry about this article, which you'll find here.

My other blog: The Joy of Processing