CSS Color
Color can be defined in RGB space, that is red, green and blue. The color value is a 6 digit base 16 ("hex") number of the form XXXXXX. The first two digits are red, the next two green the next two, blue. So, 440000 is red only, 004400 is green only and 000044 is blue only while 444400 is red and green which makes yellow (it only makes brown if you're mixing paint or ink, we're mixing light which makes yellow). Double that 4 to an 8 and there's more of that color for example 88000 is more red, 008800 is more green, 000088 is more blue and 888800 is more yellow.

Since it's hex, it doesn't go from 0 - 9 it goes 0 - 9, A, B, C, D, E, F so the two digit hex number ranger from 00 FF. So, maximum id each color would be: So, FF0000 is red only, 00FF00 is green only and 0000FF is blue only while FFFF00 is red and green which makes yellow (it only makes brown if you're mixing paint or ink, we're mixing light which makes yellow)

In CSS color can be expressed as rgb (nnn, nnn, nnn) where nnn is a three digit decimal number from 0 to 255. So #ff0000 is the same as rgb (255, 0 ,0).

As CSS evolved new methods of specifying color were added, HSL and Transparency. HSL is just a different method for specifying color, instead of red, gree, blue, you get hue, saturation and lightness. Hue is the tonal value of the color, the red or green part while saturation is how intense it is, that is, how much of the color you get, while lightness (really luminance, but you get the point) is how bright, or closer to white it is. This is specified as hsl (rrr, ddd, ddd) where r is a decimal number from 0 to 359 specifying how many degrees around the color wheel to choose a color from and ddd is a number from 0 to 100 (that right, 101 values) that controls the amount of saturation and lightness respectively.

  • hsl(0, 100%, 50%) - Red
  • hsl(60, 100%, 50%) - Yellow
  • hsl(120, 100%, 50%) - Green
  • hsl(180, 100%, 50%) - Cyan
  • hsl(240, 100%, 50%) - Blue
  • hsl(300, 100%, 50%) - Magenta/Purple

As a result, it becomes extremely easy to select a hue and then modify it by simply modifying its saturation and lightness values. This gives a range of options to the designer and developer that are very intuitive (Table 2).

Table 2: HSL: Base Hue, Saturation, & Lightness
HSL: Blue (RGB: #0000FF) HSL: Saturation decrease HSL: Light decrease HSL: Change both
       
       
       
       
       
       
HSL: Red (RGB: #FF0000) HSL: Saturation decrease HSL: Light decrease HSL: Change both
       
       
       
       
       
       

Transparency was introduced which gave the new constructs rgba and hsla. The difference between rgb and rgba is, they both let you specify what amount of color comes through, but rgb assumes what isn't the small amount of color you specify is black while rgba assumes it's whats underneath the area you're coloring, that is it's transparent. hsla works the same way.

rgb(100, 50, 20)

rgba(100%, 50%, 20%, 0.9)

hsla(100, 50%, 60%, 0.5)

Table 3: Alpha transparency in RGBA and HSLA
Almost transparent .25 transparency .50 transparency Opaque