Color
In the previous sections, when I have have used the property color as an example, you see that I have written e.g #000000. This value is one of three ways to specify color in CSS. The color property specify the color of text inside an element.
The three ways are:
Hex codes
The example above is a hex code, a six-digit code that represents the amount of red, green and blue in a color, preceded by the # symbol. In the example above (#000000) the red, green and blue values are set to 0, and the color is thus complete black.
To get a black color, you would write:
On the other side of the scale we find #FFFFFF, which is white. #FF0000 will give 100% red. You can probably guess which colors #00FF00 and #0000FF will give (that is correct, green and blue respectively).
If all two-digit pair has the same value, e.g. #1D1D1D, you will have some shade of grey. With the hex codes you can create 256 shades of grey, what a story that would make!
Color names
Alternatively you can use color names as the value. There are 147 predefined color names that are recognized by browsers. E.g. blue, cyan and lightgoldenrodyellow. You would then write:
You can find the complete list here.
RGB values
RGB values express colors in terms of how much red, green and blue are used to make it. The values are an integer from 0 to 255. You do that in the following way:
... which would give the same blue color as #0060A3.
If you want the opacity to be anything but 100%, you can use rgba. The r, g and b are red, green and blue, and the a is short for alpha, and controls the alpha channel. Alpha channel is the opacity, described by a number between 0 and 1. If the opacity is at 1, you can not see trough the color. If it is a 0, you can not see the color, and then there is everything in between. You would write it:
to have a opacity at 50%.
Finding colors to use
There is an ocean of possibilities when choosing a color. You will find colors that goes well together, and those that doesn't. I will not talk about color theory, but would recommend checking out Adobe Color when you want to choose colors that go well together, creating a fine color profile for your website.
Last updated