Webinar Review: CSS Colors Demystified

Presented by Dave Gash www.davegash.com

Dave Gash’s recent webinar, CSS Colors Demystified, provides a clear and entertaining explanation of how the hexadecimal color coding system works. For those of you who like to know what lies behind the letters and numbers, Dave explains how the physics of colour relates to the base 16 hexadecimal coding scheme. Dave provides clear examples relating specifically to CSS and he finishes with a series of useful weblinks to resources.

For more detail, watch the webinar, CSS Colors Demystified, on the TechCommNZ website. It’s free!

For those of you who want the summarised version, read on…..

Color use in CSS

Colours are very important and are everywhere in CSS e.g. foreground, background links, borders etc.

Hexadecimal color codes are:

  • Specific
  • Consistent
  • Precise

Physics of color pigments vs optics

White light is made up of red, orange, yellow, green, blue, indigo, violet – ROYGBIV – remember your high school physics?

Pigments are subtractive, they remove light

  • Primary colours – Blue Yellow Red
  • Secondary colours are made by mixing primary colours
  • Pigments are subtractive, they remove light
  • The more colours you mix together, the closer you get to black

Pigments diagram

Optics are additive; they add light

  • Primary colours – Red, Green, Blue = RGB
  • Secondary colours are made by mixing primary colours
  • Optics are additive; they add light
  • The more colours you mix together, the closer you get to white

Optics diagram

The level of each colour in the mix determines the end result. This is true in both pigments and optics.

How hexadecimal (base 16) works

Hexadecimal codes provide a standard way for describing the specific combination of colours.

  • Red 0-255
  • Green 0-255
  • Blue 0-255

Hexadecimal is the most popular way to describe colour.
#(hexadecimal)FF(red)00(green)80(blue)

Hexadecimal uses base 16.

Hexadecimal digits

Hexadecimal place names

Any colour with any level of red, green and blue can be coded in six hexadecimal digits.
#000000 (black) to #FFFFFF (white) = 16,777,216 colors.

E.g. #FF0080 = full red, no green, half blue.

How CSS colors are coded in hexadecimal

how css colours are described in hexadecimal

Note: letter case doesn’t matter.

Higher number (closer to FF) means more light
=> Closer to white = brighter colours

Lower numbers (closer to 00) = less light
=> Closer to black = darker colours

Practical color use in CSS

Practical css use

CSS 3-digit shorthand

You can abbreviate hexadecimal color codes to smooth out colours. This is not recommended.

Tagged with 

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>