Working with Colour in CSS

Similarly to how we have different units for font sizes, there are a number of different ways we can define a colour in css.

There are currently four css properties that accept a colour as a value - color, background-color, border-color, and outline-color. For each of these properties, the colour value can be any of the following -

• A named keyword, e.g. black
• An rgb or rgba unit, e.g. rgb(0, 0, 0)
• An hsl or hsla unit, eg. hsl(0, 0%, 0%)
• transparent
• currentColor
• inherit

Named keywords #

Named keywords are plain English names for certain colours which have been predefined within css. Modern browsers understand these keywords in the same way that they understand the other numeric inputs.

There are currently 145 of these keywords, each with a corresponding numeric RGB value.

Using a named keyword is as simple as writing -

div {
  color: plum;
}

rgb and rgba #

rgb #

The RGB format is the most popular way of defining colour in CSS. The RGB colour model works by declaring specific levels of red, green and blue.

There are four formats in which RGB can be written in for css -

Notation	Description	Example - Black
Decimal	Value between 0 and 255 for each primary colour	rgb(0, 0, 0)
Percentage	A percentage value (0-100%) for each primary colour	rgb(0%, 0%, 0%)
Hexadecimal(6-digit)	A 6-digit format forming a unique code for each colour combination	#000000
Hexadecimal(3-digit)	Shorthand for 6-digit hexadecimal notation	#000

The 3-digit hexadecimal notation is a shorthand for certain 6-digit values which have repeating elements. The 3-digit version is converted into the full 6-digit version by duplicating each of the three digits. For example, #fb0 becomes #ffbb00.

rgba #

RGBA is an extension of RGB to allow the specification of transparency within the same function. Only the decimal and percentage notations can be used with RGBA.

Notation	Example - Black, 0.5 Opacity
Decimal	rgba(0, 0, 0, 0.5)
Percentage	rgba(0%, 0%, 0%, 0.5)

The RGBA unit is treated as a completely separate unit to RGB. This means that, for browsers that do not support RGBA (notably IE 8) the entire function will be disregarded. It is not the case that the opacity section at the end will just be ignored.

If you need to support these browsers, you will need to provide a solid colour fallback. For example -

div {
  color: rgb(0, 0, 0); /* fallback for IE8 */
  color: rgba(0, 0, 0, 0.5);
}

hsl and hsla #

hsl #

The HSL model is an alternative to RGB. It works by specifying three dimensions - hue, saturation and lightness.

Dimension	Range	Key Values
Hue	0 - 360	0/360 = red120 = green240 = blue
Saturation	0 - 100%	0% = grey100% = full colour
Lightness	0 - 100%	0% = black50% = normal100% = white

The hue value is represented by the angle on the colour wheel. From this value, we can determine what colour - red, green, blue, or a mix between them - we are working with.

The saturation value is represented by the distance from the axis. It detemins the strength of the colour, with the lowest saturation being closer to the centre of the circle.

The lightness value is represented by the z-axis, the depth of the cylinder. This percentage value determines the shade of the colour, with 0% being completely black, 100%, being completely white, and 50%, being normal.

HSL is seen as a more intuitive format for colour because we are able to reason what a colour might be just from looking at the numeric value. For example, a pastel blue could be -

div {
  background-color: hsl(200, 90%, 70%);
}

Pastel Blue

hsla #

Like RGBA, the HSLA unit is an extension of HSL to allow the specification of transparency within the same function. The opacity unit is added as a fourth argument to the function.

div {
  color: hsla(0, 100%, 50%, 1);
}

transparent #

The transparent value for a colour-related css property can be used to specify a completely opaque colour.

It is treated in a similar way to the named keywords, in that it is essentially a shorthand for writing an RGBA value. What is actually computed when we use this value is rgba(0, 0, 0, 0).

currentColor #

The currentColor value is a keyword defined in CSS3. It was added to finally formalise a behaviour in CSS in which the border-color of an element was, by default, the same colour as the color property.

Now that is has been added as a value itself, it can be used on any of the colour related properties. Depending on which property it is set to, it has different meanings -

Property	Computed value
background-color``border-color``outline-color	Same value as the color property on the same element
color	inherit

For example -

div {
  color: #000;
  background-color: currentColor; /* computed value of #000 */
}

inherit #

This value specifies that the element should take the same colour as it's parent.