Help:Colors
Using colors |
Contents
Choice of color
There are many colors available for use on a page and a number of systems with which to specify color:
- HTML color names (e.g. red),
- Hexadecimal, or hex triplet, codes (e.g. bronze is #CD7F32),
- web-safe colors, (e.g., light yellow is #FFC).
Standard HTML color names
The HTML 4.01 specification defines sixteen named colors, as follows:
| Color | Hexadecimal | Color | Hexadecimal |
|---|---|---|---|
| black | #000000 | silver | #c0c0c0 |
| gray | #808080 | white | #ffffff |
| maroon | #800000 | red | #ff0000 |
| purple | #800080 | fuchsia | #ff00ff |
| green | #008000 | lime | #00ff00 |
| olive | #808000 | yellow | #ffff00 |
| navy | #000080 | blue | #0000ff |
| teal | #008080 | aqua | #00ffff |
Coloring text
Set text color by using <span style="color:#009000"> TEXT </span>
Set background color by using <span style="background:#00FF00"> TEXT </span>
Set both by using <span style="color:#FFFFFF; background:#FF69B4"> TEXT </span>
Creating colored tables
Example 1. Yellow background
Code: {|style="background:yellow" |Zutano |Fulano |- |Mengano |Perengano |}
| Zutano | Fulano |
| Mengano | Perengano |
Example 2. Green background with white text
Code: {|style="background:green; color:white" |Zutano |Fulano |- |Mengano |Perengano |}
| Zutano | Fulano |
| Mengano | Perengano |
Example 3. Red background, white text, green border 5px width
Code: {|style="background:red; color:white; border:solid green 5px" |Zutano |Fulano |- |Mengano |Perengano |}
| Zutano | Fulano |
| Mengano | Perengano |
Creating colored backgrounds in paragraphs or whole pages (using div boxes)
A div box is a container for text, images and other objects in any WikiEducator page.
- A div box has several attributes and properties that define size, position, color of text inside the box, background color, border, etc.
- Defining a div box requires the usage of an HTML pair of tags: <div> for opening the box, and </div> for closing the box; "div" stands for "division".
- For the purpose of this Help Page we'll focus on color properties.
- There are several attributes available for div boxes (Id, Class, Style, Title, Lang, etc). The attribute used for managing colors in a div box is: style.
- Notice that you can enclose in a div box a simple paragraph or a whole page.
- Colors can be defined by its name or its hexadecimal number.
Example 1. Text over Light Cyan background color
Generic code:
<div style="background:LightCyan"> text here </div>, or
<div style="background:#E0FFFF"> text here </div>
Output:
Example 2. Text over Light Cyan background color, with solid 2px blue border
Generic code:
<div style="background:LightCyan; border: solid blue 2px;"> text here </div>, or
<div style="background:#E0FFFF; border: solid blue 2px;"> text here </div>
Output:
Example 3. Red colored text over Light Cyan background color, with solid 2px blue border
Generic code:
<div style="background:LightCyan; border: solid blue 2px; color:red"> text here </div>, or
<div style="background:#E0FFFF; border: solid blue 2px; color:#FF0000"> text here </div>
Output:
See also
Help:Colors in Wikipedia
|
Work in progress, expect frequent changes. Help and feedback is welcome. See discussion page. |
|
