Colours on the Web
Cascading Style Sheets have several options for determining colours: standard rgb, percent rgb, hexidecimal, shorthand hexidecimal, and name. You can use whatever is most comfortable to you, or mix and match.
- Standard RGB: this is standard RGB format, with each colour channel ranging from 0 - 255.
Example:
<p style="color:rgb(255,0,0)">This text is red.</p>
This text is red.
Standard RGB will give you 16,777,216 different permutations (256 each of red, green, and blue), which is also called 24 bit colour, because it composes 8 bits each of red, green, and blue (a bit = 2n, so 8 bit = 28 = 256; 256 red * 256 green * 256 blue = 16,777,216). - Percent RGB: this is RGB percentages, with each colour channel ranging from 0% - 100%.
Example:
<p style="color:rgb(100%,0%,0%)">This text is red.</p>
This text is red.
Percent RGB will give you 1,030,301 different permutations (101 each of red, green, and blue). - hexidecimal: like standard rgb, except hexidecimal is base-16 rather than base-10. In other words, it counts 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f. So rgb(255,0,0), or red, is #ff0000 (f * f = 16 * 16 = 256 = 255 in the 0-255 range); a mid-grey like rgb(100,100,100) = #646464; white = #ffffff and black = #000000.
Example:
<p style="color:#ff0000">This text is red.</p>
This text is red.
Hexidecimal will give you 16,777,216 different permutations, same as standard rgb. - shorthand hexidecimal: this is like hexidecimal above, but uses only one character for each of red, blue, and green.
Example:
<p style="color:#f00">This text is red.</p>
This text is red.
Shorthand hexidecimal will give you 4096 different permutations (16 each of red, green, and blue), or 12-bit colour. - names are pre-determined colour names, of which there are 16 official names (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow) and 127 unofficial ones (AliceBlue, AntiqueWhite, Aquamarine, Azure, Beige, Bisque, BlanchedAlmond, 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, Feldspar, FireBrick, FloralWhite, ForestGreen, Gainsboro, GhostWhite, Gold, GoldenRod, GreenYellow, HoneyDew, HotPink, IndianRed , Indigo, Ivory, Khaki, Lavender, LavenderBlush, LawnGreen, LemonChiffon, LightBlue, LightCoral, LightCyan, LightGoldenRodYellow, LightGrey, LightGreen, LightPink, LightSalmon, LightSeaGreen, LightSkyBlue, LightSlateBlue, LightSlateGray, LightSteelBlue, LightYellow, LimeGreen, Linen, Magenta, MediumAquaMarine, MediumBlue, MediumOrchid, MediumPurple, MediumSeaGreen, MediumSlateBlue, MediumSpringGreen, MediumTurquoise, MediumVioletRed, MidnightBlue, MintCream, MistyRose, Moccasin, NavajoWhite, OldLace, OliveDrab, Orange, OrangeRed, Orchid, PaleGoldenRod, PaleGreen, PaleTurquoise, PaleVioletRed, PapayaWhip, PeachPuff, Peru, Pink, Plum, PowderBlue, RosyBrown, RoyalBlue, SaddleBrown, Salmon, SandyBrown, SeaGreen, SeaShell, Sienna, SkyBlue, SlateBlue, SlateGray, Snow, SpringGreen, SteelBlue, Tan, Thistle, Tomato, Turquoise, Violet, VioletRed, Wheat, WhiteSmoke, YellowGreen) (unofficial means they may not work in all web browsers).
Example:
<p style="color:DarkGoldenRod">This text is DarkGoldenRod.</p>
This text is DarkGoldenRod.
You may also find EasyRGB helpful.