English words that describe colors, also called keyword colors. There are some examples of named colors:
| darkslategrey: | |
| darkblue: | |
| cornflowerblue: | |
| cadetblue: | |
| lightcoral: | |
| mediumpurple: |
One syntax that we can use to specify colors is called hexadecimal. Colors specified using this system are called hex colors. A hex color begins with a hash character (#) which is followed by three or six characters. The characters represent values for red, blue and green.
| darkseagreen: | #8FBC8F |
| sienna: | #A0522D |
| saddlebrown: | #8B4513 |
| black: | #000000 or #000 |
| white: | #FFFFFF or #FFF |
| aqua: | #00FFFF or #0FF |
In the example above, you may notice that there are both letters and numbers in the values. This is because the hexadecimal number system has 16 digits (0-15) instead of 10 (0-9) like in the standard decimal system. To represent 10-15, we use A-F. Here is a list of many different colors and their hex values.
Notice that black, white, and aqua are all represented with both three characters and six characters. This can be done with hex colors whose number pairs are the same characters. In the example above, aqua can be represented as #0FF because both of the first two characters are '0' and the second and third pairs of characters are both 'F's. Keep in mind that all three character hex colors can be represented with six characters (by repeating each character twice) but the same is not true in reverse.
In both hex and RGB, we have three values, one for each color. Each can be one of 256 values. Specifically, 256 * 256 * 256 = 16,777,216. That is the amount of colors we can now represent. Compare that to the roughly 140 named CSS colors!
There is another syntax for representing RGB values, commonly referred to as 'RGB value' or just 'RGB',
that uses decimal numbers rather than hexadecimal numbers, and it looks like this:
h1 {
color: rgb(23, 45, 23);
}
Each of the three values represents a color component, and each can have a decimal number value from 0 to 255.
The first number represents the amount of red, the second is green, and the third is blue.
These colors are exactly the same as hex, but with a different syntax and a different number system.
In general, hex and RGB color representations are equivalent. Which you choose is a matter of personal taste.
That said, it's good to choose one and be consistent throughout your CSS, because it's easier to compare hex
to hex and RGB to RGB.
The RGB color scheme is convenient because it's very close to how computers represent colors internally.
There's another equally powerful system in CSS called the hue-saturation-lightness color scheme, abbreviated as HSL.
The syntax for HSL is similar to the decimal form of RGB, though it differs in important ways.
The first number represents the degree of the hue, and can be between 0 and 360.
The second and third numbers are percentages representing saturation and lightness respectively.
Here is an example:
color: hsl(120, 60%, 70%);
Hue is the first number. It refers to an angle on a color wheel. Red is 0 degrees, Green is 120 degrees,
Blue is 240 degrees, and then back to Red at 360. You can see an example of a color wheel below.
Saturation refers to the intensity or purity of the color. The saturation increases towards 100% as
the color becomes richer. The saturation decreases towards 0% as the color becomes grayer.
Lightness refers to how light or dark the color is. Halfway, or 50%, is normal lightness. Imagine
a sliding dimmer on a light switch that starts halfway. Sliding the dimmer up towards 100% makes
the color lighter, closer to white. Sliding the dimmer down towards 0% makes the color darker, closer to black.