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 -
outline-color. For each of these properties, the colour value can be any of the following -
- A named keyword, e.g.
- An rgb or rgba unit, e.g.
rgb(0, 0, 0)
- An hsl or hsla unit, eg.
hsl(0, 0%, 0%)
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 -
rgb and rgba #
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||
|Percentage||A percentage value (0-100%) for each primary colour||
|Hexadecimal(6-digit)||A 6-digit format forming a unique code for each colour combination||
|Hexadecimal(3-digit)||Shorthand for 6-digit hexadecimal notation||
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,
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|
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 -
color: rgb(0, 0, 0); /* fallback for IE8 */
color: rgba(0, 0, 0, 0.5);
hsl and hsla #
The HSL model is an alternative to RGB. It works by specifying three dimensions - hue, saturation and lightness.
|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 -
background-color: hsl(200, 90%, 70%);
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.
color: hsla(0, 100%, 50%, 1);
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 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
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 -
||Same value as the
For example -
background-color: currentColor; /* computed value of #000 */
This value specifies that the element should take the same colour as it's parent.