Skip to Main Content

TCLC Summer Camp 2017

CSS With Floaties On

Specifying colors

In our previous example I introduced color to a class...

.warning {background-color:#990000;}

I said it was red, but what is that odd number?

HEX colors

Computer screens display the colors we perceive through a combination of Red, Green, and Blue light.

This color is described in CSS as a hexadecimal** in the pattern of #RRGGBB.

  • Higher numbers = more light in that color 
    • If RGB is turned all to high the color is white.
    • #FFFFFF
  • Lower numbers = less light in that color
    • If RGB is turned all to low, the color is black.
    • #000000

In our example #990000, the red digits are medium bright and there is no green or blue, thus the color is a pure red.

If we add some blue and the number becomes #990099, we get nice purple color.

** Hexadecimal is 16-digit base numbering system (0123456789ABCDEF)

Color Picker

It is easiest to use a color picker and copy the number. Note the HEX color always has a hash-tag # before the number.

Contact information goes here