Lesson 2
Color
(Colors on a monitor are the results of combining red, green and blue).
Need help in choosing color schemes. Ever wonder if everyone can see all the colors you are using, or if the colors look the same to everyone? This Color Scheme web page by Petr Stanicek can answer those questions for you.
There are three ways to style with color
1. Hex number: hex numbers are made using the numbers 0 through 9 and the letters a through f
black is #000000 (six digits)
rrbbgg
white is #ffffff
The first two numbers are the red component (rr)
The second two numbers are the blue component (bb)
The third pair are the green component. (gg)
You always put the # (Pound, Hash or Octothorp) before the hex value (Tells the browser that the hex number is a color)
There are 256 x 256 x 256 = 16777216 colors available, to help you find a color There are all kinds of charts available that list the numbers for the colors –you can find links to some in lesson #1 http://uofgts.com/BasicWD/lesson1.html
and you can read more details about colors at wikipedia Here are some color charts2. RGB values
Black is rgb(00,00,00) white is rgb (255, 255, 255) all the other colors are between 00 and 255 for r and g and b
256 x 256 x 256 = 16,777,216 (16 million colors)
3. Short Hex color values #ab0
Uses the first letter/number of the hex array rr bb gg
Instead of writing #ccff33 write #cf3
This limits you to 4096 Colors
4. Color Names
W3C has listed 16 color names that will are HTML valid.
The color names are:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.
The Color name list is growing
There are now some 150 color names that work across most browsers. More color info is available at w3schools.comGraphic/Picture File Types
.gif (Graphics Interchange Format)
Limited to 256 colors, but 1 color can be “transparent”. Supports Animation.
.png (Portable Network Graphics)
PNG supports 16 million color palette, transparency and animation.
Using .png for photographic files would substantially increase the size of the file.
The PNG format is optimal for displaying small graphics, repeating gradients and animations for web pages. But, PNG animation (.MNG) is NOT well supported by current browsers (Works only in Firefox and Opera)
Also, PNG adoption for website use has been slow.
.jpg (Joint Photographic Experts Group, JPEG)
Makes smaller storage files.
Use for photographs and art for web display
JPEG supports 16 million colors and images compress from 10 to 20 times smaller in file storage size with almost no perceptible loss in image quality. Greater compression is possible, up to 100 times smaller in file storage size, but you get very low quality images.
jpg is not good for graphics or gradient backgrounds as text get’s “blurry” with compression artifacts and “banding” will appear in gradients.
Photo, Art, and Graphic Editing
demo using Sumo Paint
http://www.sumopaint.comSumo Paint is a powerful web-based graphics editor with a variety of different editing tools. Sumo Paint can be used as a paint program and photo editing program. With Sumo Paint you can save your artwork on your computer but also on Sumo account in the web. This allows you to open your images from any computer. All you need is a network connection.
- crop
- resize
- gradients