Color Spot Tables: tables of color swatches and color codes used in HTML and CSS

Color Terms

This page describes and illustrates terms used in The Color Spot and explains the color codes and named color sets included in its pages.

RGB

The term RGB (meaning Red, Green, and Blue) is used often in Web color codes because these are the primary colors of light. Light is an additive color phenomena in which red, green, and blue can be mixed together to produce other colors. You might notice this if you look at the lenses of a computer display projector--you'll see a red, green, and blue lense.

You may remember the primary colors as red, yellow, and blue in mixing paint. Paint is a subtracive color pheonomena in which the pigments absorb light. We could use red, yellow, and blue paints and mix them to make other colors for painting a picture.

RGB was the first system devised to specify Web colors and is universally recognized by Web browsers as a means to specify colors. All that is required is to identify how much red, green, and blue a color should contain, and this can be done using a variety of notations and techniques (See the Color Codes section, below). The drawback of specifying color with RGB is that it is hard to visualize the correspondence between an RGB code and a color. You would not likely to be able to say what a color with light levels of 87% red, 100% green, and 65% blue looks like. When creating a RGB color code, you'll usually use swatch tables or interactive tools to choose a color code.

HSL

HSL refers to hue, saturation, and light and is an alternate means to specify Web colors. The benefit of HSL is that it identifies colors in a way that is a bit more intuitive and easier to use for making color schemes. The drawback of HSL is that many Web browsers do not recognize HSL color specifications. Software is available (Use Swatch Control or see references) which can translate among RGB color codes to HSL codes. The coordinates of the HSL system are hue (referring to color), saturation (referring to purity), and light.

Hue

Hue is the property of light which identifies color within the spectrum. Hue ranges over colors with familiar names like red, green, orange, yellow, green, blue, indigo, and violet. For convenience, hue is often visualized to be on a color wheel or circle. In Web colors, hue is measured in 360 degrees of a color circle. Red is at 0°, green is at 120°, and blue is 240°. At 360°, the measure of hue goes back to 0°.

Here is a table showing swatches of color ranging in hue from 0° to 330°:


 
330°

 
30°

 
300°

 
60°

 
270°

 
90°

 
240°

 
120°

 
210°

 
150°

 
180°

 

Hue alone is not the sole determiner of how a color will look on a Web page. For example, here are swatches of colors, all of which have a hue of 195° (rounded to the nearest degree):

Colors with Hue of 195°
#9AC0CD

 
#50A6C2

 
#ADD8E6

 
#B2DFEE

 
#00688B

 
#0099CC

 

What makes these colors look different are qualities of a color other than hue that come into play--saturation and light, covered below.

Saturation

Saturation measures the vibrancy or purity of a color. A pure color has no gray mixed in within it. In Web codes, saturation is measured in percent, ranging from 0% for no saturation, to 100% for full saturation (pure color).

Here is a table showing saturation ranging from 0% to 100% for a swatch of red (0° hue):

Saturation
0%

 
10%

 
20%

 
30%

 
40%

 
50%

 
60%

 
70%

 
80%

 
90%

 
100%

 

You can see in this table, that lower saturation means that the color has more grey and appears faded and less intense.

Light

Light is the measure of the brightness or brilliance of a color. You can have so much light in a color that you get white, and so little light that you get black. In Web colors, light is measured from 0% for no light to 100% for full light.

Here is a table showing light ranging from 0% to 100% for a swatch of red (0° hue) at its full saturation:

Light
0%

 
10%

 
20%

 
30%

 
40%

 
50%

 
60%

 
70%

 
80%

 
90%

 
100%

 

You'll notice that as light increases, the swatch becomes lighter until pure white at 100% light. Note that the low light levels are dark, not faded or dull as in the low saturation levels shown in the saturation table. The 50% light level is considered "normal" and is often used to display colors. For example, the both the hue color wheel and saturation tables shown previously show swatches at 50% light.

Color Codes

Web specifications allow for a variety of ways to specificy colors. Here is a line from the color codes table that shows these codes:

Color NameHex SwatchHex CodeDec Code% CodeHSL CodeCMYK Code
melonrindgreen
 
#DFFFA5rgb(223, 255, 165)rgb(87%, 100%, 65%)hsl(81, 100%, 82%)cmyk(13%, 0%, 35%, 0%)

These codes follow the color name and its swatch and are as follows:

Hexadecimal (Hex) Code
The RGB (red, green, and blue) values of the color as measured by three, two-digit base 16 (hexadecimal) values ranging from 00 to FF.
Decimal (Dec) Code
The RGB values of the color as measured by base 10 (decimal) values ranging from 0 to 255.
% Code
The RGB values of the color as measured by percent values ranging from 0% to 100%.
HSL Code
The hue ranging from 0° to 360°, saturation from 0% to 100%, and light from 0% to 100%.
CMYK Code
This code is not used in Web colors but is given for comparison only to printer's ink specification. CMYK refers to the Cyan, Magenta, Yellow, and Black values of an ink given by ranges from 0% to 100%. The K stands for black so as not to use the letter B which might be confused with blue.

Use the Swatch Control tool to see how these codes and quantities define the color of a swatch. See references for mathematical formulas and other software which can translate among RGB, HSL, and CMYK codes.

Named Color Sets

Among all the colors the human eye can discern, people have picked out colors of interest and have given them names. These names are based on language (purple, orange, tan, or silver, for example) or on the color's correspondence to objects in nature (skyblue, seagreen, plum, or celery, for example). Descriptive color names and their values are often subjectively interesting colors that you might consider using in Web pages.

Some color names have been judged important enough to become part of Web standards. Other color names are not part of Web standards, so you shouldn't use the name of a color to specify it for Web work--use the hexadecimal code (as given in the Hex Codes chart) instead.

Here are named color sets I include in The Color Spot:

16 Named Colors
A set of 16 named colors first set forth in HTML 3.2 specifications. These names can be used drectly to specify colors in HTML or CSS and are almost universally recognized in all Web browsers because they were established so long ago.
SVG Colors
A set of 147 color names defined by the Scalable Vector Graphics (SVG) Specification. These names can be used drectly to specify colors in HTML or CSS, but are not recognized in all Web browsers because they are relatively new.
X Window System Colors.
The X Window System is a graphical interface for Unix-like and other operating systems. A text file found on many X Window System computers, /lib/rgb.txt, maps color names to RGB values. According to "X11 color names," from Wikipedia, it is not known who originally compiled this list, and it "shows neither a continuity in selected color values nor in color names," but I include this set because of its ubiquity.
johndecember.com custom colors.
I prepared colors specifically for The Color Spot based on the colors of objects. I did this using software tools to measure colors of digital images of objects. Colors I prepared include: cola, chili powder, kidney bean, desert sand, cinnamon, light copper, cool copper, peach, beach sand, honey, ash, buttermilk, cream city brick, corn, fog, celery, battleship, chrome, cucumber, moon, emerald green, mint, blue ice, lake michigan, heather blue, aluminum, cranberry, and ruby red.
User-submitted and encountered colors.
I included some colors that users suggested to me, such as eton blue, as well as special colors that I found described in other sources, such as cerulean blue.

There have been efforts to systematize the naming of colors. I provide a discussion of color names in terms of the ISCC-NBS Method of Designating Colors.

search Search · star Market
2023-06-19 · John December · Terms © johndecember.com