Color Chart: Difference between revisions

From Drunkapedia
Jump to: navigation, search
imported>Tlosk
imported>Tlosk
No edit summary
Line 1: Line 1:
== General ==
== General ==
There are two ways to specify a particular color, and usually more than one way to use markup to specify the color displayed. If you have a very specific color in mind, you can specify the exact color by determining the Red Green and Blue components and converting this to a decimal equivalent (an example is given below).  
There are two ways to specify a particular color, and usually more than one way to use markup to specify the color displayed. If you have a very specific color in mind, you can specify the exact color by determining the Red Green and Blue components and converting this to a hexadecimal equivalent (an example is given [[Color Chart#RGB Components | below]]).  


You can also use color constants, these are words that the wiki engine recognizes and will display that color for you without having to know the RGB components. A fairly complete table is given below that displays a variety of color constants.
You can also use color constants, these are words that the wiki engine recognizes and will display that color for you without having to know the RGB components. A fairly complete table is given below that displays a variety of color constants.


Most modern browsers are able to display most colors, however there are still occasions where the colors a user sees are dependent on their particular browser/software version.
Most modern browsers are able to display most colors, however there are still occasions where the colors a user sees are dependent on their particular browser/software version.
== Using Colors ==
Here are some examples of using colors to change the appearance of different wiki elements. Both methods are shown (color constant and [[hexadecimal]]).
<nowiki>Text that is <font color=Green>Green</font>.</nowiki>
Text that is <font color=Green>Green</font>.
<nowiki>Text that is <font color=#0000FF>Red</font>.</nowiki>
Text that is <font color=#FF0000>Red</font>.
Individual cell in a table:
<nowiki>{|border=1
|bgcolor=Red width=30|
|Red
|}
{|border=1
|bgcolor=#FF0000 width=30|
|Red
|}</nowiki>
{|border=1
|bgcolor=Red width=30|
|Red
|}
All the cells of a table:
<nowiki>{|border=1 style=background-color:CornflowerBlue
|A
|B
|}</nowiki>
{|border=1 style=background-color:CornflowerBlue
|A
|B
|}


== Color Chart ==
== Color Chart ==
Line 640: Line 596:
|}
|}
|}
|}
== Using Colors ==
Here are some examples of using colors to change the appearance of different wiki elements. Both methods are shown (color constant and [[hexadecimal]]).
<nowiki>Text that is <font color=Green>Green</font>.</nowiki>
Text that is <font color=Green>Green</font>.
<nowiki>Text that is <font color=#0000FF>Red</font>.</nowiki>
Text that is <font color=#FF0000>Red</font>.
Individual cell in a table:
<nowiki>{|border=1
|bgcolor=Red width=30|
|Red
|}
{|border=1
|bgcolor=#FF0000 width=30|
|Red
|}</nowiki>
{|border=1
|bgcolor=Red width=30|
|Red
|}
All the cells of a table:
<nowiki>{|border=1 style=background-color:CornflowerBlue
|A
|B
|}</nowiki>
{|border=1 style=background-color:CornflowerBlue
|A
|B
|}


== RGB Components ==
== RGB Components ==
To determine the hexadecimal value for a particular color you need to know the Red, Green, and Blue components. Each component ranges from 0 (none) to 255 (full). For example the color red has no blue or green, and red of 255. Yellow has no blue, and red of 255 and green of 255. Most graphics applications can tell you these for a particular color. You can use Microsoft Paint that comes with all versions of Windows, use the eye dropper to select the color, then under the Colors menu select Edit Colors then Define Custom Colors. There you'll see the RGB values defined.
Once you know the RGB values you can convert them to the hexadecimal equivalent. Use the Windows calculator to enter the value for each component then change from Dec to Hex. For example, enter 255 while in Dec, then click on Hex and it will read FF. FF is the hexadecimal value for 255. To do another number switch back to Dec and for example 128 is 80. Values in a hexidecimal number can range from 0-9 and A-F. Once you have values for each component, simply string them together (each component should have 2 digits, so if it's 0, make it 00). The # symbol tells the wiki parser that it is a hexadecimal value. See the table below for some example conversions.


{|border=1 cellpadding=3 cellspacing=0
!width=30| Color
!Name
!Red
!Red Hex
!Green
!Green Hex
!Blue
!Blue Hex
!Hexadecimal
|-
|bgcolor=Orchid|
| Orchid
| 218
| DA
| 112
| 70
| 214
| D6
| #DA70D6
|-
|bgcolor=LightSeaGreen|
| LightSeaGreen
| 32
| 20
| 178
| B2
| 170
| AA
| #20B2AA
|-
|bgcolor=#D3D3D3|
| LightGray
| 211
| D3
| 211
| D3
| 211
| D3
| #D3D3D3
|-
|bgcolor=RoyalBlue|
| RoyalBlue
| 65
| 41
| 105
| 69
| 225
| E1
| #4169E1
|-
|}


[[Category:Help]]
[[Category:Help]]

Revision as of 06:23, 20 June 2008

General

There are two ways to specify a particular color, and usually more than one way to use markup to specify the color displayed. If you have a very specific color in mind, you can specify the exact color by determining the Red Green and Blue components and converting this to a hexadecimal equivalent (an example is given below).

You can also use color constants, these are words that the wiki engine recognizes and will display that color for you without having to know the RGB components. A fairly complete table is given below that displays a variety of color constants.

Most modern browsers are able to display most colors, however there are still occasions where the colors a user sees are dependent on their particular browser/software version.

Color Chart

Note that these are case insensitive (capitalization, or lack thereof, doesn't matter).

AliceBlue
AntiqueWhite
Aqua
Aquamarine
Azure
Beige
Bisque
Black
BlanchedAlmond
Blue
BlueViolet
Brown
BurlyWood
CadetBlue
Chartreuse
Chocolate
Coral
CornflowerBlue
Cornsilk
Crimson
Cyan
DarkBlue
DarkCyan
DarkGoldenrod
DarkGray
DarkGreen
DarkKhaki
DarkMagenta
DarkOliveGreen
DarkOrange
DarkOrchid
DarkRed
DarkSalmon
DarkSeaGreen
DarkSlateBlue
DarkSlateGray
DarkTurquoise
DarkViolet
DeepPink
DeepSkyBlue
DimGray
DodgerBlue
Firebrick
FloralWhite
ForestGreen
Fuchsia
Gainsboro
GhostWhite
Gold
Goldenrod
Gray
Green
GreenYellow
Honeydew
HotPink
IndianRed
Indigo
Ivory
Khaki
Lavender
LavenderBlush
LawnGreen
LemonChiffon
LightBlue
LightCoral
LightCyan
LightGoldenrod
LightGray
LightGreen
LightPink
LightSalmon
LightSeaGreen
LightSkyBlue
LightSlateGray
LightSteelBlue
LightYellow
Lime
LimeGreen
Linen
Magenta
Maroon
MediumAquamarine
MediumBlue
MediumOrchid
MediumPurple
MediumSeaGreen
MediumSlateBlue
MediumSpringGreen
MediumTurquoise
MediumVioletRed
MidnightBlue
MintCream
MistyRose
Moccasin
NavajoWhite
Navy
OldLace
Olive
OliveDrab
Orange
OrangeRed
Orchid
PaleGoldenrod
PaleGreen
PaleTurquoise
PaleVioletRed
PapayaWhip
PeachPuff
Peru
Pink
Plum
PowderBlue
Purple
Red
RosyBrown
RoyalBlue
SaddleBrown
Salmon
SandyBrown
SeaGreen
SeaShell
Sienna
Silver
SkyBlue
SlateBlue
SlateGray
Snow
SpringGreen
SteelBlue
Tan
Teal
Thistle
Tomato
Transparent
Turquoise
Violet
Wheat
White
WhiteSmoke
Yellow
YellowGreen

Using Colors

Here are some examples of using colors to change the appearance of different wiki elements. Both methods are shown (color constant and hexadecimal).

Text that is <font color=Green>Green</font>.

Text that is Green.


Text that is <font color=#0000FF>Red</font>.

Text that is Red.


Individual cell in a table:

{|border=1
|bgcolor=Red width=30|
|Red
|}

{|border=1
|bgcolor=#FF0000 width=30|
|Red
|}
Red


All the cells of a table:

{|border=1 style=background-color:CornflowerBlue
|A
|B
|}
A B


RGB Components

To determine the hexadecimal value for a particular color you need to know the Red, Green, and Blue components. Each component ranges from 0 (none) to 255 (full). For example the color red has no blue or green, and red of 255. Yellow has no blue, and red of 255 and green of 255. Most graphics applications can tell you these for a particular color. You can use Microsoft Paint that comes with all versions of Windows, use the eye dropper to select the color, then under the Colors menu select Edit Colors then Define Custom Colors. There you'll see the RGB values defined.

Once you know the RGB values you can convert them to the hexadecimal equivalent. Use the Windows calculator to enter the value for each component then change from Dec to Hex. For example, enter 255 while in Dec, then click on Hex and it will read FF. FF is the hexadecimal value for 255. To do another number switch back to Dec and for example 128 is 80. Values in a hexidecimal number can range from 0-9 and A-F. Once you have values for each component, simply string them together (each component should have 2 digits, so if it's 0, make it 00). The # symbol tells the wiki parser that it is a hexadecimal value. See the table below for some example conversions.

Color Name Red Red Hex Green Green Hex Blue Blue Hex Hexadecimal
Orchid 218 DA 112 70 214 D6 #DA70D6
LightSeaGreen 32 20 178 B2 170 AA #20B2AA
LightGray 211 D3 211 D3 211 D3 #D3D3D3
RoyalBlue 65 41 105 69 225 E1 #4169E1