An important part of any website’s styling is the colours. Colours can be applied throughout a website to words, borders, backgrounds and more and if used well give a consistent, unique feel across your whole website.
By using colours, you can really personalise your website and make it your own.
So how do you apply colours to your site?
Well, there are lots of CSS properties which use colours; here is just a few:
color:
background-color:
border-color:
When using any of these CSS properties, colours can be set in the same way. So instead of looking at each of these CSS properties let’s look at how you set the colour you want.
The simplest way is to use the predefined keywords.
What this means is you can choose a colour from a huge range using just a couple of words and your browser will know what you mean.
Common colours are often defined by keywords; like these for example:
background-color: blue;
background-color: red;
background-color: gold;
background-color: gray;
background-color: purple;
background-color: orange;
Blue
Red
Gold
Gray
Purple
Orange
There are actually lots of predefined colours and so you can get quite specific. And quite often they have brilliant names, check these ones out:
background-color: greenyellow;
background-color: goldenrod;
background-color: peachpuff;
background-color: aliceblue;
background-color: tomato;
background-color: salmon;
There’s a salmon colour?!?!
That’s a game-changer.
Now I’m actually listening.
GreenYellow
Goldenrod
Peachpuff
AliceBlue
Tomato
Salmon
If you want to have full control over the colours you use, then consider setting your colour using its RGB value.
What is an RGB?
Really Great Blue?
Rancid Green Blend?
Red Goes Best?
Strangely, you’re not actually far off.
It stands for Red Green Blue.
As you might know, colours are made by mixing other colours together. If you mix blue and red together you get purple. And if you mix red, green and blue together you can make a huge range of colours.
Surely if you are mixing the same three colours you always get the same colour?
Aria is right, except if you used different amounts then you would get a different colour.
For example, adding a tiny amount of blue to a pot of red paint won’t change the colour much, but a mixture made from half and half will be purple.
So using different amounts of red, green and blue we can make a huge range of colours.
To do this, you first have to tell the browser than you are defining a colour using its RGB value and you do this with code like this:
rgb();
When setting a background colour this would look like this:
background-color: rgb();
Then inside the brackets you add numbers to represent the amount of red, then green and then blue with each number separated by a comma.
So if I wanted a lot of red, a bit of green and no blue I could write it like this:
background-color: rgb(1000, 100, 0);
Almost.
The maximum you can have is 255. The minimum you can have is 0, so you were right there.
Let’s look at some examples.
Only using red can give you these three colours:
background-color: rgb(255, 0, 0);
background-color: rgb(125, 0, 0);
background-color: rgb(25, 0, 0);
rgb(255, 0, 0)
rgb(125, 0, 0)
rgb(25, 0, 0)
If you only use green, you might get these colours:
background-color: rgb(0, 255, 0);
background-color: rgb(0, 125, 0);
background-color: rgb(0, 25, 0);
rgb(0, 255, 0)
rgb(0, 125, 0)
rgb(0, 25, 0)
And you can get these colours by only defining a blue value:
background-color: rgb(0, 0, 255);
background-color: rgb(0, 0, 125);
background-color: rgb(0, 0, 25);
rgb(0, 0, 255)
rgb(0, 0, 125)
rgb(0, 0, 25)
Already, this gives you 255 shades of red, 255 shades of green and 255 shades of blue which is a lot of colours.
Here’s what happens when you start mixing the colours. Let’s take peach puff for example.
Whoa!
Hold it right there.
If we are doing more examples, we are using salmon or I’ll leave.
Salmon it is then.
For salmon the rgb values are:
background-color: rgb(250, 128, 114);
Let's have a look how those colours are mixed.
background-color: rgb(250, 0, 0);
background-color: rgb(250, 128, 0);
background-color: rgb(250, 128, 114);
rgb(250, 0, 0)
rgb(250, 128, 0)
rgb(250, 128, 114)
What happens if we set everything to 255?
When everything is really maxed out.
With every value set to 255 you get white and with all values set to 0 there is no colour so you get black.
You can get even more specific about your colour by defining it with rgba.
rgba();
When using rgba, you need to add another number for the ‘a’ part so you end up with four numbers in the brackets each separated by a comma. The ‘a’ part controls how opaque the colour is which means how difficult it is to see through.
For this number, the maximum means the colour is fully opaque, or you can’t see through it at all, and the minimum number means it is fully transparent which means it is so easy to see through it basically isn’t there.
Basically, the ‘a’ part sets the opacity of the colour.
I think I get it.
Like when I’ve had a lot of water and go to mark the garden, it’s quite transparent.
Urgh, yes actually.
So what does the ‘a’ stand for?
Is it ‘Aaahhh my colour is gone’?
No, I wish it were!
It stands for ‘alpha’ which is pretty boring.
I prefer yours.
Unlike the other numbers, the maximum for the alpha part is 1 so the numbers you can use go from 0 to 1.
Let’s look at some examples of salmon with different levels of opacity.
background-color: rgba(250, 128, 114, 1);
background-color: rgba(250, 128, 114, 0.8);
background-color: rgba(250, 128, 114, 0.6);
background-color: rgba(250, 128, 114, 0.4);
background-color: rgba(250, 128, 114, 0.2);
background-color: rgba(250, 128, 114, 0);
rgba(250,128,114,1)
rgba(250,128,114,0.8)
rgba(250,128,114,0.6)
rgba(250,128,114,0.4)
rgba(250,128,114,0.2)
rgba(250,128,114,0)
So you can see the effects of opacity across other colours, look at these side by side examples.
Use the box below to experiment with your own rgb and rgba colours.
background-color:;
Another way to define your colours is by using hexadecimal numbers. This works in a very similar way to the RGB method and is actually a little harder to understand, but it’s good to go over it in case you see someone else defining their colours this way.
First off.
What is hexadecimal?
It sounds like some kind of maths curse.
Hexadecimal is another way of defining numbers that is simple for computers to understand.
Computers are already smarter than me, why do I need to make it even easier.
Normally we count in decimal which means we use 10 numbers:
0,1,2,3,4,5,6,7,8 and 9.
Then when we need more numbers we use two numbers next to each other, like with 10.
Hexadecimal is very much like this except the numbers go to 15.
There’s more numbers I didn’t know about?
Well, no.
Instead for the last few we use A, B, C, D, E and F.
So in hexadecimal we count like this:
1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E and F.
Then when we need more numbers we use two hexadecimal numbers.
So A is like 10 and F is like 15, so after that we write 10 which is like 16 in normal numbers.
Ok, but why?
Computers generally deal in just on and off but can look at multiple numbers at the same time.
If you took 4 switches which could each be on or off, you end up with 16 combinations.
So it makes sense to talk to computers using hexadecimal.
For a cat based example, say a cat has a litter for four kittens which are either ginger or tabby coloured. Having four kittens and those two options gives you a total of 16 combinations in which the kittens can be born.
Let’s take the hexadecimal number FF.
The first F means there are F, which is 15, lots of 16. The second F means there is another 15.
15 x 16 = 240
240 + 15 = 255
If you remember, 255 is the highest number we could use when setting our colour using the RGB or RGBA method. So instead you can use hexadecimal to represent the same numbers and therefore the same colours.
This is a really common way of setting colours.
When using hexadecimal, or hex for short, instead of writing RGB, you simply use a # and the numbers aren’t separated by commas.
Let’s look at some common colours and their hexadecimal equivalents.
Earlier we saw you could use the colour red like this:
background-color: rgb(255, 0, 0);
To indicate that you are using hexadecimal to set your colour, use a # at the beginning. Using hexadecimal, your CSS would look like this:
background-color: #FF0000;
Green did look like this:
background-color: rgb(0, 255, 0);
Now looks like this:
background-color: #00FF00;
And, for completeness, here is blue:
rgb(0, 0, 255);
#0000FF;
If you want to translate between hex and normal decimal numbers, feel free to use this link or try and calculate it yourself!
It’s time for more salmon right?
Good idea.
Let’s look at how to use the salmon colour in CSS using hexadecimal.
Not exactly what I meant.
But fine.
We know how to make the colour salmon using the RGB method, so if we convert each number to hex and push them together we get this:
#FA8072;
Not that I want it to be any harder to see my salmon, but is there a way to change the opacity when using hex?
That’s a great question from Aria. Fortunately, just like with the RGBA method, you can set opacity of your colour in CSS when using hex; to do it you just have to add another two hexadecimal numbers to the end of your colour definition.
Using the examples from earlier, they become:
rgba(250, 128, 114, 1); #FA8072FF
rgba(250, 128, 114, 0.6); #FA807299
rgba(250, 128, 114, 0.3); #FA80724C
rgba(250, 128, 114, 0.1); #FA80721A
One slight difference is that here the opacity value still uses two hexadecimal numbers and so can go to 255 rather than just 0 to 1. To convert between the two just multiply the RGBA alpha value by 255 and then convert it to hex.
Try out hexadecimal colours using the box below.
background-color:;
And there you go!
Several ways to choose your colours in CSS for your website. There’s a lot to cover but the more you use colours the more obvious it will become.
That was a lot to take in!
I think I’m ready for some food.
I agree.
How about some chicken? Turkey?
I think you know exactly what I want.
Finally!