C o l o r    d e s i g n    t u t o r i a l 

Plaatje
Index to this page:
Introduction
Color spaces
Color mixing
Primary, secondary and tertiary colors
Specifying colors for HTML
Working with HSL: the color space
HSL and CIE-Lhs compared
Working with HSL: exercises
Working with HSL: color palettes
Working with HSL: complementary colors
Downloadable color patches
What about web safe colors and i-mode colors?
Maths: RGB, HSL, CIE
Silly questions
Small print

Introduction

In short: learn how to work with colors, expressed as hue, saturation and lightness.

Ever wondered how to find contrasting colors? A palette of matching pastel colors? Shadow and highlight color variants for one and the same object?
All this type of questions can be answered if you switch your color thinking to HSL - hue, saturation and lightness. It's not difficult and it's far more productive than thinking RGB - red, green and blue.

This article explains how colors work, what a color space is, what the HSL color space is and how to work within this space. The relative nonsense of web safe colors will be explained. There are three pages with 7300 color patches each for you to download. Programmers will find algorithms for converting between RGB, HSL, CIE-XYZ and CIE-L*h*s*.

 


Color spaces

If you want to process colors, you will have to quantify them. A qualification like 'blueish medium green' is not understood by a computer, but a designation like '61-153-115' can be understood if you first define what these numbers mean.
Enter color spaces. A color space is a collection of numbers, describing a lot of colors. The numbers are tailored to the application for which the colors are needed. At the inside of a color computer screen three kinds of phosphors are sprayed in the form of dots or little stripes. One third of the dots produce red light when lit by an electron beam, one third of the dots produce green light and one third produce blue light. With these three colors, a lot of other colors can be simulated. If we want to produce a blueish medium green, then we have to feed the computer screen the red-green-blue description '61-153-115' and if all works well, the following color will be produced:
 
61-153-115
 
Without any clue of interpreting the numbers 61-153-115 mean nothing. They mean a lot if you know that these are numbers for red, green and blue, with a minimum of 0 and a maximum of 255.
In this particular RGB color space 256^3 = 16 777 216 different colors can be specified. That should be enough for humans, since it is hardly possible to discern more than about one million colors! Point is that the human eye is more sensitive for color differences in one region (green) than in other regions of the color spectrum. In another color space, like CIE-L*u*v*, the numbers are spread more evenly across the sensitivity for color differences in the human eye.

For each and every application a different color space has been defined. There is a RGB color space like the one mentioned above, which is very useful for specifying colors for television and computer screens.
If you want to print something onto a medium like paper, it is better to use a CMYK color space, consisting of the colors cyan, magenta, yellow and black. It turns out that if one prints with CMYK colors, many more colors can be simulated than with any other combination of colors.
If you want to transport a color definition from one apparatus to another, for instance from computer screen to a printing press, then it can be useful to convert the colors first to a device independent color space like CIE-XYZ.
If you want to design with colors, the best you can do is to think HSL, which stands for hue, saturation, lightness.

 

Go to the index at the top


Color mixing

A rather strange behavior of the human vision system is that a lot of colors can be simulated by mixing a couple of fundamental colors, usually three. The retina, the light and color sensitive layer in the eye, has three types of light receptors for colors. One type has a maximum sensitivity for reds, another for greens and a third type for blues. Due to this construction color mixing is possible. How this works out is partially explained in the following table.
red 
red + green = yellow 
green 
green + blue = cyan 
blue 
blue + red = magenta 
nothing = black 
red + green + blue = white 

This looks not too difficult! It even seems possible to construct orange and grey. Orange should be a color between red and yellow, something like two parts of red light and one part of green light perhaps? And grey is something in between white and black, let's say half red, half green and half blue? The following table shows the results.
2 parts red + 1 part green light = orange 
half red + half green + half blue = grey 

Thinking RGB is still a bit counterintuitive. If we mix some red pigment with green pigment, then the result is brown. Why not orange? There is a simple explanation for this. It has to do with additive colors and subtractive colors. If you are mixing light, then colors are added, because they get lighter. They all add up to white. If you mix pigments on paper, then colors are subtracted, because they get darker. They are subtracted from black. By definition, brown is a darker variant of orange. That accounts for the effect that when you mix red and green light you get orange, but when you mix pigments you get the darker brown.

Thinking in terms of additive and subtractive colors seems a bit confusing if you are in the process of finding colors for designs.
It turns out that when we change our color space from red-green-blue to hue-saturation-lightness, colors are much more comprehensible. For humans that is. Computers still need RGB numbers in a special form.

 

Go to the index at the top


Primary, secondary and tertiary colors

What are primary colors and what are secondary colors? Do I have to deal with them? In what way will they influence my design?
Primary colors are red, green and blue.
Probably they are called primary because the human vision system has three types of light detecting devices, most sensitive for the colors red, green and blue respectively.
Secondary colors are the colors that emerge when two primary colors are mixed. So there must be 3 secondary colors:
red + green = yellow
green + blue = cyan
red + blue = magenta or purple
There are also tertiary colors and they arise when a primary color with one of the nearest secondary colors is mixed. So there are 6 tertiary colors:
red + yellow = orange
red + magenta = purplish red
green + yellow = yellow-green
green + cyan = blueish green
blue + cyan = greenish blue
blue + magenta = purplish blue

From top to bottom all mentioned colors in a color strip:

redprimary
orangetertiary
yellowsecondary
yellow-greentertiary
greenprimary
blueish greentertiary
cyansecondary
greenish bluetertiary
blueprimary
purplish bluetertiary
magentasecondary
purplish redtertiary

How do these primary, secondary and tertiary colors influence your design?
Not a bit! For instance, if you are designing sports wear for kids, you should start with the colors vivid red, hard blue and pure white. If you are painting a landscape, you use the colors you'll find in the landscape. The only thing you could do is putting a color cast over the scene, like orange in the case of a near sun set or dark blue for a moonlit landscape. If you are designing products for 50+ aged people in China, you wouldn't use yellow, because the feeling is that yellow is reserved for the emperor. In all these cases: there are many other factors more important than just primary or secondary colors.

 

Go to the index at the top


Specifying colors for HTML

It is not possible to write in the code of a web page: gimme a color with 2 parts of red and 1 part of green. We have to translate all color specifications to RGB values. The minimum value of each color is 0 and the maximum value is 255. A little complication is that the colors are to be presented in hexadecimal form. You could convert a decimal number to hexadecimal by using a simple algorithm involving the div and mod functions. Much easier is: use an electronic calculator, a computer calculator program or a web page with a JavaScript calculator, of which many can be found on the web. Search for color calculator.
The earlier mentioned orange, with 2 parts of red and 1 part of green, without any blue and within the bounds of 0 - 255, turns out to be 255-128-0 numerically, if we want the maximum amount of color. This is not too difficult to come up with. A calculator shows that this is FF-80-00 hexadecimal. By convention we specify colors in HTML documents like: #FF8000, so with a cross-hatch (#) in front and always with six hex digits in a row.

 

Go to the index at the top


Working with HSL: the color space

Why should we design with HSL colors? Because the HSL color space closely resembles the way our brain handles color. To be honest, the CIE-L*h*s* color space is mathematically better suited, because the real color differences are better distributed among the describing numbers. But we will show, that although this could be mathematically or physically true, it's simply not the way we think.

Let's make ourselves acquainted with the HSL space. What is HSL anyhow?
HSL stands for hue, saturation and lightness.

Hue is the color description, expressed as an angle in a sort of color wheel. Zero degrees is red, 120 degrees is green, 240 degrees is blue and with 360 degrees the circle is round again with red. Intermediate angles give intermediate colors. In this strip the hue runs from 0° to 330° in steps of 30°. Saturation (1.0) and lightness (1.0) are kept constant.
H = 0 H = 30 H = 60 H = 90 H = 120 H = 150 H = 180 H = 210 H = 240 H = 270 H = 300 H = 330

Saturation is the colorfulness, the amount of color. Less saturation means less pigment. The saturation values go from 0 (not saturated, i.e. colorless) to 1 (fully saturated). In this strip the saturation runs from 1.0 down to 0.1 in steps of 0.1. Hue (0°) and lightness (1.0) are kept constant.
S = 1.0 S = 0.9 S = 0.8 S = 0.7 S = 0.6 S = 0.5 S = 0.4 S = 0.3 S = 0.2 S = 0.1

Lightness tells us how light the color is. A value of 0 means no light (black) and a value of 1 means the maximum amount of light there is. In this strip the lightness runs from 1.0 down to 0.1. Hue (0°) and saturation (1.0) are kept constant.
L = 1.0 L = 0.9 L = 0.8 L = 0.7 L = 0.6 L = 0.5 L = 0.4 L = 0.3 L = 0.2 L = 0.1


By the way, some alternative color spaces have been defined like HSV (V = value), HSI (I = intensity), HSB (B = brightness), and more. Although they are mathematically sometimes a bit different, conceptually they do not differ much from HSL, so let's stick with HSL.

 

Go to the index at the top


HSL and CIE-Lhs compared

Now we can construct an overview of the rainbow colors, with a comparison between RGB, HSL and the physically 'perfect' CIE-L*h*s* (or CIE-Lhs for short).

ColorR-G-BH-S-LCIE-LhsSample
Red1-0-00-1-154.2-12.2-3.4 
Yellow1-1-060-1-197.2-85.9-1.1 
Green0-1-0120-1-187.3-129.7-1.6 
Cyan0-1-1180-1-190.7-192.2-0.8 
Blue0-0-1240-1-132.1-265.9-4.1 
Magenta1-0-1300-1-161.1-309.7-2.3 
White1-1-10-0-1100-88.5-0 
Black0-0-00-0-00-0-0 

Immediately you can see that the CIE-Lhs color space doesn't give nice and comprehensible numbers. The HSL numbers are more comprehensible for humans and the colors look right too.
By the way, since any CIE color space is device independent, we had to choose a device and an illumination in order to convert the abstract RGB colors to CIE-Lhs. We chose the ITU/EBU 3213 description for PAL television colors and the D65 whitepoint. In a later chapter we give the maths, right now we focus on designing.

What about smooth gradients over a color range? What about complementary colors? Since CIE-Lhs should give better color differences, probably gradients and complementaries are better too. Let's compare RGB-HSL and CIE-Lhs side by side.

The left color strip below follows the RGB-HSL scheme with every 10 degrees of H-value another color and with saturation and lightness the maximum value. The right color strip shows CIE-Lhs colors in steps of 10 degrees of H-value. Since the colors had to be represented in HTML, they had to be converted to RGB.
If CIE-Lhs saturation and lightness are at their maximum values, the RGB values would get out of gamut. Therefore the s-value was optimized in such a way that the lowest of the converted R,G,B values was 0. The L-value was optimized to obtain 1 for the highest of the converted R,G,B values. For the RGB conversion the D65 whitepoint was used and the values of the EuroYu'v' (ITU/EBU PAL TV) RGB-primaries.
The CIE-Lhs strip shows somewhat smoother color transitions, but for non-critical color design work, it probably doesn't worth the trouble to work in the CIE-Lhs color space. With CIE-Lhs colors one can also get more accurate complementary colors, but again, it's hardly worth the effort.

RGB-HSLCIE-Lhs
0, 1, 1  55.4615, 0, 2.7524
10, 1, 1  54.4696, 10, 3.2235
20, 1, 1  61.2875, 20, 2.4190
30, 1, 1  68.0497, 30, 1.8175
40, 1, 1  73.5501, 40, 1.4918
50, 1, 1  78.4544, 50, 1.2986
60, 1, 1  83.1761, 60, 1.1815
70, 1, 1  88.0600, 70, 1.1148
80, 1, 1  93.4981, 80, 1.0865
90, 1, 1  96.3174, 90, 1.0920
100, 1, 1  94.2807, 100, 1.1321
110, 1, 1  92.1947, 110, 1.2135
120, 1, 1  89.9148, 120, 1.3518
130, 1, 1  87.3495, 130, 1.5592
140, 1, 1  88.1453, 140, 1.2375
150, 1, 1  88.7524, 150, 1.0524
160, 1, 1  89.2587, 160, 0.940305
170, 1, 1  89.7126, 170, 0.87377
180, 1, 1  90.1466, 180, 0.83986
190, 1, 1  90.5881, 190, 0.83285
200, 1, 1  87.2037, 200, 0.85162
210, 1, 1  82.8922, 210, 0.899206
220, 1, 1  78.4581, 220, 0.984091
230, 1, 1  73.5559, 230, 1.1243
240, 1, 1  67.6553, 240, 1.3595
250, 1, 1  59.7183, 250, 1.7877
260, 1, 1  46.8322, 260, 2.7307
270, 1, 1  36.4142, 270, 3.6496
280, 1, 1  44.3399, 280, 3.0036
290, 1, 1  50.5218, 290, 2.6196
300, 1, 1  55.9691, 300, 2.3869
310, 1, 1  61.0278, 310, 2.2551
320, 1, 1  59.5560, 320, 2.2005
330, 1, 1  58.3771, 330, 2.2141
340, 1, 1  57.3535, 340, 2.2982
350, 1, 1  56.4029, 350, 2.4668
360, 1, 1  55.4615, 360, 2.7524

Arithmetical complementary colors next to each other.
Are the CIE-LHs colors better complementary? Hard to tell.

RGB-HSL CIE-Lhs
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

 

Go to the index at the top


Working with HSL: exercises

You need a 32-bits (Truecolor, millions of colors) color screen to fully appreciate the examples.
In the table above we saw that fully saturated red has a HSL value of 0-1-1 and yellow has a value of 60-1-1. Orange is a color somewhere inbetween red and yellow, so its color value or hue is, let's say 30°? Let's give it a try:
hsl 30-1-1
rgb 255-128-0
html #FF8000

According to the dictionary (Webster's) brown is any color between red and yellow in hue, with moderate to low saturation, and with medium to low lightness. We already have found a HSL description for orange. The only thing we actually have to do is to lower the lightness, for instance to 0.3. Probably a full saturation of 1 is OK.
hsl 30-1-0.3
rgb 76-38-0
html #4C2600

If you compare the RGB values of orange and brown, then it's clear that it is a bit more difficult to make brown out of orange.
Thinking HSL leaves only one little problem. That is: how do I convert a HSL description to the necessary hexadecimal HTML values? Use a calculator, a computer program, an advanced painting program or a table! In another chapter you can find the math if you wish to program your own conversion routines. In another chapter you will find a link to downloadable color tables with 7300 HSL colors and their HTML codes.

Let's try another example.
Violet is a color with a reddish blue hue, a medium saturation and a low lightness, says the dictionary. Reddish blue..., hm, that's in the neighborhood of 275° in hue, let's try 0.8 for saturation and 0.5 for lightness.
hsl 275-0.8-0.5
rgb 85-25-128
html #551980

And what about pink ? There is already a 'named' color defined in browsers with the name pink. Its RGB color definition is 255-192-203 and if we convert this to HSL, we get 350-0.247-1.0. Is this a logical set of numbers? Yes. The dictionary says about pink: blueish red to red in hue, medium to high lightness and low to moderate saturation. That's precisely what we've got. The HSL numbers just come rolling out of our hat. But if you look at the RGB numbers, could you have guessed that this is pink?
hsl 350-0.247-1.0
rgb 255-192-203
html #FFC0CB

Indigo is another example of a browser built-in color. Its color definition says RGB 27-0-130. This is HSL 252.5-1.0-0.51 or a fully saturated, medium dark blueish color. The dictionary says however: a dark greyish blue. If we translate that to HSL, we arrive at for instance H pure blue 240°, not too saturated, rather dark, so HSL 240-0.7-0.4. Compare those two indigo's:
hsl 252-1-0.51
rgb 27-0-130
html #1B0082
hsl 240-0.7-0.4
rgb 31-31-102
html #1f1f66

The last example: army green. To be honest, this color is a bit too difficult, because there is no 'army green'! Some say it's the color of olive drab, which in HSL is brownish green with half lightness. Another definition you can find on the web is the web safe color #669966. The US Federal Standard FS-595b series 3000 (matt finishes) gives a couple of completely different 'army greens'. We reproduced some FS colors, none of which have a name but only a paint number. Try to find out which color is the armiest army green and see if its HSL values make sense. On the RGB-row you find two sets of numbers: the decimal (0-255) values and the hexadecimal value for web pages.
olive drab
rgb 128-128-0 / 808000
hsl 60-1.0-0.5
army green
rgb 102-153-102 / 669966
hsl 120-0.333-0.6
FS 34090
rgb 35-130-89 / 238259
hsl 154-0.73-0.51
FS 34095
rgb 89-95-67 / 595F43
hsl 73-0.30-0.37
FS 34108
rgb 71-110-86 / 476E56
hsl 143-0.36-0.43
FS 34138
rgb 94-132-80 / 5E8450
hsl 104-0.39-0.52
FS 34151
rgb 113-112-72 / 717048
hsl 59-0.36-0.44
FS 34230
rgb 89-157-90 / 599D5A
hsl 121-0.43-0.62
FS 34259
rgb 142-131-66 / 8E8342
hsl 51-0.54-0.56

 

Go to the index at the top


Working with HSL: color palettes

You need a 32-bits (Truecolor, millions of colors) color screen to fully appreciate the examples.
Suppose we want to have a palette with some nice pastel colors, all with about the same lightness. It's easy to come up with some colors if you think HSL. Just take a handful of colors with saturation let's say 0.4, a constant but high lightness and a varying hue. The following table gives an example. The first three numbers in each patch are HSL numbers and the number underneath them is the hexadecimal RGB value.
0 0.4 1
FF9999
30 0.4 1
FFCC99
60 0.4 1
FFFF99
90 0.4 1
CCFF99
120 0.4 1
99FF99
150 0.4 1
99FFCC
180 0.4 1
99FFFF
210 0.4 1
99CCFF
240 0.4 1
9999FF
270 0.4 1
CC99FF
300 0.4 1
FF99FF
330 0.4 1
FF99CC

If you want a couple of off-whites, just take a very low saturation and a high lightness, for instance s = 0.1 and l = 1, as in the following example.
0 0.1 1
FFE6E6
30 0.1 1
FFF2E6
60 0.1 1
FFFFE6
90 0.1 1
F2FFE6
120 0.1 1
E6FFE6
150 0.1 1
E6FFF2
180 0.1 1
E6FFFF
210 0.1 1
E6F2FF
240 0.1 1
E6E6FF
270 0.1 1
F2E6FF
300 0.1 1
FFE6FF
330 0.1 1
FFE6F2

A palette of dark greys with a touch of color emerges if you choose a low saturation like 0.2 and a low lightness like 0.3:
0 0.2 0.3
4C3D3D
30 0.2 0.3
4C453D
60 0.2 0.3
4C4C3D
90 0.2 0.3
454C3D
120 0.2 0.3
3D4C3D
150 0.2 0.3
3D4C45
180 0.2 0.3
3D4C4C
210 0.2 0.3
3D454C
240 0.2 0.3
3D3D4C
270 0.2 0.3
453D4C
300 0.2 0.3
4C3D4C
330 0.2 0.3
4C3D45

Suppose we have an object painted in a nice shade of blue. The object is partially lit by a neutral light source and sits partially in the shadow. What we need is a palette of constant hue and diminishing lightness for the shadows, and decreasing saturation for the uplit parts. Adding white to a color is in the HSL color space the same as decreasing the saturation.
We could use the first row of the following palette for the shadows and the second row for the lighter parts. The color quality (hue) remains constant, so we are sure that we are dealing with one and the same object.
185 1 1
00EAFF
185 1 0.8
00BBCC
185 1 0.6
008C99
185 1 0.4
005E66
185 1 0.2
002F33
185 1 1
00EAFF
185 0.8 1
33EEFF
185 0.6 1
66F2FF
185 0.4 1
99F6FF
185 0.2 1
CCFBFF

A similar situation occurs if we need a range of colors, but with versions for the shadows and the highlights. Look at the HSL numbers and you will see how the colors fit together.
Highlight versions
0 0.1 1
FFE6E6
30 0.1 1
FFF2E6
60 0.1 1
FFFFE6
120 0.1 1
E6FFE6
180 0.1 1
E6FFFF
240 0.1 1
E6E6FF
300 0.1 1
FFE6FF
Light versions
0 0.4 1
FF9999
30 0.4 1
FFCC99
60 0.4 1
FFFF99
120 0.4 1
99FF99
180 0.4 1
99FFFF
240 0.4 1
9999FF
300 0.4 1
FF99FF
80% Saturated originals
0 0.8 1
FF3333
30 0.8 1
FF9933
60 0.8 1
FFFF33
120 0.8 1
33FF33
180 0.8 1
33FFFF
240 0.8 1
3333FF
300 0.8 1
FF33FF
Darker versions
0 0.8 0.6
991F1F
30 0.8 0.6
995C1F
60 0.8 0.6
99991F
120 0.8 0.6
1F991F
180 0.8 0.6
1F9999
240 0.8 0.6
1F1F99
300 0.8 0.6
991F99
Deep shadow versions
0 0.8 0.2
330A0A
30 0.8 0.2
331F0A
60 0.8 0.2
33330A
120 0.8 0.2
0A330A
180 0.8 0.2
0A3333
240 0.8 0.2
0A0A33
300 0.8 0.2
330A33

 

Go to the index at the top


Working with HSL: complementary colors

You need a 32-bits (Truecolor, millions of colors) color screen to fully appreciate the examples.
A color and its complementary color give when mixed together a neutral grey. Complementary colors give for many designs a nice color contrast if placed next to eachother. Starting from one color, how do I get the complementary color? If you think HSL, the answer is simple. Just add 180° to the hue value. If the results gets larger than 360°, reduce it to values between 0 and 360° by subtracting 360°. Let's give some examples.

We start with a nice orange color with a hue of 40°. The complementary color has a hue of 40° + 180° = 220°. This is a blue color. We show the contrasts with two different values of the lightness.
Another example is a purplish red with a hue of 340°. The complementary color is 340° + 180° = 520° --> 160°, a nice green color.
color
40 1 1
FFAA00
40 1 0.4
664400
340 0.8 1
FF3377
340 0.8 0.4
661430
complementary color
220 1 1
0055FF
220 1 0.4
002266
160 0.8 1
33FFBB
160 0.8 0.4
14664B

In the same manner we can find contrasting color trios. Since the whole hue range measures 360°, the largest color contrast with 3 colors can be obtained by finding colors that are 360°/3 = 120° apart. Start with one color, add 120° and when the result gets larger than 360°, subtract 360°.
Let's start with a blue of hue 190. Add 120 for the next color: 310. And again 120 for the next color: 430, but this is larger than 360, so subtract 360 to get 70. We also found the complementary colors as described earlier.
color trio
190 1 1
00D4FF
310 1 1
FF00D4
70 1 1
D4FF00
complementary trio
10 1 1
FF2B00
130 1 1
00FF2B
250 1 1
2B00FF


Now for a more difficult example. We start with two autumn colors and we want a third color which is in contrast with those two colors. Let's take a rather dark brown with hue 35 and a dark green with hue 75. The average hue is (35 + 75)/2 = 55. In contrast with this color is the hue value 55 + 180 = 235. We chose a lighter variant of this color in order to enhance the contrast.
two colors
35 0.8 0.3
4C330F
75 0.6 0.4
576629
contrasting color
235 0.7 0.7
3640B2

As the examples in this chapter tried to make clear is that working in the HSL color space is very intuitive if we want to find certain colors quickly. Mathematically oriented people might object that for instance finding a contrasting color of two others, as demonstrated in the last example, does not give the 'right' answer if we do this the HSL way. We get a physically better answer if we use a color space with a more even distribution of color differences in relation to the sensitivity of the human eye. In reality this doesn't make much difference. And certainly not in the design phase. If a color doesn't seem right, you adjust it by hand. However, as soon as your design is ready, you expect that it gets printed the right way. In this process color profiles, CIE color spaces, gamut mapping, color proofs etcetera play an important role. HSL is almost useless for carrying out these processing functions.

 

Go to the index at the top


Downloadable color patches

A big help in designing with color are pages with a lot of color patches. In the internet you can find many pages with RGB color patches, including pages with the named browser colors and Unix colors. But nowhere pages with HSL patches can be found. Until now!
In a downloadable zip archive (276 KB) you will find 3 HTML pages with 7200 color patches and 100 grey patches each. One page has hue groupings, the second page has saturation groupings and the third has lightness groupings. If you have read the exercises chapter in this article, you know how useful these pages are.
If you click on the link below, you will get a very small sample of these pages.
Panel with samples

The zip-archive will expand to a folder (directory) with 3 files, each about 640 KB big. Some browsers and some systems, especially with not too many Megabytes in RAM, will have problems displaying such large pages with many table cells. No problem however on a modern computer.

 

Go to the index at the top


What about web safe colors? And i-mode colors?

If you are designing for color deprived systems, the best you can do is to use colors which hopefully will not be dithered. A system that is not able to display millions of colors (24-bits), is likely to simulate colors by a horrible dot pattern or by shifting colors to ugly replacements.
If you use only the hexadecimal numbers 00, 33, 66, 99, CC and FF in your web color specifications, chances are that a color deprived computer system is able to show solid colors instead of dithered ones. With the mentioned 6 color numbers, 6 x 6 x 6 = 216 different colors can be specified.
Many web pages with color information make you believe that these 216 colors are absolutely safe. This is not true. A 'colorly challenged' system is not able to show colors correctly or usefully - period.
But why should you confine yourself to 216 or even fewer colors? You read this article because you are designing with colors. Most of your readers and viewers look at your pages with a computer that is perfectly capable of showing millions of colors. There is no need to use 'web safe' colors.
But if there is any reason to use the 216 so called 'safe' colors, here you can find a pop-up window with all 216 colors:

Panel with 216 web safe colors

Unfortunately this panel shows the colors in the usual useless manner. Virtually every page of web safe colors has the colors sorted in a mathematically interesting way, which is visually useless. Much more useful to the designer would be a list with colors, sorted by hue. Where can I find such a list? Read on!

An i-mode mobile telephone is a 'colorly deprived' system. This type of telephone is able to display web pages, programmed in cHTML. Colors can be used, but must be chosen from a palette of 256 specific colors. The mathematical construction of these colors is a bit similar to the web safe colors.

On a separate page all web safe colors and all i-mode colors are shown, sorted by hue and including short notes about the construction of the color codes.

 

This concludes the Color Design Tutorial. In a separate math section many algorithms are given for converting colors.

 

Go to the index at the top


Silly questions

I don't get it, nothing of it. What's the point in all this?
Hmm, if you were looking for amusement, then I suggest for instance Disneyworld.
Just keep doing it the intuitive way. This also leads to results. Another way is trying to quantify what you are doing in order to obtain some results much easier. That's what this article is all about.

Why did you write color instead of colour?
Many more people looking for pages on the internet know the American spelling color better than the British spelling colour. But in the meta-tags of this document also a 'colour' keyword has been incorporated.

With what advanced web development environment has this story been put together?
Sounds silly, but the answer is: a text editor. All HTML-code was written by hand.
That's not too difficult, so it can be done by anyone with a bit of knowledge of programming HTML. One of the major advances is that the code is slim. Even simple HTML-editors tend to produce very bulky code with lots of superfluous spaces, unnecessary end-tags, far too many font-tags, etcetera.
The downloadable pages with color patches were programmed. The code produced by the program was augmented manually with for instance the explaining text.

How was the document title with the color gradient made?
By hand, with (deprecated!) font-tags and a color designation in each tag. The colors were found on the page with constant saturations. The grey background is a background color definition in the style attribute of a paragraph tag.
Hmm, a grey background? Not seen! Then your browser doesn't support style sheets or you have inactivated style sheets. Check the preferences or properties of your browser.

Why do I see here and there strange characters?
Because your browser is too old or not configured too well. It could be that your font is a CJK/Unicode font.
What do you see on the next line?
 
If it's nothing, then everything is fine. But if you see something, then it is possible that you have a foreign font with a character defined on the location where a non breaking and non visible space should be defined.
And what do you see on the next line?
120°
If you can't make 120 degrees out of this, then your browser is too old or ill configured. Try another display font if you think your browser is OK. This document has a meta-instruction that tells your browser that the page should be displayed as ISO-8859-1, i.e. with 'normal' American/West European characters.

Why don't I see the color examples in print?
Some browsers have in their Print dialog or somewhere else (Extra: Internet options: Advanced) a checkbox for printing backgrounds. Click a check in this checkbox. Most color patches in this document are implemented as background colors in table cells.
If you don't see rectangular color patches on your screen, then it is possible that your browser is not suitable.

 

Go to the index at the top


Although this page has been put together with the utmost care, errors are possible. The author cannot be held liable for any possible damages, caused by using the information on this page or any related page.
The copyright (©) of these pages and any other commercial rights are fully owned by the author: Oscar van Vlijmen. The pages with the 7300 HSL color patches may be distributed freely under the terms explained in those pages.

Please address questions, reactions, suggestions, corrections and other constructive remarks to the email address you can construct from:
ovv (at) hetnet.nl

© Oscar van Vlijmen, April 2001
Date of last modification: 2012-06-24
URL: http://home.kpn.nl/vanadovv/color/ColorDesign.html

Go to the color index page