CSS colors

Colors* have at least four different notations in CSS but front-end developers traditionally have used just the first two, while the last two have more to do with graphic design:

• Named (e.g. "red", "orange", "black")
• Hexadecimal (e.g. "#990000" to refer to a specific shade of red)
• RGB (a red-green-blue notation)
• HSL (a hue-saturation-luminosity notation)

An alpha value also exists to deal with opacity (or fadedness)!

Named

In this notation, we simply use English names for colors:

.redFont {
  color: red;
}

However, we limit ourselves in terms of shades and become prone to spelling mistakes!

Hexadecimal

With hexadecimal (base-16) numbers, each "digit":

• can be anything from 0 to 15, with A representing 10, B for 11, all the way up to F for 15
• when combined with another "digit", a two-digit hex code pair can have up to 256 combinations:
  • 11 would equal (1 x 16) + (1 x 1) = 17
  • 23 would equal (2 x 16) + (3 x 1) = 35
  • A4 would equal (10 x 16) + (4 x 1) = 164
• 3 pairs of hexadecimal digits would therefore represent 16,777,216 (256 x 256 x 256) combinations of colors!

Using hexadecimal notation, therefore, we can express that many colors with just 6 characters!

.hexFont {
  color: #6469C8;
}

We would look at each pair of digits after the # as such:

• First pair (#64) would be the amount of red [(16 x 6) + 4 = 100]
• Second pair (#96) would be the amount of green [(16 x 9) + 6 = 150]
• Third pair (#C8) would be the amount of blue [(16 x 12) + 8 = 200]

The numbers also come with no randomness:

• a number closer to 0 means a darker shade
  • all three pairs with #00 makes black!
• a number closer to 255 means a brighter shade
  • all three pairs with #ff makes white!

RGB notation

This follows the same principle as hexadecimal but using a different notation: each argument has a range from 0 (black) to 255 (white), creating the 16.7 million or so shades of color:

.rgbFont {
  color: rgb(100, 150, 200)
}

Note the numbers above are equivalent to the hexadecimal notation of #6496C8!

As with hexadecimal, each number represents the amount of red, green and blue in that order. We can think of RGB notation as decimal rather than hexadecimal notation.

HSL notation

Meanwhile, HSL (hue-saturation-luminosity) notation has to do with two additional properties of color:

.hslFont {
  color: hsl(240, 50%, 50%)
}

• The first number represents the degree value of the hue on the color wheel:
  • 0/360 = red
  • 60 = yellow
  • 120 = green
  • 180 = cyan
  • 240 = blue
  • 300 = violet
• The second number to do with saturation (a percentage):
  • 0% = less color (a grayer look)
  • 100% = richer color (a more vivid look)
• The third number to do with luminosity (a percentage):
  • closer to 0% = darker, to full-on pitch black
  • 50% = normal lighting
  • closer to 100% = brighter, to full-on "blinding" white

We would normally use this kind of notation to manipulate images, especially photography, where we want to adjust for intensity and exposure.

Alpha notation

The alpha, or opacity (fadedness), represents the fourth argument in each of RGB and HSL:

.RGBAclass {
  color: rgba(100, 150, 200, 0.2) /* 20% opacity */
}

.HSLAclass {
  color: hsla(240, 50%, 50%, 1.0) /* 100% opacity */
}

An opacity ranges from 0 (no visibility) to 1 (full visibility) while 0.5 would mean "half-faded". If omitted, the default opacity value is just 1.

We could also modify the opacity in the other notations with the opacity property in CSS:

.namedColorClass {
  background-color: red;
  opacity: 0.5;
}

.hexColorClass {
  background-color: #990000;
  opacity: 0.5;
}

In each of the cases, the background would look half-faded with an opacity value of 0.5.