73
368
Chapter 9
Specify color in red, green and blue values
You can also specify a color as the amount of red, green, and blue. So,
say you wanted to specify the orange color we looked at a couple of
pages back, which consisted of 80% red, 40% green, and 0% blue.
Here’s how you do that:
body {
background-color: rgb(80%, 40%, 0%);
}
Begin with “rgb”, short
for red, green, blue.
80% Red
0% Blue
40% Green
And then specify the percentages for
red, green, and blue within parentheses,
and with a % sign after each one.
You can also specify the red, green, and blue values as a numeric value
between 0 and 255. So, instead of 80% red, 40% green, and 0% blue,
you can use 204 red, 102 green, and 0 blue.
Here’s how you use straight numeric values to specify your color:
Where did these numbers come from?
80% of 255 is 204,
40% of 255 is 102, and
0% of 255 is 0.
body {
background-color: rgb(204, 102, 0);
}
We still start with “rgb”.
To specify numeric values and not
percentages, just type in the value
and don’t use a “%”.
Q:
Why are there two different ways
to specify rgb values? Don’t percentages
seem more straightforward?
A:
Sometimes they are more
straightforward, but there is some sanity to
using numbers between 0 and 255. This
number is related to the number of values
that can be held in one byte of information.
So, for historical and technical reasons, 255
is often used as a unit of measurement for
specifying red, green, and blue values in a
color. In fact, you might have noticed that
photo-editing applications often allow you
to specify color values from 0 to 255 (if not,
you’ll see how to do that shortly).
Q:
I never see anyone use rgb or
actual color names in their CSS. It seems
everyone uses the #00fc9a type of color
codes.
A:
Using rgb percents or numeric
values are becoming more common, but you
are right, “hex codes” are still the most
widely used because people consider them
a convenient way to specify color.
Q:
Is it important that I look at
something like rgb(100, 50, 200) and
know what color it is?
A:
Not at all. The best way to know
what rgb(100, 50, 200) looks like is to load
it in your browser or use a photo-editing
application to see it.
there are no
Dumb Questions
using rgb values
