HTML and CSS Reference
In-Depth Information
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%);
}
And th
en specify the p
ercentages for
red, gr
een, and blue wi
thin parentheses
,
and wi
th a % sign afte
r 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.
Where did these numbers come from?
80% of 255 is 204,
40% of 255 is 102, and
0% of 255 is 0.
Here's how you use straight numeric values to specify your color:
body {
background-color: rgb(204, 102, 0);
}
To specify nu
meric values and
not
percentages,
just type in the
value
and don't us
e 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 is 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 be able to 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 an online color picker or photo
editing application to see it.
