Colour - CSS Tutorial

Colour!

All the colours of the rainbow.

Introduction

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.

The Ways

There are 4 main ways in which we may specify colour in CSS. They are:

Hexadecimal - eg #48d3c2.
RGB - eg rgb(127, 89, 28).
HSL - eg. hsl(130, 80%, 24%).
Named - eg. Crimson or DarkBlue.

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.

Tips

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.

color picker

If you would like some help picking a good colour scheme then you may also want to check out our Introductory Graphic Design Tutorial.

Graphic Design Tutorial

Here is a list of some of the commonly used properties which use colours.

color
background-color
border-color

Hexadecimal 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:

#000000 is no red, no green, no blue, which is black.
#ffffff is full red, full green, full blue, which is white.
#00ff00 is no red, full green, no blue, which is green.
If you make the values for each of red, green and blue equal then it will be a shade of grey.

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:

hex_colour.html

<body>
<p>This is a colourful sentence.</p>
</body>

style.css

p {
color: #eab02f;
background-color: #48a1af;
}

Hex Colours

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 Colours

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:

rgb_colour.html

<body>
<p>This sentence shines.</p>
</body>

style.css

p {
color: rgb(221, 42, 36);
background-color: rgb(255, 175, 113);
}

RGB Colours

This sentence shines.

RGB is often used as a means to introduce transparency by using the Alpha value discussed below.

RGBA

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.

rgba_colour.html

<body>
<h1>Opacity is cool.</h1>
<p>It allows you to do funky things like this.</p>
</body>

style.css

h1 {
background-color: rgb(255, 175, 113);
padding-bottom: 20px;
margin-left: 20px;
}
p {
background-color: rgba(255, 175, 113, 0.6);
padding-top: 20px;
margin-top: -30px;
margin-right: 20px;
}

RGBA Colours

Opacity is cool

It allows you to do funky things like this.

HSL Colours

Colour Wheel Another way in which we may represent colours is with HSL.

Hue
Saturation
Luminance (also referred to as Lightness)

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.

HSL Cylinder 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:

hsl_colour.html

<body>
<p>This is a colourful sentence.</p>
</body>

style.css

p {
color: hsl(127, 57%, 62%);
background-color: hsl(190, 27%, 87%);
}

HSL Colours

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.

HSLA

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)

hsla_colour.html

<body>
<h1>Opacity is cool.</h1>
<p>It allows you to do funky things like this.</p>
</body>

style.css

h1 {
background-color: hsl(287, 55%, 71%);
padding-bottom: 20px;
margin-left: 20px;
}
p {
background-color: hsla(54, 83%, 67%, 0.7);
padding-top: 20px;
margin-top: -30px;
margin-right: 20px;
}

HSLA Colours

Opacity is cool

It allows you to do funky things like this.

Named Colours

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:

Aquamarine
BlanchedAlmond
Crimson
DarkGreen
LightSlateGray

CSS named colors

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:

named_colour.html

<body>
<p>This is a colourful sentence.</p>
</body>

style.css

p {
color: royalBlue;
background-color: lightGreen;
}

Named Colours

This is a colourful sentence.

Gradients

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.

CSS Gradients

Summary

#46d2a7: A colour specified in Hexadecimal.
rgb(45, 203, 139): A colour specified using RGB (Red, Green, Blue).
rgba(91, 78, 142, 0.3): A colour specified using RGBA (Red, Green, Blue, Alpha).
hsl(184, 56%, 80%): A colour specified using HSL (Hue, Saturation, Luminance)
hsla(238, 90%, 32%, 0.7): A colour specified using HSLA (Hue, Saturation, Luminance, Alpha)
lightskyblue: A colour specified using one of the 147 named colours.

Colour is important: Good use of colour can have a large impact on how easy it is to read your content.
Colour Picking Tools: Use colour picking tools to make the task of specifying colours easier.
Pick the right format: Picking the right format to match what you want to do with your page can make the setting and adjusting of colours easier.

Activities

Let's dabble with colour:

Take your page and change the colour of the headings by way of each method listed above.
Use CSS to set the colour of some text and it's background as well. Now create some really horrible colour schemes (pink on yellow for example). Follow that with some good colour schemes. See how much of a difference it can make to readability.
Use the :hover selector keyword and colour properties to create text which is hidden until you hover your mouse over it.
Play about with headings and colour. You could set colours for the text, the background and borders. See if you can make headings that really stand out. Other aspects to adjust are the padding and which sides have a border on it.
Create 2 lists. Pick a colour. Alternate the background colour for the items in list one with the colour and white. Now alternate the background colour for the items in the second list with the colour and black. You'll notice that the colour looks darker in the second list, even though you know it is the same colour. This is referred to as the Bezold effect. There are many other visual effects you can create and make use of to add flair to your page content. You'll find a list of some of them at the bottom of the link in the previous sentence. See which ones you can create using HTML and CSS.

CSS Selectors

CSS Final Thoughts