HTML and CSS Reference
In-Depth Information
How do I specify web colors?
Let me count the ways…
CSS gives you a few ways to specify colors. You can specify the
name
of a color, specify a color in terms of its
relative percentages
in red, green, and blue, or you can specify your color using a
hex
code
, which is shorthand for describing the red, green, and blue
components of the color.
You can count on the
se 16
colors in any browser
, but
you might only find
the
150 extended colors
in
newer browsers.
While you might think that the Web would have decided on one
format by now, all these formats are commonly used, so it's good
to know about them all. However, hex codes are by far the most
common way of specifying web colors. But remember that all
these ways of specifying color ultimately just tell the browser the
amount of red, green, and blue that goes into a color.
Aqua
Black
Let's work through each method of specifying colors in CSS.
Blue
Fuchsia
Specify color by name
The most straightforward way to describe a color in CSS is just to
use its name. There are 16 basic colors and 150 extended colors
that can be specified this way. Let's say you want to specify the color
“silver” as the background color of a
body
element; here's how you
write that in CSS:
Gray
Green
Lime
Maroon
body {
Navy
Olive
background-color: silver;
}
Purple
Red
And
the c
olor
writ
ten a
s a nam
e.
And the background-color
property.
Silver
Teal
So, to specify a color by name, just type the color name as the value
of the property. CSS color names are case-insensitive, so you can
type silver, Silver, or SILVER, and all will work. Here are the 16
basic colors in CSS. Remember, these are just names for predefined
amounts of red, green, and blue.
White
Yellow
C
olor in
a book h
appens b
y light
bouncing
off the
printed
page.
O
n a com
puter, t
he light
is emitt
ed by t
he scree
n, so th
ese
colors wi
ll look s
lightly d
ifferent
in your
web pag
es.
