Department of Mathematics

Math 300: Mathematical Computing

RGB Color Specifications

Putting colors into documents is one of the most basic things to do for modern computing. We always need to specify colors for fonts, graphics objects, curves in mathematical plots, and so on. This is done in a fairly uniform way that is easiest to examine in the context of HTML.

Consider a basic color specification in HTML, say, for an <h1> tag. It might look like
<h1 style="color:blue">
As you can imagine, it is simply not possible to specify colors with any real precision using a name such as "blue", or "pink", or "crimson". There are not enough words in the English language to specify the 224 colors typically available to us. For that reason, we usually specify colors using their so called RGB values.

Recall that the way colors are created on a computer screen is by having three monochromatic subelements in each picture element on the screen (pixel): one that flashes red, one green, and one blue. These subelements are so close together that the eye combines them into a single color such as orange or teal. Typically, each subelement can take an intensity value that is an eight-bit binary number: a value from 0 to 255. These are called the RGB values for the color.

We can specify these RGB values in HTML in either of two ways. One way is to call a function that takes decimal numbers for the RGB values. For example:
<h1 style="color:RGB(0,0,255)">
would give a blue heading. A second way to specify the same colors is as part of a sextuple of hex digits that correspond to the RGB values: The first two hex digits are the red value, the second two the green value, and the third pair of digits is the blue value.
<h1 style="color:#0000FF">
is the same color as that from the previous specification.

Following is a table of HTML tags together with the text they would put on a page.

<h1 style="color:RGB(0,255,255)">Cyan</h1> <h1 style="color:#00FFFF">Cyan</h1>


<h1 style="color:RGB(255,0,255)">Magenta</h1> <h1 style="color:#FF00FF">Magenta</h1>


<h1 style="color:RGB(255,255,0)">Yellow</h1> <h1 style="color:#FFFF00">Yellow</h1>


<h1 style="color:RGB(255,255,255)">White</h1> <h1 style="color:#FFFFFF">White</h1>


<h1 style="color:RGB(0,0,0)">Black</h1> <h1 style="color:#000000">Black</h1>


In a system such as this, then to make colors lighter one must "add white". Various amounts of white are created by adding the same amount of red, green and blue. Thus a 50% white would correspond roughly to RGB(127,127,127). Another way to say 50% white is... grey. To make various shades of colors, then, you pick two primary colors from among red, green or blue: that specifies the color. Then you "add white" to obtain the right shade of the color. In the table below we have made an orange color, and then lightened it in several steps. The idea is that we took 100% red and 67% green to make an orange, and then use less and less of the orange, and more and more white: first #404040, then #808080, then #C0C0C0.

<h1 style="color:RGB(255,170,0)">Orange</h1> <h1 style="color:#FFAA00">Orange</h1>


<h1 style="color:RGB(255,191,64)">Orange</h1> <h1 style="color:#FFBF40">Orange</h1>


<h1 style="color:RGB(255,213,128)">Orange</h1> <h1 style="color:#FFD580">Orange</h1>


<h1 style="color:RGB(255,234,192)">Orange</h1> <h1 style="color:#FFEAC0">Orange</h1>


Note that the RGB system is additive: black is somehow the default color, and to create color we add in red, green, and blue. This is the system used for light that is not reflected. By contrast, when we look at colors on paper, we are seeing reflected light. It is here that the more traditional color wheel comes into play. In particular, printer inks use a CMYK system: Cyan, Magenta, Yellow, and blacK. The assumption here is that white is somehow the default, and we use cyan etc. to darken and intensify the color. Thus, in a sense, the CMYK system is subtractive.

For more details on this you could go to RGBWorld.

Assignment C is posted.

The test solution is available.

Department of Mathematics, PO Box 643113, Neill Hall 103, Washington State University, Pullman WA 99164-3113, 509-335-3926, Contact Us
Copyright © 1996-2015 Kevin Cooper