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°:
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):
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):
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:
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.
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 Name | Hex Swatch | Hex Code | Dec Code | % Code | HSL Code | CMYK Code
|
---|
melonrindgreen | | #DFFFA5 | rgb(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.
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.