Web Color

Color Basics

Colored Light

H03a - (4:41)
1. The web uses the principles of colored light because the colors coming out of your computer monitor are colored light.
2. Color light is additive.
3. Paint uses subtractive color
4. Chart

Color Bit Depth

H03b - (5:27)
- Color Depth

Powers of 2	Colors Available	The Math
2⁸	= 256	= 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2
2¹⁶	= 65,536	= 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2
2²⁴	= 16,777,216	= 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2

Color Considerations

H03c - (2:10)
1. Cultures have different interpretations of color.
  - In Western culture, red can suggest danger, romance, power, heat, intensity, and so forth
  - Color in Chinese culture
2. A large percentage of people have some form of color blindness.
3. Color palette

Methods for specifying color on the web

Intro

H03d - (0:49)
- The following color naming methods are all fully supported.
- There are other color specification methods, including the HSL model (hue, saturation, lightness), the use of alpha channels to control transparency, and making gradients, that CSS has specified but they do not enjoy full support.

Color Names

H03e - (7:09)
- Example:
  - color: teal;
- Color names:
  - The easiest to specify if you have a chart of the colors.
  - The color may often be deduced by simply interpreting the name (although, who would know what papayawhip or gainsboro ought to look like?).
- The downside of this specification method is that it provides the least amount of possible colors.
- Any browser that is compliant with CSS2 ought to be able to at least display these:
  - W3C CSS2 - 17 Named Colors
  - Or these: W3C CSS3 - 16 Named colors (orange was dropped for some reason)
- The following color names are recognized by all web browsers published 2005 and later:
  - W3C - 140 Named Colors
    - Palette-like display
    - Nice looking list of colors with color example, color names, hex, and integer values.
  - Also called the X11 colors.
  - Originally used by the browsers Mosaic and Netscape Navigator (published in 1993 and 1994 respectively).
  - No one knows who came up with them and their often artsy names.

RGB Percentage

H03f - (4:14)
- Example:
  - color: rgb(0%, 25%, 5%);
- Uses scale of 0%-100% per primary color of light.
- Values are separated by commas.
- This is perhaps the second easiest specification for neophytes to understand.
- Syntax notes:
  - You must include the percentage symbol for zero ( 0% ).
  - You are permitted to sue decimal values.
    - Example.: 43.825%
- Note that the total of all three values does not need to add up to 100. The percentages are relative to only the individual primary color.

RGB Integer, also referred to as RGB Decimal

H03g - (5:31)
- Example:
  - color: rgb(15, 250, 0);
- Values are separated by commas.
- Uses scale of 0 to 255 per primary color of light.
  - This scale is commonly used to specify color values in graphics programs such as Adobe's Photoshop, Illustrator, and Fireworks.
- Syntax note:
  - Decimal values are not permitted, only integers ("whole" numbers) are allowed.
    - If you attempt to use decimals the color will not display.
- Third easiest color specification method for neophytes to understand, but easily understood by those familiar with the graphics programs mentioned.
- Provides over 16 million color options.

RGBA - The "A" value provides for levels of color opacity

As discussed above, the rgb color specification provides for the specification of a color using the three primary colors of light, rgb (red, green, blue).
But rgb has no provision for specifying the opacity of the color.
- Note that opacity is the reciprocal of transparency.
The rgba color specification includes a fourth value "a".
- The letter "a" represents the opacity of the color.
  - The"a" is an abbreviation of "alpha". The origin of the use of the term alpha is somewhat obscure, but it is commonly used in computer graphics.
- The alpha is specified using the values of 0 to 1.
  - The value represents the amount of opacity.
More about alpha:
- RGBA Color space
- Alpha Compositing

Example of the Effect of Alpha Settings: Varying the Opacity of Text

Note that the examples below use the...
- background-image property for the images of Shakespeare
- background-color property for the tan color in the bottom row.
The letters ABC in the example below are text characters.
Each example uses the CSS color: property and its rgba( ) color specification.
The rgba values of the color property that are applied to the text in each of the three examples, use integer values from the range of 0-255.
- The specific values that are used by color property for the letters in each of the three columns are shown in the column headings.
- The RGB values are identical.
- Only the alpha value varies.

Text Color Specifications alpha value = 1 color:rgba(0,255,0,1.00);	Text Color Specifications alpha value = .65 color:rgba(0,255,0,.65)	Text Color Specifications alpha value = .35 color:rgba(0,255,0,.35)
ABC	ABC	ABC
ABC	ABC	ABC

Hexadecimal

H03h - (9:55)
- Example:
  - color: #F9B7A9;
- "Hex" - the most difficult to understand, but seems to be used the most.
- What the letters/numbers mean:
  - The syntax is: #RRGGBB
    - RR = red value
    - GG = green
    - BB = blue
- Hexadecimal code uses a base 16 numbering system:
  - It is based on bits: 2⁸ = 256
  - The characters that are used to represent 16 values are: 0-9,A-F
  - 0=0
  - F=15
  - FF = 255
- Because FF=255, there are 256 possible colors for each of the three primary colors of light.
  - That provides 16,777,216 color options.
- Note that there is no option for setting color transparency using hexadecimal color.
- Everything you ever wanted to know about Hexadecimal numbers
  - Table of hexadecimal - decimal equivalents
  - Converter: decimal numbers into hexadecimal
- Hexadecimal uses the least amount of code for defining 16,777,216 colors.

Hexadecimal Shorthand

H03i - (1:18)
- Example:
  - color: #CF9;
- In hex shorthand, each character represents two of the character in long hexadecimal.
- For example - the following are the same color:
  - #FF9977
  - #F97
- Web safe:
  - Combinations of the following will be web safe:
  - 0, 3, 6, 9, C, F

Color Conclusion

Which way of defining colors is best?

H03j - (1:06)
- Hexadecimal is still widely used.
- However interpreting the numbers and letters can be challenging.
- Using the two rgb methods provides a much more intuitive way to understand the color mix.
- Other than using color names, you must understand how color light mixes.

Web Safe Colors

H03k - (1:23)
- Web safe colors:
  - 216 Web Safe Colors
- No longer very relevant.

More info on color and color theory

H03l - (2:23)

Table of colors and the different ways of specifying them

H03m - (2:18)

	black	white
Color specification type
RGB Integer	rgb(0,0,0)	rgb(255,255,255)
RGB Percentage	rgb(0%,0%,0%)	rgb(100%,100%,100%)
Long Hexadecimal	#000000	#FFFFFF
Short Hexadecimal	#000	#FFF
Color Names	black	white

Primary Colors of Light	red	green	blue
Color specification type
RGB Integer	rgb(255,0,0)	rgb(0,255,0)	rgb(0,0,255)
RGB Percentage	rgb(100%,0%,0%)	rgb(0%,100%,0%)	rgb(0%,0%,100%)
Long Hexadecimal	#FF0000	#00FF00	#0000FF
Short Hexadecimal	#F00	#0F0	#00F
Color Names	red	lime	blue

Secondary Colors of Light	yellow	cyan	magenta
Color specification type
RGB Integer	rgb(255,255,0)	rgb(0,255,255)	rgb(255,0,255)
RGB Percentage	rgb(100%,100%,0%)	rgb(0%,100%,100%)	rgb(100%,0%,100%)
Long Hexadecimal	#FFFF00	#00FFFF	#FF00FF
Short Hexadecimal	#FF0	#0FF	#F0F
Color Names	yellow	aqua	fuchsia

Assignment

H03n - (4:22)
1. Create a new html5 file.
2. Name it yourlastname_H03.html
3. Add four paragraphs of Lorem ipsum text.
4. Create an h1 header at the top.
  - Enter into it text well suited for the page's text colors that you will be defining.
  - For example: Brick Colors if most of your colors will be warm (such as red, brown, sepia)
  - Five words maximum in that header.
5. Also give the document an html title what uses the same words.
6. Use all three of the basic types of selectors to assign a unique color to each of the four paragraphs and the header.
  - You will create a total of five selectors.
  - The header ought to be the only one that uses a tag selector, which would be h1.
  - Use two of each of the class and id selectors for the rest.
7. For each selector use only the color property, which is how text gets colored.
8. Name each class and id using terms that do not suggest color, but use names of moods.
  - For example, if you were using the warm colors mentioned above, the mood names might be fire, excitement, energy, etc.
9. Specify colors appropriate for each mood. This highly subjective, so don't concern yourself with this part too much. Just don't name a class ice and specify a red color for it!
10. Only use colors that will provide very legible text against a white background - that is, the text must be darker than white and be easy to read. For example, don't specify yellow text.
  
  ...now get in the mood to do the assignment!