Web Color
Color Basics
Colored Light
- H03a - (4:41)
- The web uses the principles of colored light because the colors coming out of your computer monitor are colored light.
- Color light is additive.
- Paint uses subtractive color
- Chart
Color Bit Depth
- H03b - (5:27)
Powers of 2 |
Colors Available |
The Math |
---|---|---|
28 | = 256 | = 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 |
216 | = 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 |
224 | = 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)
- Cultures have different interpretations of color.
- In Western culture, red can suggest danger, romance, power, heat, intensity, and so forth
- Color in Chinese culture
- A large percentage of people have some form of color blindness.
- If you want to be sure that everyone can view your site easily , then it is best to take that factor into consideration.
- Here are statistics about the prevalence of each type of color blindness.
- Color palette
- Consider carefully the color palette you will use at your site.
- Come up with a color palette for your web site.
- There are numerous resources including:
- Paletton
- Adobe's Kuler
- Color blender
- If you have photos that you want to provide background colors for, this site will generate a color palette based on the image.
- Save your color palette. Some sites will save your color palette for you, or you can create an html file to contain them.
- Cultures have different interpretations of color.
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.
- W3C - 140 Named Colors
- Example:
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.
- Example:
RGB Integer, also referred to as RGB Decimal
- H03g
- (5:31)
- Example:
- color: rgb(15, 250, 0);
- 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.
- Decimal values are not permitted, only integers ("whole" numbers) are allowed.
- 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.
- Example:
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.
- Examples of value of the opacity:
- 0 = totally transparent.
- The color will not be seen. (not very useful!)
- .5 = 50% opaque
- The background will be partly visible through the color and the color is therefore less intense.
- 1 = 100% = totally opaque.
- This is the default.
- Nothing can be seen through the color.
- 0 = totally transparent.
- The letter "a" represents the opacity of the color.
- More about alpha:
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 |
---|---|---|
ABC | ABC | ABC |
ABC | ABC | ABC |
Hexadecimal
- H03h
- (9:55)
- Example:
- color: #F9B7A9;
- 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
- The syntax is: #RRGGBB
- Hexadecimal code uses a base 16 numbering system:
- It is based on bits: 28 = 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
- Hexadecimal uses the least amount of code for defining 16,777,216 colors.
- Example:
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
- Example:
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:
- No longer very relevant.
More info on color and color theory
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)
- Create a new html5 file.
- Name it yourlastname_H03.html
- Add four paragraphs of Lorem ipsum text.
- 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.
- Also give the document an html title what uses the same words.
- 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.
- For each selector use only the color property, which is how text gets colored.
- 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.
- 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!
- 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!