How to Express RGB Colors as a Percentage

On a web page, colors are displayed in RGB values, that is, by varying amounts of red, green and blue. All colors on the web are made from variations in the amount of red, green and blue assigned to any color. There are several ways to express this amount, one of which is with a percentage. Here is how.

Difficulty: Moderately Easy

Instructions

Things You'll Need:

• A web page
• A style sheet

1. The RBG colors are normally given in a CSS rule in a style sheet for a particular web page. The syntax is
   rgb (color).

2. In the parentheses where the color values are given, use three comma-separated percentages: one for red, one for green and one for blue. Here, for example, is the value for white:
   rgb(100%,100%,100%)

3. To use this color notation in a CSS rule, give the selector, then state the rgb value for the color property of the selector. Here's an example of a CSS rule that would create a red color for an h2 selector:
   h2 {color: rgb(100%,0%,0%);}

4. Here are some additional color values in percentages:
   rgb(0%,0%,0%) black
   rgb(100%,40%,0%) orange
   rgb(100%,100%,0%) yellow
   rgb(0%,50%,0%) green
   rgb(0%,0%,100%) blue
   rgb(0%,100%,100%) aqua
   rgb(50%,50%,50%) gray
   rgb(0%,100%,0%) lime
   rgb(50%,0%,50%) purple

Tips & Warnings

• Computers and browsers that use CSS understand this method of displaying colors.

Resources

• Color Tools