Color Composition and HTML - Making Colors Darker or Lighter
(Page 4 of 4 )
Making Colors Darker or Lighter
Generally, colors whose RGB values are closer to 255 are lighter in appearance and those whose values are closer to 0 are darker in appearance. To make a color appear darker, reduce the values of the three fundamental colors by the same amount (or proportionately); to make a color appear lighter, increase the values of the three fundamental colors by the same amount (or proportionately). This is a general rule.
The actual color of a substance (area of web page) is called hue. When you follow the above rule you may notice a small change in hue.
There are cases where you cannot decrease or increase all three colors by the same amount. We are not talking here about the white or black color. For example, if one of the three fundamental colors has a value of 0, there is no way you can decrease that. If one of the values of the fundamental color is 255, there is no way you can increase that. So to make a color appear darker here, decrease the colors unequally; to make a color appear lighter here, increase the colors unequally. Here you may notice a greater change in hue than in the above case.
Block Elements and colors
An HTML block element is one that has a line break before and after it. Examples of block elements are BODY, DIV, PARAGRAPH, PRE, HEADER and the HR element. With the BODY, DIV, PARAGRAPH, HEADER and PRE elements, the color (foreground color) property refers to the text they contain and not to any area within the element; the background-color refers to the color you would see in the absence of any element within the block element.
The HR element, however, behaves differently. Note that the aim of the HR element is to draw a horizontal line in the parent element. You can give it a color (foreground color) and it would be the color of the line. You can also give it a background color, which would be seen in the absence of the foreground color. You give the background and foreground color in exactly the same way that you give the background and foreground colors of the other block elements (using CSS).
The SPAN Element
The SPAN element is an HTML inline element. An inline element is an element that does not have a line break in front and after it. The background-color of a SPAN element appears similarly to the background-color of a DIV element. However, with the SPAN element, it covers only the portion that has text. The foreground color is the color of the text that the SPAN element contains. You set the foreground and background-color of the SPAN element in the same way as you do for the block elements (using CSS).
Conclusion
With the knowledge you have gained above, you can practically give an element on your web page any predetermined color. Well, the browser may not be able to display all the combinations of the red, green, and blue colors that you type, but a good browser will display something close to what you want. So you can set any color you like by hand, if you understand how colors are formed physically and how that formation process can be implemented in HTML.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
