oblaat
a guide to conceiving, creating & publishing your own website
a guide to conceiving, creating & publishing your own website
Using CSS, you can change the colour of several things: most commonly, text and backgrounds. Everything that can be coloured with CSS accepts the same colour values in the same way.
To change the text and background colour of any element with CSS, the color and background-color properties are required. Those used to the Commonwealth spellings of words must to re-train their muscle memory.
html {
color: black;
background-color: darkorange;
}
This is a pair of CSS rules applied to the entire document using defined colour names. It forces the text to be white on black, instead of the browser's default black on white.
When changing the colour of a document's background, always be sure to declare the text colour too, and vice versa. Your browser might have black text as the default, but somebody using dark mode settings might have white text by default—if you set the background to yellow, the text becomes unreadable.
CSS has a total of 148 named colours, corresponding to defined hex values, that you can use in your code with no problem. Every browser understands the values red and royalblue and lightgoldenrodyellow.
A visual list of named colours is available on this website for reference.
All colours are made using different levels of red, green and blue light. Each pixel in a digital screen is actually made up of three sub-pixels that each emit red, green and blue. Together they display one colour per pixel.
When working digitally, individual colours are represented with one number for each kind of light according to how bright each subpixel should be. This is most commonly represented with hex codes as shorthand. They look like this:
| #FF0000 | #00FF00 | #0000FF |
Hex codes are six digits long, using three two-digit hexadecimal numbers to represent each value of light from weakest to strongest, in RGB order. It's strange to read letters as numbers at first, but you don't have to be able to read the actual numbers—just know that 0 through 9 are the same, and A comes after that, going up to F.
Light is additive. Green and blue combine to make cyan, red and green combine to make yellow, and red and blue combine to make magenta. All three colours together make white and black means all pixels are turned off.
With practice, these values become very easy to visualise, use, and even guess by just looking at or thinking of a colour. A visual list of basic hex codes is available on this website for reference.
html {
color: #000000;
background-color: #ff8c00;
}
The example above represents the exact same colours as the named colours from earlier.
Hex codes do not have to be written with six digits. For any colour in the linked list, for example, the code may be reduced to three characters—this makes code shorter while limiting colours slightly.
Hex codes can also be eight digits long. The new number represents alpha, or opacity: the highest value of FF means that the colour is 100% visible, and a value of 00 means that it is not visible at all. This can similarly be shortened to four digits.
There is a second way to represent the same colour information that hex codes use. The numbers 00 through FF represent a scale from 0 to 255, or 0% on to 100% on. You can write these numbers out directly, as long as you do not mind longer values that are harder to copy-paste.
html {
color: rgb(0% 0% 0%);
background-color: rgb(255 140 0);
}
This example represents the same values, too. One uses percentages and the other uses absolute colours—both are allowed, and they can even be used within the same rule.
There is also an alpha feature in the rgb() colour value, and it is perhaps more convenient than the hex code version:
aside {
color: black;
background-color: rgb(255 255 255 / 50% );
}
This code sets the background colour of all aside elements to be white at half transparency, so that the colour or background image of the element it is inside still shows through, and sets the text to black. Mix and match as much as you would like!