COM271, Week 4
Color
Colors and background color. Color coding in hex, percentages, names.
Syllabus | Table of Pages | Assignments | References and Useful Links
Fore and background color
Color: The attribute color determines foreground color; this is the color of all type on the page.
Background color: The attribute background-color determines background color (duh...).
Color systems
There are four ways to set color values in CSS:
- 16 named colors (+ white)
- RGB percentage (0-100%)
- RGB integer (0-255)
- RGB hexadecimal (#000000-#ffffff)
Named colors: Your can set color value for 17 named colors (aqua, black, blue, fuchsia, gray, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.):
aqua |
black |
blue |
fuchsia |
gray |
grey |
green |
lime |
maroon |
navy |
olive |
purple |
red |
silver |
teal |
yellow |
(Yes, gray and grey are both correct and yes, they are identical!)
What? No ORANGE ? Where's BROWN ? And seriously, dude, no CHARTREUSE ???
You can find a total of 147 color names, their hex equivalents, and amazing tools to mix colors at
w3schools.com's CSS Color Names page
(including Cornflowerblue and Crimson )!
RGB: Screen colors are the result of blending three primary colors: red, green, and blue. By specifying relative strengths of each color, many combinations can result. There are two similar systems for setting values for color or background-color attributes, with a generic format:
- {color:rgb(%red, %green, %blue)}
- {background-color:rgb(0-256red, 0-256green, 0-256blue)}
Examples:
- {background-color:rgb(70%, 70%, 55%);}
- {background-color:rgb(50%, 50%, 75%);}
- {color:rgb(60%, 50%, 35%);}
- {color:rgb(10%, 50%, 65%);}
Hexadecimal: Color values can also be set using hexadecimal notation. Decimal numbers are based on the familiar numbers 0-9, with units, 10s, 100s, etc. places. Hexadecimals are similar, but based on 16 instead of 10 numbers, the numbers 0-9 and then a, b, c, d, e, and f (count them: 16), preceded with a # sign.. By using 2 places, the numbers can represent up to 176 values (#00 to #ff). These ranges then can be applied to each of the 3 primary colors, giving a composite that runs from #000000 (no light from any color = black) to #ffffff (full light from all 3 colors = white). #ff0000 is red, #00ff00 is blue, and #0000ff is green.
About 16 million distinct colors can be made using the rgb and hex notations. You can't beat the w3schools for demonstrating these: scroll down slightly to 16 Million Different Colors.