All the colours of the rainbow.
If you're going to play about with the look of a web page, one of the most important aspects is colour. We can tweak the colour on many aspects of our website including text, background, border and more. Getting the right colour scheme can have a dramatic impact on the look of our pages.
Whilst working through this section of the tutorial you may use the Colour Explorer in the top right to experiment with colours and their values as you go.
There's a fair bit to colour in CSS but to begin with you can easily get away with just knowing Hexadecimal. Don't feel that you must understand the other methods as well but I would recommend you at least skim them to be aware of what is possible.
As I'm from Australia I spell colour with a u. The keyword color uses American spelling however which doesn't have a u. Keep this in mind if, like me, you come from a background which spells colour with a u.
There are 4 main ways in which we may specify colour in CSS. They are:
RGB and HSL also have a mode where we specify an alpha level to indicate opacity.
Wherever colour may be specified, you may use any of these formats.
As you'll soon discover, writing the code to generate a colour is easy. Knowing what values to put in to get the colours you are after can be difficult. To make it easier, there are many tools which allow you to pick colours visually and then it will tell you what the required values are to get that colour.
If you would like some help picking a good colour scheme then you may also want to check out our Introductory Graphic Design Tutorial.
Here is a list of some of the commonly used properties which use colours.
With Hexadecimal we specify the colour using a hash symbol ( # ) followed by 6 hexadecimal digits ( 0-9a-f ). The first 2 hexadecimal digits specify the amount of red, the second 2 the amount of green and the third 2 the amount of blue.
#457c2f
Here are some examples to help you understand them:
The colour must be written as 6 hexadecimal digits (2 for red, 2 for green, 2 for blue). If the value you want for a colour is less than 15 then it must be padded with a 0. eg. #4502f7. You couldn't write it as #452f7 as it would be ambiguous which of the 3 colours should only be a single digit.
And now let's see it in action:
This is a colourful sentence.
00 - ff in Hexadecimal is equivalent to 0 - 255 in decimal. This means that each of red, green and blue has 256 possible levels. When combined this creates 16,777,216 possible colours.
You can specify a hexadecimal colour using only 3 values. When you do this, each value is doubled.
eg. #4b2 is equivalent to #44bb22.
Hexadecimal is frequently used as it is the shortest means of writing a colour.
RGB (Red Green Blue) is similar to Hexadecimal except that we use decimal values instead of hexadecimal. In the outline below, the first number represents the amount of red, the second, the amount of green and the third, the amount of blue.
rgb(102, 78, 210)
Each value may be between 0 and 255.
And now let's see it in action:
This sentence shines.
RGB is often used as a means to introduce transparency by using the Alpha value discussed below.
An extension to RGB is RGBA. The A stands for alpha which represents the opacity.
rgba(102, 78, 210, 0.3)
The alpha level is between 0 ( fully transparent ) and 1 ( solid ).
In this example I have used a negative margin on the paragraph which has the effect of making it overlap with the heading.
It allows you to do funky things like this.
Another way in which we may represent colours is with HSL.
hsl(102, 78%, 50%)
The Hue specifies the base colour as a degree on a colour wheel. Red is at 0°, green at 120°, blue at 240° and finally red again at 360°.
Next we specify the Saturation which is how vibrant the colour is. It has a value between 100 which is full vibrancy and 0 which is dull or grey.
Finally we specify the Luminance or lightness. It has a value between 0 which is tending towards black and 100 which is tending towards white.
And now let's see it in action:
This is a colourful sentence.
HSL is often used in conjunction with Javascript to dynamically change colours as it's format allows you to easily adjust colours in a predictable way.
Similar to RGB we may introduce a fourth value for the Alpha level. Similar to RGBA it is a value between 0 and 1.
hsla(215, 29%, 62%, 0.8)
It allows you to do funky things like this.
With named colours we may specify a colour by a set of pre defined names. CSS Level 1 defined 16 colours. CSS Level 2 then added orange (why you would leave out orange in the first place I'm not really sure). Browsers included another 130 colours and these were formally accepted in CSS Level 3. Some examples of colour names are:
People don't really use the colour names that much. Why limit yourself to 147 colours when the other methods grant you a little over 16 million. Having said that, the colours have been selected by people who understand colour so they can be a good starting point for selecting colours. (The further reading above contains links to pages with tables listing the colours and their hexadecimal equivalents).
Here is an example of their usage:
This is a colourful sentence.
As well as solid colours, it is also possible to specify gradients. These are a bit more complicated to set up however so I won't cover them here but you'll find some good resources at the links below.
Let's dabble with colour: