HTML and CSS Reference
In-Depth Information
Color Declarations
There are several notations in CSS for declaring colors. A brief overview is provided in the following sections,
which is important because color declaration examples will be used intensively in the demonstrational rulesets
throughout the chapter.
Hexadecimal Notation
Hexadecimal notation is by far the most commonly used notation for declaring colors in CSS. In the RGB color space
used on the Web, any color can be represented by additive color mixing, using the different intensity variants of three
colors: Red, Green, and Blue (RGB). Two hundred and fifty-six shades of the three base colors are sufficient to mix
any color, because any two adjacent shades of red, green, or blue with an intensity difference of 1/256 cannot be
distinguished by the human eye. Since there are 256 shades for each channel, the values vary from 0 to 255 (
00
to
ff
in hexadecimal notation) per channel; 0 is the darkest shade of the channel, and 255 is the lightest.
The hexadecimal numeral system applies the positional (also known as
place-value
) notation. In contrast to
the 10 digits of the decimal numeral system, in the hexadecimal system there are 16 symbols from
0
to
9
and
a
to
f
(the letters represent the values from
10
to
15
). The latest symbol corresponds to the value multiplied by the 0
th
power
2
of 16, the symbol preceding the last symbol represents the value multiplied by the 1
st
power of 16, and so forth.
Consequently, the symbols
0
-
9
in hexadecimal notation correspond to the identical numbers in decimal
notation, while
a
in hex is equal to
10
in the decimal system,
b
to
11
,
c
to
12
,
d
to
13
,
e
to
14
, and
f
to
15
. Further
numbers can be computed by the place-value (starting from
0
). For example, the hexadecimal value
e8
corresponds
to the decimal value
232
, because 14·16
1
+ 8·16
0
= 14·16 + 8·1 = 224 + 8 = 232. Conversion from decimal to hexadecimal
can be performed similarly, but with the reverse computation. For example,
86
in decimal notation is
56
in
hexadecimal notation, because 86/16 = 5.375, so the first digit is 5. 5·16=80, and the remainder is 6, which is the
second digit, because 5·16
1
+ 6·16
0
= 5·16 + 6·1 = 80 + 6 = 86.
In CSS, hexadecimal color declarations begin with a number sign (
#
), followed by six hexadecimal (hex) values,
two for each channel (this can be abbreviated to three digits if the groups of digits are identical). They are used to
mix colors arbitrarily. For example, pure red can be set by
#ff0000
. In other words, the intensity of the red channel is
maximal (
ff
), while the intensity of green and blue are minimal (
00
). Similarly, pure green is
#00ff00
, while pure blue
is
#0000ff
. If the values of each channel are set to
00
, the result is black (
#000000
). If all values are maximal, you get
white (
#ffffff
). If the values for each channel are identical, the result is a shade of gray (Listing 5-2).
Listing 5-2.
A Gray Font Color Declared for All Paragraphs
p {
color: #898989;
}
■
If the two digits of each channel are identical, they can be abbreviated by omitting the second digit.
For example,
#f00
represents red,
#0f0
represents green,
#00f
represents blue,
#000
represents black,
#fff
represents white, and so on.
Tip
2
Any nonzero number raised to the power 0 is 1.
Search WWH ::
Custom Search