HTML & CSS: Background & Color

Color

There are various ways to refer to refer to colors in HTML. Perhaps the easiest is to name the color. The link below shows the 140 colors that all browsers recognize.

140 common color names

Another way of representing color is using the RGB system in which each component (Red, Green, Blue) is represented by an integer between 0 and 255. Black is represented by rgb(0, 0, 0) and white is rgb(255, 255, 255). Blue is rgb(0, 0, 255), green is (0, 128, 0), and so on.

A popular third approach is to use a hexadecimal number to represent the color. In hexadecimal, you count like this: 0 1 2 3 4 5 6 7 8 9 A B C D E F. So 15 is represented in hexadecimal as F. To represent 16, we add a second digit, and 16 in hexadecimal is represented as "10". While RGB uses an integer between 0 and 255 for each color, hexadecimal uses a value between 00 and FF. So, for example, rgb(255, 128, 0) would be #FF8000 in hexadecimal. Below are links to a website that has a RGB-to-Hex converter and a Hex-to-RGB converter.

RGB to Hex conversion

Hex to RGB conversion

 

Background in CSS

CSS has a background property that can be used to set the background color of a webpage. This website has more information on the background property.

CSS has a background-image property that can be used to set an image as the background of a webpage. This webpage has more information on the background-image property.

 

Exercise