Color Codes
1
Color Codes
• Colors are set using “RGB” color codes,
which are, represented as hexadecimal
values.
• Each 2-digit section of the code represents
the amount, in sequence, of red, green or
blue that forms the color. For example, a
RGB value with 00 as the first two digits has
no red in the color.
2
Main Colours
3
Main Colours
The total number of different colors that can be produced
(28)3= 256 x 256 x 256 = 16,777,216 colors
Main Colours
RGB
• rgb(red, green, blue)
• Each parameter (red, green, and blue) defines the
intensity of the color with a value between 0 and 255.
6
RGB
• For example, rgb(255, 0, 0) is displayed as red, because
red is set to its highest value (255), and the other two
(green and blue) are set to 0.
• Another example, rgb(0, 255, 0) is displayed as green,
because green is set to its highest value (255), and the
other two (red and blue) are set to 0.
• To display black, set all color parameters to 0, like this:
rgb(0, 0, 0).
• To display white, set all color parameters to 255, like this:
rgb(255, 255, 255).
7
RGB
8
9
HEX - hexadecimal value
• Where rr (red), gg (green) and bb (blue) are hexadecimal values
between 00 and ff (same as decimal 0-255).
• For example, #ff0000 is displayed as red, because red is set to
its highest value (ff), and the other two (green and blue) are set
to 00.
• Another example, #00ff00 is displayed as green, because green
is set to its highest value (ff), and the other two (red and blue)
are set to 00.
• To display black, set all color parameters to 00, like this:
#000000.
• To display white, set all color parameters to ff, like this: #ffffff.
10
HEX
11
12
HSL
• hsl(hue, saturation, lightness)
• Hue is a degree on the color wheel from 0 to
360. 0 is red, 120 is green, and 240 is blue.
• Saturation is a percentage value. 0% means a
shade of gray, and 100% is the full color.
• Lightness is also a percentage value. 0% is
black, and 100% is white.
13
HSL
14
15
16 Basic Colors
16
Color Codes
1. WHITE 1. #FFFFFF
2. BLACK 2. #000000
3. RED 3. #FF0000
4. GREEN 4. #00FF00
5. BLUE 5. #0000FF
6. MAGENTA 6. #FF00FF
7. CYAN 7. #00FFFF
8. YELLOW 8. #FFFF00
9. AQUAMARINE 9. #70DB93
10. BAKER’S CHOCOLATE 10. #5C3317
11. VIOLET 11. #9F5F9F
12. BRASS 12. #B5A642
13. COPPER 13. #B87333
14. PINK 14. #FF6EC7
15. ORANGE 15. #FF7F00 17
Color Codes
If you require more information about color
values, there is an excellent site entitled
“VGDesign’s Interactive Color Cube” that
displays the background color code when
you put your cursor over a small color
sample. The Web address is :
http://www.vgdesign.com/color.html
18
The Body Element
• The BODY element of a web page is an
important element in regards to the page’s
appearance. Here are the attributes of the
BODY tag to control all the levels:
TEXT="#RRGGBB" to change the color of all
the text on the page (full page text color.)
This element contains information about the
page’s background color, the background
image, as well as the text and link colors.
19