Color in CSS¶
CSS color uses a standard encoding called 24-bit color
a bit is a 0 or a 1
1 bit can have 2 different patterns: 0, 1
2 bits can have 4 different patterns: 00, 01, 10, 11
3 bits can have 8 different patterns: 000, 001, 010, 011, 100, 101, 110, 111
and so on
in general, n bits have \(2^n\) different patterns
so for 24-bit color, there are \(2^{24} = 16777216\) possible colors that can be represented, i.e. just over 16.7 million different colors
what colors you can actually see depends upon the quality of your screen (e.g. black and white screens can only show 2 colors!) and the details of human color perception (i.e. humans can’t see all possible colors, some humans are color-blind, etc.)
Specifying Colors with Names¶
a few of the most common colors have names
e.g. red, green, hotpink, indigo, forestgreen, ...
see the full list of CSS color names
not all 16.7 million 24-bit colors have a standard name, of course!
Hexadecimal Color Values¶
hexadecimal is base 16 (and decimal is base 10, and binary is base 2)
hexadecimal turns out to be a convenient and compact way to specify any 24-bit color
there are 16 hexadecimal digits: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, a, b, c, d, e, f (the letters can be capitalized if you like)
every hexadecimal number consist of 1 or more hexadecimal digits, e.g. 45, aab5, 9f9f5e, ...
a nice feature of hexadecimal digits is that one hexadecimal digit represents exactly 4 bits
| Hexadecimal Digit | 4-bit Value |
|---|---|
| 0 | 0000 |
| 1 | 0001 |
| 2 | 0010 |
| 3 | 0011 |
| 4 | 0100 |
| 5 | 0101 |
| 6 | 0110 |
| 7 | 0111 |
| 8 | 1000 |
| 9 | 1001 |
| a | 1010 |
| b | 1011 |
| c | 1100 |
| d | 1101 |
| e | 1110 |
| f | 1111 |
thus, for 24-bit color values, you need (at most) 6 hexadecimal digits
e.g. these are all CSS hexadecimal colors: #000000, #ffffff,
#38822e, #002200, ...
every different sequence of 6 hexadecimal digits represents a different unique 24-bit color
in CSS, any 6 hexadecimal digits, starting with a #, specifies a color,
e.g.:
/* #ff0000 is red */
h1 {
background-color: #ff0000;
}
/* #1a1a1a is a shade of gray */
h2 {
background-color: #1a1a1a;
}
RGB Color¶
another common way to specify a color is to use its RGB value
this turns out to be essentially the same as hexadecimal color, but it uses base 10 instead
the idea if RGB color is that every color is a mixture of some amount of red, some amount of green, and some amount of blue
by varying the amounts of red, green, and blue, we can get pretty much any color
in CSS, an RGB color is written rgb(red, green, blue), where red,
green, and blue are numbers from 0 to 255
here are a few colors and their corresponding values that you should know
| Color | Hexadecimal | RGB |
|---|---|---|
| black | #000000 | rgb(0, 0, 0) |
| white | #ffffff | rgb(255, 255, 255) |
| red | #ff0000 | rgb(255, 0, 0) |
| green | #00ff00 | rgb(0, 255, 0) |
| blue | #0000ff | rgb(0, 0, 255) |
| yellow | #ffff00 | rgb(255, 255, 0) |
Shades of Gray¶
RGB colors of the form rgb(n, n, n) are shades of gray ranging from pure
black (rgb(0, 0, 0)) to pure white (rgb(255, 255, 255))
there are 256 shades of gray from rgb(0, 0, 0) to rgb(255, 255, 255),
and this is often referred to as grayscale
shades of gray can be important in printing, where you often have printers that are limited to printing a few shades of gray (or a few shades of some other color)
Other Color Codes¶
color is a big, complex topic
HSL = hue, saturation, lightness
HSL is useful if you want to, say, create a lighter or darker version of a color
RGBA is RGB plus a transparency value (for transparent colors)
HSLA is HSL plus a transparency value (for transparent colors)