When specifying the color of text, borders, backgrounds and other elements, there are three ways to specify the color to be used.

Colors used on web sites are achieved using combination of Red, Green and Blue. Complete saturation of all the colors creates white and zero saturation of all three colors creates black. It has to do with combining wavelengths of light to produce different colors.


Using a standard name for the color

CSS has a limited set of 17 specific colors with predetermined values. An example of using the name of the color in a CSS Style Sheet would be:

#headerarea {background: maroon;}
.babyname {color: fuchsia; }

These color names are shown below with the equivalent hexadecimal number for that color:

#ffffff white
#000000 black
#808080 gray
#ff0000 red
#ffa500 orange
#ffff00 yellow
#800080 purple
#008000 green
#0000ff blue
#c0c0c0 silver
#800000 maroon
#808000 olive
#ff00ff fuchsia
#00ff00 lime
#000080 navy
#00ffff aqua
#008080 teal

Extended color keywords

In addition to the basic colors shown above, there is a list of extended color keywords.

  aliceblue
  antiquewhite
  aqua
  aquamarine
  azure
  beige
  bisque
  black
  blanchedalmond
  blue
  blueviolet
  brown
  burlywood
  cadetblue
  chartreuse
  chocolate
  coral
  cornflowerblue
  cornsilk
  crimson
  cyan
  darkblue
  darkcyan
  darkgoldenrod
  darkgray
  darkgreen
  darkgrey
  darkkhaki
  darkmagenta
  darkolivegreen
  darkorange
  darkorchid
  darkred
  darksalmon
  darkseagreen
  darkslateblue
  darkslategray
  darkslategrey
  darkturquoise
  darkviolet
  deeppink
  deepskyblue
  dimgray
  dimgrey
  dodgerblue
  firebrick
  floralwhite
  forestgreen
  fuchsia
  gainsboro
  ghostwhite
  gold
  goldenrod
  gray
  green
  greenyellow
  grey
  honeydew
  hotpink
  indianred
  indigo
  ivory
  khaki
  lavender
  lavenderblush
  lawngreen
  lemonchiffon
  lightblue
  lightcoral
  lightcyan
  lightgoldenrodyellow
  lightgray
  lightgreen
  lightgrey
  lightpink
  lightsalmon
  lightseagreen
  lightskyblue
  lightslategray
  lightslategrey
  lightsteelblue
  lightyellow
  lime
  limegreen
  linen
  magenta
  maroon
  mediumaquamarine
  mediumblue
  mediumorchid
  mediumpurple
  mediumseagreen
  mediumslateblue
  mediumspringgreen
  mediumturquoise
  mediumvioletred
  midnightblue
  mintcream
  mistyrose
  moccasin
  navajowhite
  navy
  oldlace
  olive
  olivedrab
  orange
  orangered
  orchid
  palegoldenrod
  palegreen
  paleturquoise
  palevioletred
  papayawhip
  peachpuff
  peru
  pink
  plum
  powderblue
  purple
  red
  rosybrown
  royalblue
  saddlebrown
  salmon
  sandybrown
  seagreen
  seashell
  sienna
  silver
  skyblue
  slateblue
  slategray
  slategrey
  snow
  springgreen
  steelblue
  tan
  teal
  thistle
  tomato
  turquoise
  violet
  wheat
  white
  whitesmoke
  yellow
  yellowgreen

 


Using RGB values for specifying colors

RGB stands for Red, Green, Blue. The rgb() value given to a CSS Property specifies the INTENSITY of each color as it is to be displayed on a screen. Do not get this confused with the color wheel that you learned in elementary school. Otherwise, you would never get any yellow colors! The technical term is the chromaticities of a particular phosphor set, adaptive whitepoint and viewing conditions.

An example of using RGB colors for properties in a CSS Style Sheet would be:

#pinkbox {background: rgb(222,187,245); border: 3px solid rgb(250,15,240)}
.greenheader {color: rgb(34,67,12) }

The values for each RGB color are from 0 to 255, with 0 being none of that color and 255 being completely that color. The values can be combined to allow for 16,777,216 possible combinations. Following are some examples of RGB colors:

  rgb(0,0,0)
  rgb(255,0,0)
  rgb(0,255,0)
  rgb(0,0,255)
  rgb(255,255,255)
  rgb(255,255,0)
  rgb(34,67,12)
  rgb(158,205,15)
  rgb(200,200,200)
  rgb(254,125,0)
  rgb(0,0,184)
  rgb(255, 0, 255)
  rgb(12,8,75)
  rgb(222,187,245)
  rgb(250,15,240)
  rgb(185,185,16)
  rgb(45,255,12)
  rgb(0,255,255)

Using hexadecimal colors in style sheets

Using hexadecimal colors can be a bit obscure until you learn the patterns. There are three sets of colors combined for a hexadecimal color, with values ranging from 0 to F.

An example of a hexadecimal number is: color: #550033.

The first two numbers are the red value, same as RGB. The second two numbers are the green value and the third two numbers are the blue value. "FF" is the complete saturation of that color and "00" is none of that color. There is no opacity with hexadecimal colors. You must use the additional opacity property to achieve afaded color that is semi-transparent.

  • 0 means none of that color, 255 means all of that color in the mix
  • the closer the three numbers are to each other, the resulting color is more grey ranging from pure black to pure white
  • if one color is a high number and the others are low, the resulting color is more intense
  • all numbers low = darker tones
  • all number high = lighter tones
  • high, low, low = red tones
  • high, high, low = yellow tones
  • low, high, low = green tones
  • low, high, high = cyan or aqua tones
  • low, low, high = deep blue tones
  • high, low, high = magenta tones
  • high, high, high = lighter greys to white
  • low, low, low = darker greys to black

Color Tool

Here is a link to a Zemplate Color Tool: jq.zemplate.com/images/jquery-demos/demo-colortool.html.

This tool can help assist you with visualizing and tweaking hexadecimal colors. After tweaking the color, you can copy the new hexadecimal color.



Image of a color spectrum for HTML colors

Here is a link to a Zemplate Color Chart Spectrum: cheatsheet.zemplate.com/jquery/samples/imagecolorpicker.html. This will give you the hexadecimal color as you click on the colored screen. This chart does not have all of the possible colors, but it does give you an idea.


Using RGBA to represent colors

There is also the possibility of using RGBA colors or rgba(). This way of specifying the color adds the last value of OPACITY. Opacity sets how dense the color is on the screen. It does more that just lighten the color, it allows other elements to be seen if this color overlays it.

The opacity is set as a decimal number from 0 to 1 with 1 being 100% opacity. Examples would be rgba(34,100,39,0.5) or rgba(124,127,45,0.2).

Photo of the Denver Skyline

Welcome to
Downtown
Denver

cherrycreek-skyline

Welcome to
Downtown
Denver

cherrycreek-skyline

Welcome to
Downtown
Denver

color: rgba(28,60,10,1); color: rgba(28,60,10,0.5); background: rgba(255,255,255,.5)

In the example above, each of the fonts have the same RGB color specified. On the left is 100% opacity, but in the middle the opacity of the color propety is set to 0.5 or 50% opacity. As you can see, you can see the background image through the letters. In the final example, an opacity is applied to the background.


Using hexadecimal colors for specifying colors

Hexadecimal specifications for colors convert the RGB values into a combination of numbers and letters. If you have 256 values and you want to represent them in a two digit form, you need 16 values for the first and for the second giving you a possibility of 16 * 16 possible values or 256 possible values. In order to get these 16 possibilities you use the numbers 0 through 10 then add the letters A through F. You can use upper or lower case for the letters when using hexadecimal values for colors.

An example of hexadecimal color specifications in a CSS style sheet would be:

.minorheading {color: #77AA45;}
#focusarea {background: #4A226C; border: #00002A solid 1px;}

Using hexadecimal values is the most popular way of specifying colors for the web. This system uses the fewest characters. You cannot specify opacity with hexadecimal numbers, but you can use the opacity property.

Another way to use hexadecimal colors is to use only three digits. This method assumes that the value is the same for the second value or R, G or B.

#fff = #ffffff     #cba = #ccbbaa     #005 = #000055

Using only the three digits reduces the number of characters and the typing strokes. You must use with three or six characters or the browser will not represent your color properly.