We have seen a few places where we need to speficy a colour in CSS: the text colour and background colour for content (color and background-color), the colour of a border (border-color or in the border shorthand property).
There are some built-in words in CSS that can be used to specify a colour, like red and lavender, but they are quite limiting since you're restricted to the colours that happen to have been assigned words.
About Colours
Before we start giving numeric colour values, you should know at least a little about how colour works.
If you've ever mixed colours together, you've probably done it with paint. Paints and dyes are mixed with the primary colours cyan (blue), yellow, and magenta (red) in the CYM colour model. With paint, the coloured surface absorbs parts of the (usually white) light that illuminates it. Since the paint removes parts of the reflected light, this is also referred to as the subtractive colour model.
However, paints and computer screens create colours differently. Computer screens actually produce light. Computer screens start black, and light is added to produce a colour, using the additive colour model. The primary colours in the additive colour model are red, green, and blue. Additive colour is also called the RGB colour model.
To mix light to produce a colour on the screen, we will have to mix various amounts of red, green, and blue to get the desired result.
Working with RGB
We will use the three-character method of specifying a CSS colour. The amount of each primary colour is specified with a character on this scale:
0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f
The 0 end of the scale is little of the colour (dark/off). The f end is a lot of the colour (bright/on).
The three primary colours are specified in the order red, green, blue, prefixed with a #. For example, the colour #f70 indicates a lot of red, a medium amount of green, and no blue (or #F70: case doesn't matter in these colour codes).
Based on this, we can guess that #000 is very dark: it is the colour code for black. If we start increasing the first character, we add red to the colour. This is the result if we increase the amount of red from 0 (none) to f (lots):
This should be be fairly predictable: it starts black and as you add red, it gets redder. What happens if you turn up all three (red, green, blue) values together?
When the three components are the same, none is brighter than the other and we end up with a shade of grey with black (#000) and white (#fff) at the extremes.
If we keep experimenting, we can try a scale of colours from red (#f00) to white (#fff) like this:
Again maybe not suprpisingly, we see that between red and white are shades of pink.
The point of these examples is not that drawing colour scales is fun, but that there is a certain logic to these colour codes. If you know a few basic ideas, you can guess what colour a particular code is, or what code you should write for a colour. You should by now be able to guess these:
| Code | Colour | Rationale |
|---|---|---|
#000 | black | as dark as possible |
#fff | white | as bright as possible |
#f00 | red | only red light |
#0f0 | green | only green light |
#00f | blue | only blue light |
#060 | dark green | a little green, no red or blue |
#99f | light blue | more blue than the others, closer to white |
Because the additive and subtractive colour models don't work the same way, there's one colour in particular that you might not guess: #ff0 is yellow. But armed with this fact, we can guess that a lighter yellow might be #ffa: like yellow but closer to white.
You shouldn't have to memorize these colour codes. If you understand the 0 to f scale, and how the red, green, and blue values go together to make a colour, you should be able to come up with a colour code fairly quickly.
You may also want to experiment with the Interactive Colour Mixer provided as extra content in this Guide, or a video using the colour mixer and talking about additive colours.
Other Ways to Specify Colour
In older versions of HTML, colours could only be specified with six characters, like #b5123b. The first two characters specify the red value (b5 in the example), the second two specify green (12), and the last two blue (3b). These can also be used in CSS, but we won’t go into details because they are more difficult to work with by hand. If you are using a colour selector in a graphics program, it may show you a six-character colour code: you can copy and paste this into CSS if you want to use the colour.
To convert from a three-character to six-character colour code, simply double the characters. For example, #f70 and #ff7700 are the same colour.
Taking the first character of each pair in a six-character code will give you a similar (but probably not exactly the same) three-character colour code. For example, #b5123b is close to #b13.
There are also several other ways to specify a colour, although you won't see them used as often. Here are some examples, just so you can see some of the possibilities:
Any of these colour codes can be used anywhere you need to specify a colour in CSS. For example, the text colour (color), background colour (background-color), and border colour (border-color).