CSS currently supports three different ways to define colours:

  • Using one of the preset keywords.
  • Using the HSL cylindrical-coordinate system
  • Using the RGB cubic-coordinate system
    • As an RGB triplet
    • As a hex triplet

In this post I'll talk about all of these methods, and the quirks and charteristics of each. There is also a fourth way to define colours which I'll discuss later in this post, but it's a deprecated method that you would more than likely never use, so I left it out of the list above.

Colour Keywords

The CSS colour keywords allow you to use named colours instead of values in your CSS. There are currently 140 named colours in the CSS 3 specification, 17 of which are taken from the original HTML named colours - aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow. None of the named colours have any transparency, they are all solid opaque colours. The CSS 4 specification adds one new colour - rebeccaPurple, in rememberance of Eric Meyer's daughter Rebecca who passed away this year.

Any named colours that contain "gray" can also be used with the alternative spelling, "grey", but only versions of Internet Explorer 8.0 and onwards support the alternative spelling variants.

In addition to the 140 named colours, there are two other keywords than can be used - transparent and currentColor. The transparent keyword simply represents a completely transparent colour, and computes as rgba(0,0,0,0). The currentColor keyword will compute to whatever the current value of color is. It allows you to do things like this:

  div{
color:tomato;
border:2px currentColor dotted;
}

All of the CSS colour keywords are case insensitive, so color:CURRENTCOLOR and color:currentColor would both be valid, as would color:wheat and color:WHEaT.

HSL

Next up is HSL - The hue-saturation-lightness model. You define a HSL colour value by providing 3 numbers, the hue, saturation and lightness. Saturation and lightness are represented as percentages, but hue is just a standard number.

Above is the colour wheel. The hue value of HSL represents an angle on the colour wheel, so 0 degrees would be red, 240 degrees would be blue, and so on. Because the value is an angle, numbers will "wrap around" so that 480 degrees would equal 120, or -120 degrees would equal 240 degrees.

The saturation value is represented as a percentage, with 100% being fully saturated, and 0% making a shade of grey.

Finally is the lightness value, which like saturation is also represented as a percentage. 100% lightness is white, and 0% lightness is black. 50% lightness is "normal".

Here are some colours using the HSL model:

  • hsl(0, 100%,50%) is red.
  • hsl(260, 20%, 50%) and hsl(-100, 20%, 50%) both represent the same colours.
  • When defining blacks, the hue doesn't matter, so hsl(37, 0%, 0%); and hsl(280, 0%, 0%) both represent black.

The RGB Cubic-Coordinate System

Colours can be defined in the red-green-blue model in two ways:

Functional Notation

An RGB value in functional notation is represented as "rgb" followed by three decimal numbers. Each number reperesents the red, green and blue value of the colour you are defining, so rgb(0,0,255) would be blue. Functional notation also allows for percentage values, where 100% represents 255, so rgb(0%,0%,100%) would also be blue. Using a combination of both decimal and percentage values is not supported, so rgb(55%,129,12%) wouldn't (or shouldn't) work.

Another quirk of functional notation is that any values over 255/100%, or under 0/0%, will be clipped, so rgb(450,10,55) would be clipped to rgb(255,10,55), and rgb(-901%,12%,0%) would be clipped to rgb(0%,12%,0%).

Hexadecimal Notation

An RGB value in hexadecimal notation is represented as a "#", followed by either 3 or 6 hexadecimal characters. The RGB value is converted into six digit form by repeating digits, so #FB7 extends into #FFBB77. CSS recognises both the three digit and six digit forms of hexadecimal notation. Hexadecimal notation is also case insensitive, so color:#FFaaBb and color:#fab are both valid.

Opacity

The HSL and RGB colour models have extended forms to allow you to specify the opacity of a colour. RGB is extended into the RGBa colour model, allow you to specify a value for the alpha channel of a colour like so: rgba(255,0,0,0.5). The fourth digit is a value from 0 to 1, with 0 being complety transparent, and 1 being opaque. HSL has been extended in a similar fashion, into the HSLa colour model. It behaves the same as RGBa, the fourth value is a number from 0 to 1, with 0 being transparent and 1 being opaque. hsla(240,100%,50%, 0.4) creates blue with 40% opacity applied to it.

System Colours

System colours is a deprecated feature that allows you to define colours using a list of keywords that correspond to various colour settings on the user's computer. I won't list them all here as they are mostly useless, but I'll list a few interesting ones. Like the colour keywords, all system colours are case insensitive.

  • color:background will set the color the that of the user's desktop background.
  • color:activeBorder will set the color to that of the active window border.
  • color:window sets the color to that of the window background.

There are 28 different system colours, but as I mentioned before it's probably not a good idea to use them as they are deprecated, and probably won't do much (if anything at all) on any modern browsers.


2,224 2 14