CodeNique

The Bold & Italic Tags

CodeNique — Sun, 12 Jul 2009 09:13:59 +0000

Now I’m going to show you the bold <b> and italic <i> tags which are a great way to make your text stand out. The <b> tag basically boldfaces a character or text within the <b> tag this tag also requires an end tag. If there is no boldface text available the browser will use some other kind of method.

Now the italic <i> tag requires an end tag and within the tags the text is rendered italic or in a oblique typeface. Now if there is no italic typeface available the browser will use another kind of method.

First I will show you how to code in the <b> tag.

<html> <head> <title>Welcome To HTML & XHTML</title> </head> <body> <p> <b>CodeNique</b> is now bold. </p> </body> </html>

Here is how the above code should look like.

CodeNique is now bold.

Now lets code in the <i> tag.

<html> <head> <title>Welcome To HTML & XHTML</title> </head> <body> <p> <i>CodeNique</i> is now italic. </p> </body> </html>

Here is how the above code should look like.

CodeNique is now italic.

CSS3 Color Names

CodeNique — Sun, 12 Jul 2009 08:56:22 +0000

Color names also known as color keywords, named colors and named color keywords in which their is 147 color names that are defined in the CSS3 color specification. Now the 147 color names also include the 17 standard color names. All 147 color names where taken from the X Windows Systems, X color names, which has been in use for many and I mean many years. So the 147 color names even though they are not the standard are likely to be very well supported.

The color name gray can be spelled with an ‘e‘ as in grey but Internet Explorer (IE) will not recognize the color names with the word grey spelled with an ‘e‘, it will only recognize the color names with the word gray spelled with an ‘a‘ just to let you know. So Internet Explorer (IE) only has 140 color names in the CSS3 color specification instead of the 147.

Now let me show you all 147 color names and their values in alphabetical order.

Name	Hexadecimal	Percentage	Integer	Short Hex	Example
aliceblue	#f0f8ff	rgb(94.1%,96.9%,100%)	rgb(240,248,255)
antiquewhite	#faebd7	rgb(98%,92.2%,84.3%)	rgb(250,235,215)
aqua	#00ffff	rgb(0%,100%,100%)	rgb(0,255,255)	#0ff
aquamarine	#7fffd4	rgb(49.8%,100%,83.1%)	rgb(127,255,212)
azure	#f0ffff	rgb(94.1%,100%,100%)	rgb(240,255,255)
beige	#f5f5dc	rgb(96.1%,96.1%,86.3%)	rgb(245,245,220)
bisque	#ffe4c4	rgb(100%,89.4%,76.9%)	rgb(255,228,196)
black	#000000	rgb(0%,0%,0%)	rgb(0,0,0)	#000
blanchedalmond	#ffebcd	rgb(100%,92.2%,80.4%)	rgb(255,235,205)
blue	#0000ff	rgb(0%,0%,100%)	rgb(0,0,255)	#00f
blueviolet	#8a2be2	rgb(54.1%,16.9%,88.6%)	rgb(138,43,226)
brown	#a52a2a	rgb(64.7%,16.5%,16.5%)	rgb(165,42,42)
burlywood	#deb887	rgb(87.1%,72.2%,52.9%)	rgb(222,184,135)
cadetblue	#5f9ea0	rgb(37.3%,62%,62.7%)	rgb(95,158,160)
chartreuse	#7fff00	rgb(49.8%,100%,0%)	rgb(127,255,0)
chocolate	#d2691e	rgb(82.4%,41.1%,11.8%)	rgb(210,105,30)
coral	#ff7f50	rgb(100%,49.8%,31.4%)	rgb(255,127,80)
cornflowerblue	#6495ed	rgb(39.2%,58.4%,92.9%)	rgb(100,149,237)
cornsilk	#fff8dc	rgb(100%,97.3%,86.3%)	rgb(255,248,220)
crimson	#dc143c	rgb(86.3%,7.8%,23.5%)	rgb(220,20,60)
cyan	#00ffff	rgb(0%,100%,100%)	rgb(0,255,255)	#0ff
darkblue	#00008b	rgb(0%,0%,54.5%)	rgb(0,0,139)
darkcyan	#008b8b	rgb(0%,54.5%,54.5%)	rgb(0,139,139)
darkgoldenrod	#b8860b	rgb(72.2%,52.5%,4.3%)	rgb(184,134,11)
darkgray	#a9a9a9	rgb(66.3%,66.3%,66.3%)	rgb(169,169,169)
darkgreen	#006400	rgb(0%,39.2%,0%)	rgb(0,100,0)
darkgrey	#a9a9a9	rgb(66.3%,66.3%,66.3%)	rgb(169,169,169)
darkkhaki	#bdb76b	rgb(74.1%,71.8%,42%)	rgb(189,183,107)
darkmagenta	#8b008b	rgb(54.5%,0%,54.5%)	rgb(139,0,139)
darkolivegreen	#556b2f	rgb(33.3%,42%,18.4%)	rgb(85,107,47)
darkorange	#ff8c00	rgb(100%,54.9%,0%)	rgb(255,140,0)
darkorchid	#9932cc	rgb(60%,19.6%,80%)	rgb(153,50,204)
darkred	#8b0000	rgb(54.5%,0%,0%)	rgb(139,0,0)
darksalmon	#e9967a	rgb(91.4%,58.8%,47.8%)	rgb(233,150,122)
darkseagreen	#8fbc8f	rgb(56.1%,73.7%,56.1%)	rgb(143,188,143)
darkslateblue	#483d8b	rgb(28.2%,23.9%,54.5%)	rgb(72,61,139)
darkslategray	#2f4f4f	rgb(18.4%,31%,31%)	rgb(47,79,79)
darkslategrey	#2f4f4f	rgb(18.4%,31%,31%)	rgb(47,79,79)
darkturquoise	#00ced1	rgb(0%,80.8%,82%)	rgb(0,206,209)
darkviolet	#9400d3	rgb(58%,0%,82.7%)	rgb(148,0,211)
deeppink	#ff1493	rgb(100%,7.8%,57.6%)	rgb(255,20,147)
deepskyblue	#00bfff	rgb(0%,74.9%,100%)	rgb(0,191,255)
dimgray	#696969	rgb(41.1%,41.1%,41.1%)	rgb(105,105,105)
dimgrey	#696969	rgb(41.1%,41.1%,41.1%)	rgb(105,105,105)
dodgerblue	#1e90ff	rgb(11.8%,56.5%,100%)	rgb(30,144,255)
firebrick	#b22222	rgb(69.8%,13.3%,13.3%)	rgb(178,34,34)
floralwhite	#fffaf0	rgb(100%,98%,94.1%)	rgb(255,250,240)
forestgreen	#228b22	rgb(13.3%,54.5%,13.3%)	rgb(34,139,34)
fuchsia	#ff00ff	rgb(100%,0%,100%)	rgb(255,0,255)	#f0f
gainsboro	#dcdcdc	rgb(86.3%,86.3%,86.3%)	rgb(220,220,220)
ghostwhite	#f8f8ff	rgb(97.3%,97.3%,100%)	rgb(248,248,255)
gold	#ffd700	rgb(100%,84.3%,0%)	rgb(255,215,0)
goldenrod	#daa520	rgb(85.5%,64.7%,12.5%)	rgb(218,165,32)
gray	#808080	rgb(50.2%,50.2%,50.2%)	rgb(128,128,128)
green	#008000	rgb(0%,50.2%,0%)	rgb(0,128,0)
greenyellow	#adff2f	rgb(67.8%,100%,18.4%)	rgb(173,255,47)
grey	#808080	rgb(50.2%,50.2%,50.2%)	rgb(128,128,128)
honeydew	#f0fff0	rgb(94.1%,100%,94.1%)	rgb(240,255,240)
hotpink	#ff69b4	rgb(100%,41.1%,70.6%)	rgb(255,105,180)
indianred	#cd5c5c	rgb(80.4%,36%,36%)	rgb(205,92,92)
indigo	#4b0082	rgb(29.4%,0%,51%)	rgb(75,0,130)
ivory	#fffff0	rgb(100%,100%,94.1%)	rgb(255,255,240)
khaki	#f0e68c	rgb(94.1%,90.2%,54.9%)	rgb(240,230,140)
lavender	#e6e6fa	rgb(90.2%,90.2%,98%)	rgb(230,230,250)
lavenderblush	#fff0f5	rgb(100%,94.1%,96.1%)	rgb(255,240,245)
lawngreen	#7cfc00	rgb(48.6%,98.8%,0%)	rgb(124,252,0)
lemonchiffon	#fffacd	rgb(100%,98%,80.4%)	rgb(255,250,205)
lightblue	#add8e6	rgb(67.8%,84.7%,90.2%)	rgb(173,216,230)
lightcoral	#f08080	rgb(94.1%,50.2%,50.2%)	rgb(240,128,128)
lightcyan	#e0ffff	rgb(87.8%,100%,100%)	rgb(224,255,255)
lightgoldenrodyellow	#fafad2	rgb(98%,98%,82.4%)	rgb(250,250,210)
lightgray	#d3d3d3	rgb(82.7%,82.7%,82.7%)	rgb(211,211,211)
lightgreen	#90ee90	rgb(56.5%,93.3%,56.5%)	rgb(144,238,144)
lightgrey	#d3d3d3	rgb(82.7%,82.7%,82.7%)	rgb(211,211,211)
lightpink	#ffb6c1	rgb(100%,71.4%,75.7%)	rgb(255,182,193)
lightsalmon	#ffa07a	rgb(100%,62.7%,47.8%)	rgb(255,160,122)
lightseagreen	#20b2aa	rgb(12.5%,69.8%,66.7%)	rgb(32,178,170)
lightskyblue	#87cefa	rgb(52.9%,80.8%,98%)	rgb(135,206,250)
lightslategray	#778899	rgb(46.7%,53.3%,60%)	rgb(119,136,153)	#789
lightslategrey	#778899	rgb(46.7%,53.3%,60%)	rgb(119,136,153)	#789
lightsteelblue	#b0c4de	rgb(69%,76.9%,87.1%)	rgb(176,196,222)
lightyellow	#ffffe0	rgb(100%,100%,87.8%)	rgb(255,255,224)
lime	#00ff00	rgb(0%,100%,0%)	rgb(0,255,0)	#0f0
limegreen	#32cd32	rgb(19.6%,80.4%,19.6%)	rgb(50,205,50)
linen	#faf0e6	rgb(98%,94.1%,90.2%)	rgb(250,240,230)
magenta	#ff00ff	rgb(100%,0%,100%)	rgb(255,0,255)	#f0f
maroon	#800000	rgb(50.2%,0%,0%)	rgb(128,0,0)
mediumaquamarine	#66cdaa	rgb(40%,80.4%,66.7%)	rgb(102,205,170)
mediumblue	#0000cd	rgb(0%,0%,80.4%)	rgb(0,0,205)
mediumorchid	#ba55d3	rgb(72.9%,33.3%,82.7%)	rgb(186,85,211)
mediumpurple	#9370db	rgb(57.6%,43.9%,85.9%)	rgb(147,112,219)
mediumseagreen	#3cb371	rgb(23.5%,70.2%,44.3%)	rgb(60,179,113)
mediumslateblue	#7b68ee	rgb(48.2%,40.8%,93.3%)	rgb(123,104,238)
mediumspringgreen	#00fa9a	rgb(0%,98%,60.4%)	rgb(0,250,154)
mediumturquoise	#48d1cc	rgb(28.2%,82%,80%)	rgb(72,209,204)
mediumvioletred	#c71585	rgb(78%,8.2%,52.2%)	rgb(199,21,133)
midnightblue	#191970	rgb(9.8%,9.8%,43.9%)	rgb(25,25,112)
mintcream	#f5fffa	rgb(96.1%,100%,98%)	rgb(245,255,250)
mistyrose	#ffe4e1	rgb(100%,89.4%,88.2%)	rgb(255,228,225)
moccasin	#ffe4b5	rgb(100%,89.4%,71%)	rgb(255,228,181)
navajowhite	#ffdead	rgb(100%,87.1%,67.8%)	rgb(255,222,173)
navy	#000080	rgb(0%,0%,50.2%)	rgb(0,0,128)
oldlace	#fdf5e6	rgb(99.2%,96.1%,90.2%)	rgb(253,245,230)
olive	#808000	rgb(50.2%,50.2%,0%)	rgb(128,128,0)
olivedrab	#6b8e23	rgb(42%,55.7%,13.7%)	rgb(107,142,35)
orange	#ffa500	rgb(100%,64.7%,0%)	rgb(255,165,0)
orangered	#ff4500	rgb(100%,27.1%,0%)	rgb(255,69,0)
orchid	#da70d6	rgb(85.5%,43.9%,83.9%)	rgb(218,112,214)
palegoldenrod	#eee8aa	rgb(93.3%,91%,66.7%)	rgb(238,232,170)
palegreen	#98fb98	rgb(59.6%,98.4%,59.6%)	rgb(152,251,152)
paleturquoise	#afeeee	rgb(68.6%,93.3%,93.3%)	rgb(175,238,238)
palevioletred	#db7093	rgb(85.9%,43.9%,57.6%)	rgb(219,112,147)
papayawhip	#ffefd5	rgb(100%,93.7%,83.5%)	rgb(255,239,213)
peachpuff	#ffdab9	rgb(100%,85.5%,72.5%)	rgb(255,218,185)
peru	#cd853f	rgb(80.4%,52.2%,24.7%)	rgb(205,133,63)
pink	#ffc0cb	rgb(100%,75.3%,79.6%)	rgb(255,192,203)
plum	#dda0dd	rgb(86.7%,62.7%,86.7%)	rgb(221,160,221)
powderblue	#b0e0e6	rgb(69%,87.8%,90.2%)	rgb(176,224,230)
purple	#800080	rgb(50.2%,0%,50.2%)	rgb(128,0,128)
red	#ff0000	rgb(100%,0%,0%)	rgb(255,0,0)	#f00
rosybrown	#bc8f8f	rgb(73.7%,56.1%,56.1%)	rgb(188,143,143)
royalblue	#4169e1	rgb(25.5%,41.1%,100%)	rgb(65,105,225)
saddlebrown	#8b4513	rgb(54.5%,27.1%,7.5%)	rgb(139,69,19)
salmon	#fa8072	rgb(98%,50.2%,44.7%)	rgb(250,128,114)
sandybrown	#f4a460	rgb(95.7%,64.3%,37.6%)	rgb(244,164,96)
seagreen	#2e8b57	rgb(18%,54.5%,34.1%)	rgb(46,139,87)
seashell	#fff5ee	rgb(100%,96.1%,93.3%)	rgb(255,245,238)
sienna	#a0522d	rgb(62.7%,32.2%,17.6%)	rgb(160,82,45)
silver	#c0c0c0	rgb(75.3%,75.3%,75.3%)	rgb(192,192,192)
skyblue	#87ceeb	rgb(52.9%,80.8%,92.2%)	rgb(135,206,235)
slateblue	#6a5acd	rgb(41.6%,35.3%,80.4%)	rgb(106,90,205)
slategray	#708090	rgb(43.9%,50.2%,56.5%)	rgb(112,128,144)
slategrey	#708090	rgb(43.9%,50.2%,56.5%)	rgb(112,128,144)
snow	#fffafa	rgb(100%,98%,98%)	rgb(255,250,250)
springgreen	#00ff7f	rgb(0%,100%,49.8%)	rgb(0,255,127)
steelblue	#4682b4	rgb(27.5%,51%,70.6%)	rgb(70,130,180)
tan	#d2b48c	rgb(82.4%,70.6%,54.9%)	rgb(210,180,140)
teal	#008080	rgb(0%,50.2%,50.2%)	rgb(0,128,128)
thistle	#d8bfd8	rgb(84.7%,74.9%,84.7%)	rgb(216,191,216)
tomato	#ff6347	rgb(100%,38.8%%,27.8%)	rgb(255,99,71)
turquoise	#40e0d0	rgb(25.1%,87.7%,81.6%)	rgb(64,224,208)
violet	#ee82ee	rgb(93.3%,51%,93.3%)	rgb(238,130,238)
wheat	#f5deb3	rgb(96.1%,87.1%,70.2%)	rgb(245,222,179)
white	#ffffff	rgb(100%,100%,100%)	rgb(255,255,255)	#fff
whitesmoke	#f5f5f5	rgb(96.1%,96.1%,96.1%)	rgb(245,245,245)
yellow	#ffff00	rgb(100%,100%,0%)	rgb(255,255,0)	#ff0
yellowgreen	#9acd32	rgb(60.4%,80.4%,19.6%)	rgb(154,205,50)

22 Really Web Safe Colors

CodeNique — Sun, 12 Jul 2009 08:55:15 +0000

Now there are also 22 really web safe colors that have been discovered from the 216 web-safe colors that are reliably displayed on Windows (PC), Macintosh (MAC), Internet Explorer (IE), Netscape Navigator, 8-bit, 16-bit, and 24-bit display systems.

Now let me show you the 22 really web safe colors.

Hexadecimal	Percentage	Integer	Short Hex	Example
#ffffff	rgb(100%,100%,100%)	rgb(255,255,255)	#fff
#00ffcc	rgb(0%,100%,80%)	rgb(0,255,204)	#0fc
#33ffcc	rgb(20%,100%,80%)	rgb(51,255,204)	#3fc
#00ffff	rgb(0%,100%,100%)	rgb(0,255,255)	#0ff
#33ffff	rgb(20%,100%,100%)	rgb(51,255,255)	#3ff
#66ffff	rgb(40%,100%,100%)	rgb(102,255,255)	#6ff
#00ff66	rgb(0%,100%,40%)	rgb(0,255,102)	#0f6
#33ff66	rgb(20%,100%,40%)	rgb(51,255,102)	#3f6
#33ff33	rgb(20%,100%,20%)	rgb(51,255,51)	#3f3
#66ff00	rgb(40%,100%,0%)	rgb(102,255,0)	#6f0
#66ff33	rgb(40%,100%,20%)	rgb(102,255,51)	#6f3
#00ff00	rgb(0%,100%,0%)	rgb(0,255,0)	#0f0
#ccff66	rgb(80%,100%,40%)	rgb(204,255,102)	#cf6
#ffff66	rgb(100%,100%,40%)	rgb(255,255,102)	#ff6
#ffff33	rgb(100%,100%,20%)	rgb(255,255,51)	#ff3
#ffff00	rgb(100%,100%,0%)	rgb(255,255,0)	#ff0
#ff00ff	rgb(100%,0%,100%)	rgb(255,0,255)	#f0f
#ff0000	rgb(100%,0%,0%)	rgb(255,0,0)	#f00
#ff0033	rgb(100%,0%,20%)	rgb(255,0,51)	#f03
#0000ff	rgb(0%,0%,100%)	rgb(0,0,255)	#00f
#000033	rgb(0%,0%,20%)	rgb(0,0,51)	#003
#000000	rgb(0%,0%,0%)	rgb(0,0,0)	#000

Web Safe Colors

CodeNique — Sun, 12 Jul 2009 08:53:57 +0000

Web safe colors also known as the web safe color palette, browser-safe colors, browser-safe palette, Netscape palette, 216 palette, web palette, color map, and the 6×6x6 color cube, all these names describe the same set of colors. The web safe colors are the colors that should not dither on any computer display systems that can only display 256 colors also known as 8-bit color, and will display the same on both Macintosh (MAC) and (PC) computers. Now to complicate things even more, browsers in order to run quicker, will only show a specific set of 256 colors on 8-bit color monitors. And if that browser has to show a color that’s out of its range, the browser will only have two choices, the first choice is that the browser can either mix two colors to create the missing color, which is also known as dithering. And the second choice is that the browser can also find the closest matching color within the specific set of the 256 colors, which can be a close match or a way off the mark match that we should not speak of ever.

Out of the 256 colors in an 8-bit color system, there are actually only 216 color values that are considered to be web safe colors that can be shown without dithering. The number 216 was selected because it allows exactly six shades of each color, which is red, green and blue, which when multiplied by each other equals exactly 216 as in the following example, (6 x 6 x 6 = 216). Also, the number 216 was chosen because the remaining 40 colors of the initial 256 colors vary on MAC’s and PC’s.

Now the web safe colors do have color names but most of the color names are taken from the extended color names list and most of the colored names are not listed in the standard web safe color map. As a result, the browser will mix two colors to create a close match for the missing color name, which is also known as dithering. The other option is that the browser can also find the closest matching color within the specific set of the 256 colors, which can be a close match or a way off the mark match that I said I would not ever talk about again, so I’ll go sit in the corner and think about what I did, again. Though colored names are easy to use they are not the most reliable way to display color, for this reason I will leave out the color name values for each web safe color. I will list some of the color names in a future tutorial though.

Now each web safe color can also be displayed in the following ways, which include hexadecimal notation, short form hex notation for certain colors, rgb percentage notation as well as rgb integer triplet-notation. I will show you all 216 web safe colors as well as all their color values minus color names in a chart later on in this tutorial. But first let me show you how to check to see if your color is a web safe color.

Now to check and see if your color is web safe, there is a couple of ways to find out depending on which notation you are using. For instance when using RGB percentage notation the value should either be 0% or a number that is divisible by 20, so the values that are allowed will be 0%, 20%, 40%, 60%, 80% and 100%, an example will be rgb(20%,100%,80%).

If you use the RGB integer triplet-notation your value should either be 0 or a number that is divisible by 51, so the allowed values would be 0, 51, 102, 153, 204 and 255, an example of this would be rgb(102,0,255).

With hexadecimal notation any of the color values that are 00, 33, 66, 99, cc and ff are considered to be web safe, an example of this is #6600cc. This also means that the shorthand hex values can also be used. The web safe values would be as follows 0, 3, 6, 9, c and f, an example of a short hex value would be #c36.

Now let me show you the 216 web safe colors and their values minus their colored name values, which I will display in a future tutorial.

Hexadecimal	Percentage	Integer	Short Hex	Example
#ffffff	rgb(100%,100%,100%)	rgb(255,255,255)	#fff
#ffccff	rgb(100%,80%,100%)	rgb(255,204,255)	#fcf
#ff99ff	rgb(100%,60%,100%)	rgb(255,153,255)	#f9f
#ff66ff	rgb(100%,40%,100%)	rgb(255,102,255)	#f6f
#ff33ff	rgb(100%,20%,100%)	rgb(255,51,255)	#f3f
#ff00ff	rgb(100%,0%,100%)	rgb(255,0,255)	#f0f
#ffffcc	rgb(100%,100%,80%)	rgb(255,255,204)	#ffc
#ffcccc	rgb(100%,80%,80%)	rgb(255,204,204)	#fcc
#ff99cc	rgb(100%,60%,80%)	rgb(255,153,204)	#f9c
#ff66cc	rgb(100%,40%,80%)	rgb(255,102,204)	#f6c
#ff33cc	rgb(100%,20%,80%)	rgb(255,51,204)	#f3c
#ff00cc	rgb(100%,0%,80%)	rgb(255,0,204)	#f0c
#ffff99	rgb(100%,100%,60%)	rgb(255,255,153)	#ff9
#ffcc99	rgb(100%,80%,60%)	rgb(255,204,153)	#fc9
#ff9999	rgb(100%,60%,60%)	rgb(255,153,153)	#f99
#ff6699	rgb(100%,40%,60%)	rgb(255,102,153)	#f69
#ff3399	rgb(100%,20%,60%)	rgb(255,51,153)	#f39
#ff0099	rgb(100%,0%,60%)	rgb(255,0,153)	#f09
#ffff66	rgb(100%,100%,40%)	rgb(255,255,102)	#ff6
#ffcc66	rgb(100%,80%,40%)	rgb(255,204,102)	#fc6
#ff9966	rgb(100%,60%,40%)	rgb(255,153,102)	#f96
#ff6666	rgb(100%,40%,40%)	rgb(255,102,102)	#f66
#ff3366	rgb(100%,20%,40%)	rgb(255,51,102)	#f36
#ff0066	rgb(100%,0%,40%)	rgb(255,0,102)	#f06
#ffff33	rgb(100%,100%,20%)	rgb(255,255,51)	#ff3
#ffcc33	rgb(100%,80%,20%)	rgb(255,204,51)	#fc3
#ff9933	rgb(100%,60%,20%)	rgb(255,153,51)	#f93
#ff6633	rgb(100%,40%,20%)	rgb(255,102,51)	#f63
#ff3333	rgb(100%,20%,20%)	rgb(255,51,51)	#f33
#ff0033	rgb(100%,0%,20%)	rgb(255,0,51)	#f03
#ffff00	rgb(100%,100%,0%)	rgb(255,255,0)	#ff0
#ffcc00	rgb(100%,80%,0%)	rgb(255,204,0)	#fc0
#ff9900	rgb(100%,60%,0%)	rgb(255,153,0)	#f90
#ff6600	rgb(100%,40%,0%)	rgb(255,102,0)	#f60
#ff3300	rgb(100%,20%,0%)	rgb(255,51,0)	#f30
#ff0000	rgb(100%,0%,0%)	rgb(255,0,0)	#f00
#ccffff	rgb(80%,100%,100%)	rgb(204,255,255)	#cff
#ccccff	rgb(80%,80%,100%)	rgb(204,204,255)	#ccf
#cc99ff	rgb(80%,60%,100%)	rgb(204,153,255)	#c9f
#cc66ff	rgb(80%,40%,100%)	rgb(204,102,255)	#c6f
#cc33ff	rgb(80%,20%,100%)	rgb(204,51,255)	#c3f
#cc00ff	rgb(80%,0%,100%)	rgb(204,0,255)	#c0f
#ccffcc	rgb(80%,100%,80%)	rgb(204,255,204)	#cfc
#cccccc	rgb(80%,80%,80%)	rgb(204,204,204)	#ccc
#cc99cc	rgb(80%,60%,80%)	rgb(204,153,204)	#c9c
#cc66cc	rgb(80%,40%,80%)	rgb(204,102,204)	#c6c
#cc33cc	rgb(80%,20%,80%)	rgb(204,51,204)	#c3c
#cc00cc	rgb(80%,0%,80%)	rgb(204,0,204)	#c0c
#ccff99	rgb(80%,100%,60%)	rgb(204,255,153)	#cf9
#cccc99	rgb(80%,80%,60%)	rgb(204,204,153)	#cc9
#cc9999	rgb(80%,60%,60%)	rgb(204,153,153)	#c99
#cc6699	rgb(80%,40%,60%)	rgb(204,102,153)	#c69
#cc3399	rgb(80%,20%,60%)	rgb(204,51,153)	#c39
#cc0099	rgb(80%,0%,60%)	rgb(204,0,153)	#c09
#ccff66	rgb(80%,100%,40%)	rgb(204,255,102)	#cf6
#cccc66	rgb(80%,80%,40%)	rgb(204,204,102)	#cc6
#cc9966	rgb(80%,60%,40%)	rgb(204,153,102)	#c96
#cc6666	rgb(80%,40%,40%)	rgb(204,102,102)	#c66
#cc3366	rgb(80%,20%,40%)	rgb(204,51,102)	#c36
#cc0066	rgb(80%,0%,40%)	rgb(204,0,102)	#c06
#ccff33	rgb(80%,100%,20%)	rgb(204,255,51)	#cf3
#cccc33	rgb(80%,80%,20%)	rgb(204,204,51)	#cc3
#cc9933	rgb(80%,60%,20%)	rgb(204,153,51)	#c93
#cc6633	rgb(80%,40%,20%)	rgb(204,102,51)	#c63
#cc3333	rgb(80%,20%,20%)	rgb(204,51,51)	#c33
#cc0033	rgb(80%,0%,20%)	rgb(204,0,51)	#c03
#ccff00	rgb(80%,100%,0%)	rgb(204,255,0)	#cf0
#cccc00	rgb(80%,80%,0%)	rgb(204,204,0)	#cc0
#cc9900	rgb(80%,60%,0%)	rgb(204,153,0)	#c90
#cc6600	rgb(80%,40%,0%)	rgb(204,102,0)	#c60
#cc3300	rgb(80%,20%,0%)	rgb(204,51,0)	#c30
#cc0000	rgb(80%,0%,0%)	rgb(204,0,0)	#c00
#99ffff	rgb(60%,100%,100%)	rgb(153,255,255)	#9ff
#99ccff	rgb(60%,80%,100%)	rgb(153,204,255)	#9cf
#9999ff	rgb(60%,60%,100%)	rgb(153,153,255)	#99f
#9966ff	rgb(60%,40%,100%)	rgb(153,102,255)	#96f
#9933ff	rgb(60%,20%,100%)	rgb(153,51,255)	#93f
#9900ff	rgb(60%,0%,100%)	rgb(153,0,255)	#90f
#99ffcc	rgb(60%,100%,80%)	rgb(153,255,204)	#9fc
#99cccc	rgb(60%,80%,80%)	rgb(153,204,204)	#9cc
#9999cc	rgb(60%,60%,80%)	rgb(153,153,204)	#99c
#9966cc	rgb(60%,40%,80%)	rgb(153,102,204)	#96c
#9933cc	rgb(60%,20%,80%)	rgb(153,51,204)	#93c
#9900cc	rgb(60%,0%,80%)	rgb(153,0,204)	#90c
#99ff99	rgb(60%,100%,60%)	rgb(153,255,153)	#9f9
#99cc99	rgb(60%,80%,60%)	rgb(153,204,153)	#9c9
#999999	rgb(60%,60%,60%)	rgb(153,153,153)	#999
#996699	rgb(60%,40%,60%)	rgb(153,102,153)	#969
#993399	rgb(60%,20%,60%)	rgb(153,51,153)	#939
#990099	rgb(60%,0%,60%)	rgb(153,0,153)	#909
#99ff66	rgb(60%,100%,40%)	rgb(153,255,102)	#9f6
#99cc66	rgb(60%,80%,40%)	rgb(153,204,102)	#9c6
#999966	rgb(60%,60%,40%)	rgb(153,153,102)	#996
#996666	rgb(60%,40%,40%)	rgb(153,102,102)	#966
#993366	rgb(60%,20%,40%)	rgb(153,51,102)	#936
#990066	rgb(60%,0%,40%)	rgb(153,0,102)	#906
#99ff33	rgb(60%,100%,20%)	rgb(153,255,51)	#9f3
#99cc33	rgb(60%,80%,20%)	rgb(153,204,51)	#9c3
#999933	rgb(60%,60%,20%)	rgb(153,153,51)	#993
#996633	rgb(60%,40%,20%)	rgb(153,102,51)	#963
#993333	rgb(60%,20%,20%)	rgb(153,51,51)	#933
#990033	rgb(60%,0%,20%)	rgb(153,0,51)	#903
#99ff00	rgb(60%,100%,0%)	rgb(153,255,0)	#9f0
#99cc00	rgb(60%,80%,0%)	rgb(153,204,0)	#9c0
#999900	rgb(60%,60%,0%)	rgb(153,153,0)	#990
#996600	rgb(60%,40%,0%)	rgb(153,102,0)	#960
#993300	rgb(60%,20%,0%)	rgb(153,51,0)	#930
#990000	rgb(60%,0%,0%)	rgb(153,0,0)	#900
#66ffff	rgb(40%,100%,100%)	rgb(102,255,255)	#6ff
#66ccff	rgb(40%,80%,100%)	rgb(102,204,255)	#6cf
#6699ff	rgb(40%,60%,100%)	rgb(102,153,255)	#69f
#6666ff	rgb(40%,40%,100%)	rgb(102,102,255)	#66f
#6633ff	rgb(40%,20%,100%)	rgb(102,51,255)	#63f
#6600ff	rgb(40%,0%,100%)	rgb(102,0,255)	#60f
#66ffcc	rgb(40%,100%,80%)	rgb(102,255,204)	#6fc
#66cccc	rgb(40%,80%,80%)	rgb(102,204,204)	#6cc
#6699cc	rgb(40%,60%,80%)	rgb(102,153,204)	#69c
#6666cc	rgb(40%,40%,80%)	rgb(102,102,204)	#66c
#6633cc	rgb(40%,20%,80%)	rgb(102,51,204)	#63c
#6600cc	rgb(40%,0%,80%)	rgb(102,0,204)	#60c
#66ff99	rgb(40%,100%,60%)	rgb(102,255,153)	#6f9
#66cc99	rgb(40%,80%,60%)	rgb(102,204,153)	#6c9
#669999	rgb(40%,60%,60%)	rgb(102,153,153)	#699
#666699	rgb(40%,40%,60%)	rgb(102,102,153)	#669
#663399	rgb(40%,20%,60%)	rgb(102,51,153)	#639
#660099	rgb(40%,0%,60%)	rgb(102,0,153)	#609
#66ff66	rgb(40%,100%,40%)	rgb(102,255,102)	#6f6
#66cc66	rgb(40%,80%,40%)	rgb(102,204,102)	#6c6
#669966	rgb(40%,60%,40%)	rgb(102,153,102)	#696
#666666	rgb(40%,40%,40%)	rgb(102,102,102)	#666
#663366	rgb(40%,20%,40%)	rgb(102,51,102)	#636
#660066	rgb(40%,0%,40%)	rgb(102,0,102)	#606
#66ff33	rgb(40%,100%,20%)	rgb(102,255,51)	#6f3
#66cc33	rgb(40%,80%,20%)	rgb(102,204,51)	#6c3
#669933	rgb(40%,60%,20%)	rgb(102,153,51)	#693
#666633	rgb(40%,40%,20%)	rgb(102,102,51)	#663
#663333	rgb(40%,20%,20%)	rgb(102,51,51)	#633
#660033	rgb(40%,0%,20%)	rgb(102,0,51)	#603
#66ff00	rgb(40%,100%,0%)	rgb(102,255,0)	#6f0
#66cc00	rgb(40%,80%,0%)	rgb(102,204,0)	#6c0
#669900	rgb(40%,60%,0%)	rgb(102,153,0)	#690
#666600	rgb(40%,40%,0%)	rgb(102,102,0)	#660
#663300	rgb(40%,20%,0%)	rgb(102,51,0)	#630
#660000	rgb(40%,0%,0%)	rgb(102,0,0)	#600
#33ffff	rgb(20%,100%,100%)	rgb(51,255,255)	#3ff
#33ccff	rgb(20%,80%,100%)	rgb(51,204,255)	#3cf
#3399ff	rgb(20%,60%,100%)	rgb(51,153,255)	#39f
#3366ff	rgb(20%,40%,100%)	rgb(51,102,255)	#36f
#3333ff	rgb(20%,20%,100%)	rgb(51,51,255)	#33f
#3300ff	rgb(20%,0%,100%)	rgb(51,0,255)	#30f
#33ffcc	rgb(20%,100%,80%)	rgb(51,255,204)	#3fc
#33cccc	rgb(20%,80%,80%)	rgb(51,204,204)	#3cc
#3399cc	rgb(20%,60%,80%)	rgb(51,153,204)	#39c
#3366cc	rgb(20%,40%,80%)	rgb(51,102,204)	#36c
#3333cc	rgb(20%,20%,80%)	rgb(51,51,204)	#33c
#3300cc	rgb(20%,0%,80%)	rgb(51,0,204)	#30c
#33ff99	rgb(20%,100%,60%)	rgb(51,255,153)	#3f9
#33cc99	rgb(20%,80%,60%)	rgb(51,204,153)	#3c9
#339999	rgb(20%,60%,60%)	rgb(51,153,153)	#399
#336699	rgb(20%,40%,60%)	rgb(51,102,153)	#369
#333399	rgb(20%,20%,60%)	rgb(51,51,153)	#339
#330099	rgb(20%,0%,60%)	rgb(51,0,153)	#309
#33ff66	rgb(20%,100%,40%)	rgb(51,255,102)	#3f6
#33cc66	rgb(20%,80%,40%)	rgb(51,204,102)	#3c6
#339966	rgb(20%,60%,40%)	rgb(51,153,102)	#396
#336666	rgb(20%,40%,40%)	rgb(51,102,102)	#366
#333366	rgb(20%,20%,40%)	rgb(51,51,102)	#336
#330066	rgb(20%,0%,40%)	rgb(51,0,102)	#306
#33ff33	rgb(20%,100%,20%)	rgb(51,255,51)	#3f3
#33cc33	rgb(20%,80%,20%)	rgb(51,204,51)	#3c3
#339933	rgb(20%,60%,20%)	rgb(51,153,51)	#393
#336633	rgb(20%,40%,20%)	rgb(51,102,51)	#363
#333333	rgb(20%,20%,20%)	rgb(51,51,51)	#333
#330033	rgb(20%,0%,20%)	rgb(51,0,51)	#303
#33ff00	rgb(20%,100%,0%)	rgb(51,255,0)	#3f0
#33cc00	rgb(20%,80%,0%)	rgb(51,204,0)	#3c0
#339900	rgb(20%,60%,0%)	rgb(51,153,0)	#390
#336600	rgb(20%,40%,0%)	rgb(51,102,0)	#360
#333300	rgb(20%,20%,0%)	rgb(51,51,0)	#330
#330000	rgb(20%,0%,0%)	rgb(51,0,0)	#300
#00ffff	rgb(0%,100%,100%)	rgb(0,255,255)	#0ff
#00ccff	rgb(0%,80%,100%)	rgb(0,204,255)	#0cf
#0099ff	rgb(0%,60%,100%)	rgb(0,153,255)	#09f
#0066ff	rgb(0%,40%,100%)	rgb(0,102,255)	#06f
#0033ff	rgb(0%,20%,100%)	rgb(0,51,255)	#03f
#0000ff	rgb(0%,0%,100%)	rgb(0,0,255)	#00f
#00ffcc	rgb(0%,100%,80%)	rgb(0,255,204)	#0fc
#00cccc	rgb(0%,80%,80%)	rgb(0,204,204)	#0cc
#0099cc	rgb(0%,60%,80%)	rgb(0,153,204)	#09c
#0066cc	rgb(0%,40%,80%)	rgb(0,102,204)	#06c
#0033cc	rgb(0%,20%,80%)	rgb(0,51,204)	#03c
#0000cc	rgb(0%,0%,80%)	rgb(0,0,204)	#00c
#00ff99	rgb(0%,100%,60%)	rgb(0,255,153)	#0f9
#00cc99	rgb(0%,80%,60%)	rgb(0,204,153)	#0c9
#009999	rgb(0%,60%,60%)	rgb(0,153,153)	#099
#006699	rgb(0%,40%,60%)	rgb(0,102,153)	#069
#003399	rgb(0%,20%,60%)	rgb(0,51,153)	#039
#000099	rgb(0%,0%,60%)	rgb(0,0,153)	#009
#00ff66	rgb(0%,100%,40%)	rgb(0,255,102)	#0f6
#00cc66	rgb(0%,80%,40%)	rgb(0,204,102)	#0c6
#009966	rgb(0%,60%,40%)	rgb(0,153,102)	#096
#006666	rgb(0%,40%,40%)	rgb(0,102,102)	#066
#003366	rgb(0%,20%,40%)	rgb(0,51,102)	#036
#000066	rgb(0%,0%,40%)	rgb(0,0,202)	#006
#00ff33	rgb(0%,100%,20%)	rgb(0,255,51)	#0f3
#00cc33	rgb(0%,80%,20%)	rgb(0,204,51)	#0c3
#009933	rgb(0%,60%,20%)	rgb(0,153,51)	#093
#006633	rgb(0%,40%,20%)	rgb(0,102,51)	#063
#003333	rgb(0%,20%,20%)	rgb(0,51,51)	#033
#000033	rgb(0%,0%,20%)	rgb(0,0,51)	#003
#00ff00	rgb(0%,100%,0%)	rgb(0,255,0)	#0f0
#00cc00	rgb(0%,80%,0%)	rgb(0,204,0)	#0c0
#009900	rgb(0%,60%,0%)	rgb(0,153,0)	#090
#006600	rgb(0%,40%,0%)	rgb(0,102,0)	#060
#003300	rgb(0%,20%,0%)	rgb(0,51,0)	#030
#000000	rgb(0%,0%,0%)	rgb(0,0,0)	#000

How To Convert Hexadecimal Color Values To RGB Color Values & More

CodeNique — Sun, 12 Jul 2009 08:52:34 +0000

For the people that need to know the equivalents of the RGB color values to the hexadecimal color values I will display a chart for you to see the equivalents. But first let me explain on how you can get the equivalent for each value. Now in order to get the percentage values you will need to divide a triplet-integer notation number, which can range from 0-255 by 255, for example, 215/255 = 0.8431372….. now move the decimal point 2 places to the right, which gives us the percentage value 84.3%, which I rounded down to the nearest tenth. Now when using real numbers, which is the best way to display color, you should be aware that most browsers will ignore the decimal point and will round the value to the nearest number also known as an integer, for example, 84.3% will be rounded to 84%.

Now to get a triplet-integer notation number you will have to multiply a percentage value by 255, for example, 255 x 81% or 81% of 255 = 206.55, which will be between 206 and 207 depending on how you round the percentage value either up or down.

Now I will show you how to convert a hexadecimal notation value to an RGB integer-triplet notation value. Remember your hexadecimal color value should follow the following formula as in the following example, #RRGGBB. Now both RR’s represent red, and both GG’s represent green, and both BB’s stand for blue just to refresh your memory. The formula that you will use to convert the hex value into an RGB integer-triplet notation value is stated below.

(R x 16) + (R x 1) = R
(G x 16) + (G x 1) = G
(B x 16) + (B x 1) = B

As you can see in the example above you will have to multiply the first digit in each color spectrum by the hexadecimal base of 16. One thing to remember is that if you have a digit that is a letter, for example, ‘b‘ you will have to convert it to its number form, which in this case the letter ‘b‘ will equal 11 all the way to ‘f‘, which will equal 15, take this as a reminder in case you forgot. Next, you will have to multiply the second digit of each color spectrum by 1 after that you will have to add both color values, which will represent the color value in RGB integer-triplet notation.

Now I will demonstrate the formula above to give you a better understanding of what I’m talking about. In our example, we will use the hex number color value #aa88c4. Now let me show you how to convert the hexadecimal notation color value into an RGB integer-triplet notation value. Remember to convert each letter to its numeric value, as I will show you in the example on the next page.

aa = (10 x 16) + (10 x 1) = 170
88 = (8 x 16) + (8 x 1) = 136
c4 = (12 x 16) + (4 x 1) = 196

Now your RGB integer-triplet notation color value that was converted from the hex value will be rgb(170,136,196) both color values will display the color the same.

Now if you want to convert the RGB integer-triplet notation value to a hexadecimal value you will have to divide each value by the hexadecimal base of 16. You will also have to keep each whole number as well as its remainder, as I will explain to you after I show you the formula that is listed below.

R/16 = R and R
G/16 = G and G
B/16 = B and B

Let me show you what I mean with the above formula, lets take the RGB integer-triplet notation color value from earlier, which is rgb(170,136,196) and convert it back to a hexadecimal value as I will show you below.

170/16 = 10 and 10
136/16 = 8 and 8
196/16 = 12 and 4

Now as you can see the answer will be #101088124 when we string all the numbers together but we still have to change the digit 10 to the hex base equivalent, which will be ‘a‘ as well as the digit 12, which will be ‘c‘ so our hex color value will be #aa88c4. Now let me explain in more detail on how we got that value. For the red color value we divided 170 by 16 in which 16 only goes into 170 ten times leaving a remainder of 10. Now for the green value we divided 136 by 16 in which 16 goes into 136 eight times with a remainder of 8 and last but not least the blue color value, which we divided 196 by 16 in which 16 goes into 196 twelve times with a remainder of 4. Now if we string all the values together and convert all the numbers from 10 and up to their hexadecimal base equivalents are answer will be #aa88c4.

One more thing before I continue the hexadecimal value ‘f‘ will display the color the brightest and the hexadecimal value ‘0‘ will display the color the darkest.

Now I created a chart that shows the equivalent values for hexadecimal notation, RGB percentage notation and RGB integer-triplet notation. For the percentages, I used fractional numbers that I rounded to the nearest tenth. I converted all 256 numbers for you, somebody give me a cookie or a bottle of gin for this. The chart can be found below.

Number	Hex	Percentage	Number	Hex	Percentage	Number	Hex	Percentage
0	00	0%	86	56	33.7%	172	ac	67.5%
1	01	0.4%	87	57	34.1%	173	ad	67.8%
2	02	0.8%	88	58	34.5%	174	ae	68.2%
3	03	1.2%	89	59	34.9%	175	af	68.6%
4	04	1.6%	90	5a	35.3%	176	b0	69%
5	05	2%	91	5b	35.7%	177	b1	69.4%
6	06	2.4%	92	5c	36%	178	b2	69.8%
7	07	2.7%	93	5d	36.5%	179	b3	70.2%
8	08	3%	94	5e	36.9%	180	b4	70.6%
9	09	3.5%	95	5f	37.3%	181	b5	71%
10	0a	3.9%	96	60	37.6%	182	b6	71.4%
11	0b	4.3%	97	61	38%	183	b7	71.8%
12	0c	4.7%	98	62	38.4%	184	b8	72.2%
13	0d	5.1%	99	63	38.8%	185	b9	72.5%
14	0e	5.5%	100	64	39.2%	186	ba	72.9%
15	0f	5.9%	101	65	39.6%	187	bb	73.3%
16	10	6.3%	102	66	40%	188	bc	73.7%
17	11	6.7%	103	67	40.4%	189	bd	74.1%
18	12	7.1%	104	68	40.8%	190	be	74.5%
19	13	7.5%	105	69	41.1%	191	bf	74.9%
20	14	7.8%	106	6a	41.6%	192	c0	75.3%
21	15	8.2%	107	6b	42%	193	c1	75.7%
22	16	8.6%	108	6c	42.4%	194	c2	76%
23	17	9%	109	6d	42.7%	195	c3	76.5%
24	18	9.4%	110	6e	43.1%	196	c4	76.9%
25	19	9.8%	111	6f	43.5%	197	c5	77.3%
26	1a	10.2%	112	70	43.9%	198	c6	77.6%
27	1b	10.6%	113	71	44.3%	199	c7	78%
28	1c	11%	114	72	44.7%	200	c8	78.4%
29	1d	11.4%	115	73	45.1%	201	c9	78.8%
30	1e	11.8%	116	74	45.5%	202	ca	79.2%
31	1f	12.2%	117	75	45.9%	203	cb	79.6%
32	20	12.5%	118	76	46.3%	204	cc	80%
33	21	12.9%	119	77	46.7%	205	cd	80.4%
34	22	13.3%	120	78	47.1%	206	ce	80.8%
35	23	13.7%	121	79	47.5%	207	cf	81.2%
36	24	14.1%	122	7a	47.8%	208	d0	81.6%
37	25	14.5%	123	7b	48.2%	209	d1	82%
38	26	14.9%	124	7c	48.6%	210	d2	82.4%
39	27	15.3%	125	7d	49%	211	d3	82.7%
40	28	15.7%	126	7e	49.4%	212	d4	83.1%
41	29	16.1%	127	7f	49.8%	213	d5	83.5%
42	2a	16.5%	128	80	50.2%	214	d6	83.9%
43	2b	16.9%	129	81	50.6%	215	d7	84.3%
44	2c	17.3%	130	82	51%	216	d8	84.7%
45	2d	17.6%	131	83	51.4%	217	d9	85.1%
46	2e	18%	132	84	51.8%	218	da	85.5%
47	2f	18.4%	133	85	52.2%	219	db	85.9%
48	30	18.8%	134	86	52.5%	220	dc	86.3%
49	31	19.2%	135	87	52.9%	221	dd	86.7%
50	32	19.6%	136	88	53.3%	222	de	87.1%
51	33	20%	137	89	53.7%	223	df	87.5%
52	34	20.4%	138	8a	54.1%	224	e0	87.8%
53	35	20.8%	139	8b	54.5%	225	e1	88.2%
54	36	21.2%	140	8c	54.9%	226	e2	88.6%
55	37	21.6%	141	8d	55.3%	227	e3	89%
56	38	22%	142	8e	55.7%	228	e4	89.4%
57	39	22.4%	143	8f	56.1%	229	e5	89.8%
58	3a	22.8%	144	90	56.5%	230	e6	90.2%
59	3b	23.1%	145	91	56.9%	231	e7	90.6%
60	3c	23.5%	146	92	57.3%	232	e8	91%
61	3d	23.9%	147	93	57.6%	233	e9	91.4%
62	3e	24.3%	148	94	58%	234	ea	91.8%
63	3f	24.7%	149	95	58.4%	235	eb	92.2%
64	40	25.1%	150	96	58.8%	236	ec	92.5%
65	41	25.5%	151	97	59.2%	237	ed	92.9%
66	42	25.9%	152	98	59.6%	238	ee	93.3%
67	43	26.3%	153	99	60%	239	ef	93.7%
68	44	26.7%	154	9a	60.4%	240	f0	94.1%
69	45	27.1%	155	9b	60.8%	241	f1	94.5%
70	46	27.5%	156	9c	61.2%	242	f2	94.9%
71	47	27.8%	157	9d	61.6%	243	f3	95.3%
72	48	28.2%	158	9e	62%	244	f4	95.7%
73	49	28.6%	159	9f	62.4%	245	f5	96.1%
74	4a	29%	160	a0	62.7%	246	f6	96.5%
75	4b	29.4%	161	a1	63.1%	247	f7	96.9%
76	4c	29.8%	162	a2	63.5%	248	f8	97.3%
77	4d	30.2%	163	a3	63.9%	249	f9	97.6%
78	4e	30.6%	164	a4	64.3%	250	fa	98%
79	4f	31%	165	a5	64.7%	251	fb	98.4%
80	50	31.4%	166	a6	65.1%	252	fc	98.8%
81	51	31.8%	167	a7	65.5%	253	fd	99.2%
82	52	32.2%	168	a8	65.9%	254	fe	99.6%
83	53	32.5%	169	a9	66.3%	255	ff	100%
84	54	32.9%	170	aa	66.7%
85	55	33.3%	171	ab	67.1%

Web Color Basics (A Detailed Guide)

CodeNique — Sun, 12 Jul 2009 08:51:31 +0000

Now let me introduce you to the basics of color also known as colour. Why you ask because most web designers want to know how to add color to their web page or their entire site. Now in HTML and XHTML you have two options for displaying color, which include named colors and hexadecimal codes. And in CSS, you have five options for displaying color, which include the named colors, along with the hexadecimal codes or you can use the functional RGB notation, which consists of two color value types, which are made up of a triplet of integers that are called percentage notation and integer-triplet notation. And last but not least, you can use the shorthand notation method, which was designed for CSS only. You should realize though that not every color can be represented by the shorthand notation method, I know it sucks.

The other options of displaying color that I mentioned earlier for CSS includes the functional RGB notation method and its two color value types as well as the shorthand notation method. Will still work with HTML and XHTML color type attributes, but sometimes the browsers will misinterpret the color values or not display them at all, so its best to use the value types with their recommended technologies. Also, which DOCTYPE you choose for your web page will affect how color is represented in your browser.

Now in CSS, color is more dominate then it is in HTML or XHTML. In CSS when you use the functional RGB notation method, you will have a choice of using two types of number values, which are called integers, which are also known as whole numbers like 2, 14 and so on, integers are also known as reals, which is short for real numbers or fractional numbers. I will explain more about the functional RGB notation method later on in this chapter.

First let me explain the most common method for displaying color, which is the hexadecimal color notation, which is also known as the hex triplets or simply hex. Now hexadecimal stands for a base of 16, which basically means that there are sixteen symbols that range from 0-9 and a-f. So to give you a better understanding of what I mean, the letter a, for example, will represent the number 10 and the letter b will represent the number 11 and so on.

Now in order to display a color using hexadecimal notation we will need to use the hash sign (#), which is required, followed by the six digit hexadecimal number that represents the red, green, and blue (RGB) components of the color. What I mean is that the first two digits will represent the color red, and the next two digits will represent the color green, and the last two digits will represent the color blue.

So our color value should follow the following formula as in the following example, #RRGGBB. Now both RR’s represent red, and both GG’s represent green, and both BB’s stand for blue. Also, a good thing to know is that there are no spaces, commas, or other types of spacers that come between the three pairs of numbers and letters. Also, another thing to remember is that 24-bit color is represented in this format.

Now in order to display the number 1 as a hexadecimal value you will have to code it in the following form 01. So if you want to display the number 9 as a hexadecimal value, you will do so as 09 and if you want to display the number 10 as a hexadecimal value, you will do so by coding in 0a and the number 11 as 0b all the way to 15, which will be displayed as 0f. Now when you get to number 16 you will display it as 10 in hexadecimal form and the number 26 will be displayed as 1a in hexadecimal form and so on all the way up to the number 255, which will be displayed as ff in hexadecimal form. Later on in this chapter, I will include a chart showing each number up to 255 next to its hexadecimal equivalent to give you a better understanding of what I’m talking about.

One thing that you should realize is that hexadecimal numbers can range from 00 all the way to ff representing the numbers 0-255. You should also know that each three RGB colors can have values that can range from 0 to 255 with a possibility of 256 values each, which means that there are 16,777,216 possible color combinations.

Now in the example below I will use the <font> tag and its color attribute to show you how to display color. One thing you should remember is that the <font> tag and its color attribute have been deprecated in favor of CSS, which I will explain later on so take this as a history lesson.

Now let me show you how to code in a hexadecimal value.

<html> <head> <title>Welcome To HTML, XHTML & CSS</title> </head> <body> <p> <font color="#00aa56">I'm a hexadecimal color value</font> </p> </body> </html>

Here is how the above code should be displayed in your browser.

I’m a hexadecimal color value

Now that you know how to code hexadecimal color values, I will now show you how to code in hexadecimal numbers that are made up of three matched pairs of numbers or letters. What I mean is that when a hexadecimal color value has three matched pairs of numbers or letters, for example, #aa0022 you can use the shorthand notation color value, which in this case will be #a02. So basically, all you have to do is use one number or letter from each double value for your shorthand notations color value. One thing you should know is that not every color can be represented by the shorthand notation method. The shorthand notation method was designed for CSS and will only work with CSS style sheets so I will show you how to code it in with CSS using the inline style method. In order to use CSS inline styles we will need to add the style attribute to the <font> tag, we will also need the CSS color property. I will explain more about the style attribute in a future tutorial.

Now let me show you how to code in a shorthand hexadecimal value.

<html> <head> <title>Welcome To CSS</title> </head> <body> <p> <font style="color: #c13;">#c13 is short for the value #cc1133</font> </p> </body> </html>

Here is how the above code should be displayed in your browser.

#c13 is short for the value #cc1133

Now let me explain to you in more detail about the two color value types that use functional RGB notation that I mentioned earlier, which are called percentage notation and integer-triplet notation. Before I get into the two different kinds of RGB color values let me just say this. Is that each value follows the same format, which starts with the keyword name rgb followed by the left parenthesis ( followed by a comma separated list, which is made up of three integer values or three percentage values followed by the right parenthesis ). As with the hexadecimal notation the first set of numbers will represent red, the second will represent green and the last blue.

First let me explain the percentage notation, which has values that can range from 0%-100%, which represents the numbers or integers or whatever name you prefer to call them from 0-255 in which 0% is equal to the number 0 and 100% is equal to 255.

Now the beauty of using percentages is that you can declare percentages as real numbers also known as fractional numbers, which means that you can give any color a value of 14.8% red, 81.6% green and 85.2% blue, for example. But a user agent also known as a browser that ignores the decimal points, which some do, will normally round the value to the nearest integer, which will change the values that I stated earlier in the example to 15% red, 82% green and 85% blue.

Now in percentage notation when you declare a value out of its range it will be moved to the nearest default ranges edge, which will either be 0% if it is less than or 100%, if it’s greater than. An example of this is when you declare a value of 2014%, the value will be moved to 100% and if you declare a value at -900% the value will be moved to 0%.

Now let me show you how to code in the RGB percentage notation value the CSS inline style way using the style attribute with the <font> tag in the example below.

<html> <head> <title>Welcome To CSS</title> </head> <body> <p> <font style="color: rgb(2%,14%,81%);">RGB percentage notation color value</font> </p> </body> </html>

Here is how the above code should be displayed in your browser.

RGB percentage notation color value

Now let me show you what’s up with the RGB integer-triplet notation, which instead of using the percentage values of 0%-100% we will be using the integer values, which are also known as whole numbers that will have the range of 0-255. One thing you should know is that only whole numbers are allowed when using the integer-triplet notation.

Now just like in percentage notation in integer-triplet notation when you declare a value out of its range it will be moved to the nearest default ranges edge, which will either be 0 if it is less than or 255 if it’s greater than. An example of this is when you declare a value of 800, the value will be moved to 255 and if you declare a value of -9000, the value will be moved to 0.

Just like the RGB percentage notation method the integer-triplet notation method is coded almost the same way except for the values, which are in integer form instead of being in the percentage form, as I will show you in the example below using the CSS inline style technique.

Again, I will be using the <font> tag with the style attribute when demonstrating the RGB integer-triplet notation in the example below.

<html> <head> <title>Welcome To CSS</title> </head> <body> <p> <font style="color: rgb(2,214,81);">RGB integer-triplet notation color value</font> </p> </body> </html>

Here is how the above code should be displayed in your browser.

RGB integer-triplet notation color value

Both percentage notation and integer-triplet notation are allowed to have negative values, for example, -81% or -81, but as with fractional numbers, which are found in the percentage notation. Some browsers might ignore the negative values and will round the value to 0% or 0 depending on which notation value you are using.

Now I’m going to show you how to code in the negative values below using CSS.

<html> <head> <title>Welcome To CSS</title> </head> <body> <p> <font style="color: rgb(2%,-14%,81%);">RGB percentage notation with a negative value</font> <font style="color: rgb(200,-124,81);">RGB integer-triplet notation with a negative value</font> </p> </body> </html>

Here is how the above code should be displayed in your browser.

RGB percentage notation with a negative value
RGB integer-triplet notation with a negative value

Also, both percentage notation and integer-triplet notation values are allowed to have white space around their numerical values, which will not affect the way the color will be displayed. I will show you what I mean in the example below.

<html> <head> <title>Welcome To CSS</title> </head> <body> <p> <font style="color: rgb(244,100,81);">color value without white space</font> <font style="color: rgb(244 , 100 , 81 );">color value with white space</font> </p> </body> </html>

Here is how the above code should be displayed in your browser.

color value without white space
color value with white space

Now let me explain to you the 17 standard predefined color name values also known as color keywords, which include aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow. The color names are case-insensitive. The color names where designed for HTML, XHTML and CSS 2.1. There are many more color names for CSS3 but they are not standard for HTML, XHTML and CSS 2.1, but I’ll put you up on game about the rest of the colored name values in a future tutorial. Now colored names are not the best way to display color, there are more exact ways to specify colors in CSS, which I have already explained earlier in this tutorial.

Now let me explain in more detail about the color names but more specifically the color gray, which can be spelled with an ‘e‘ as in grey but Internet Explorer (IE) will not recognize the color name grey spelled with an ‘e‘, it will only recognize the color name gray spelled with an ‘a‘ just to let you know.

Now I will show you how to code in a standard predefined color name with the <font> tag and its color attribute.

<html> <head> <title>Welcome To HTML, XHTML & CSS</title> </head> <body> <p> <font color="olive">This is a standard color name</font> </p> </body> </html>

Here is how the above code should be displayed in your browser.

This is a standard color name

Here is the list of the 17 standard predefined color name values in the table below along with their alternative codes and values.

Color	Percentage	Integer	Hexadecimal	Short Hex	Example
black	rgb(0%,0%,0%)	rgb(0,0,0)	#000000	#000
gray	rgb(50%,50%,50%)	rgb(128,128,128)	#808080
silver	rgb(75%,75%,75%)	rgb(192,192,192)	#c0c0c0
white	rgb(100%,100%,100%)	rgb(255,255,255)	#ffffff	#fff
olive	rgb(50%,50%,0%)	rgb(128,128,0)	#808000
purple	rgb(50%,0%,50%)	rgb(128,0,128)	#800080
fuchsia	rgb(100%,0%,100%)	rgb(255,0,255)	#ff00ff	#f0f
maroon	rgb(50%,0%,0%)	rgb(128,0,0)	#800000
red	rgb(100%,0%,0%)	rgb(255,0,0)	#ff0000	#f00
orange	rgb(100%,65%,0%)	rgb(255,165,0)	#ffa500
yellow	rgb(100%,100%,0%)	rgb(255,255,0)	#ffff00	#ff0
green	rgb(0%,50%,0%)	rgb(0,128,0)	#008000
teal	rgb(0%,50%,50%)	rgb(0,128,128)	#008080
lime	rgb(0%,100%,0%)	rgb(0,255,0)	#00ff00	#0f0
navy	rgb(0%,0%,50%)	rgb(0,0,128)	#000080
blue	rgb(0%,0%,100%)	rgb(0,0,255)	#0000ff	#00f
aqua	rgb(0%,100%,100%)	rgb(0,255,255)	#00ffff	#0ff

How To Add JavaScript To Your Web Pages Part 2

CodeNique — Sun, 12 Jul 2009 08:49:49 +0000

Now let me show you how to add JavaScript to your web pages using the external method, which is the most widely, used method as well as the best way to add JavaScript to your web pages.

In order to create your external JavaScript file you will need to first open Notepad for the PC or TextEdit for the MAC, both of which are free, but any text editor will do free or paid for.

You will then need to type your JavaScript code into the Notepad or TextEdit file. Next, you will need to save and name your JavaScript file by giving it a .js extension; for example, external.js is the way to save your file.

Now lets link the JavaScript file to the web page, in order to do this we will need to use the <script> tag along with the required type attribute with the value of text/javascript. We will also need the src attribute in which its value will be the location of our JavaScript file, which can be either a relative or absolute value. The <script> tag also requires an end tag. You can place the <script> tag either between the <head> or <body> tags.

Having an external JavaScript file allows you to include the same JavaScript code on multiple pages in which you do not have to include the CDATA declaration. You can also include as many scripts as you like which you can place within the <head> tags of your file or within the <body> tags of your file by using the <script> tag and its attributes.

Its also important to know is that when JavaScript code is imported from an external source file via the <script> tags src attribute into an XHTML document it will always be compatible with XHTML.

Now let me show you how to write in the JavaScript code for the JavaScript file which we will name your_script.js. The following code will display the date, time and year aligned to the right with an italic font on your web page.

document.write("<p align='right'><i>" + Date() + "<\/i> <\/p>")

Now below is the code on how to link to the JavaScript file.

<html> <head> <title>Welcome To JavaScript</title> </head> <body> <script type="text/javascript" src="your_script.js"></script> </body> </html>

Here is how the JavaScript code will be displayed in your browser in the example below.

How To Add JavaScript To Your Web Pages Part 1

CodeNique — Sun, 12 Jul 2009 08:48:29 +0000

You can add JavaScript to your web pages internally or externally. I will show you the internal method first.

We will need to use the <script> tag, which is used in the external method as well, but written in a different way. The <script> tag also requires an end tag. Everything between the <script> tags will be the JavaScript code that the browser will process. You cannot place any HTML or XHTML within the <script> tag. You may place the <script> tag as many times as you wish in-between either the <head> or <body> tags.

You will also need the <script> tags required type attribute with the value of text/javascript this will indicate, which scripting language is used for the current script.

We will also need to add the JavaScript single-line comments // along with the CDATA section <![CDATA[ ]]>. You should start off by declaring the JavaScript single-line comment and CDATA section by coding in //<![CDATA[ and ending it with the //]]> declaration to comment out the JavaScript code from browsers that cannot handle the JavaScript code. This will also make your JavaScript code compatible with XHTML documents as well as hide your JavaScript code from XML parsers. The JavaScript single-line comments // will comment out the CDATA section <![CDATA[ ]]>, to make sure that the JavaScript interrupter does not interpret the CDATA markup as JavaScript code, which would cause a JavaScript error. The CDATA section must wrap around the JavaScript code, which I will show you how to do in the upcoming example.

Now the content inside the <script> tags are handled differently in HTML 4 and in XHTML. In HTML 4, the content type is declared as CDATA, which means that entity references won’t be parsed. Now in XHTML web pages that are correctly displayed using the MIME type "application/xhtml+xml", the content type is declared as (#PCDATA), which basically means that entities will be parsed. This means that in XHTML, all special characters need to be encoded, for example all greater-than symbols should be encoded as > or all the content inside the <script> tags should be wrapped inside a CDATA section.

Now lets code in some JavaScript code into our web page, which I will show you how to do in the example below. We will be coding in an alert button, which when clicked will display an alert box.

<html> <head> <title>Welcome To JavaScript</title> <script type="text/javascript"> //<![CDATA[ function disp_alert () { alert ("I am an alert box"); } //]]> </script> </head> <body> <input type="button" onclick="disp_alert ()" value="Display Alert" /> </body> </html>

Click the link below, which will take you to another web page to see the above code in action. You should then be able to see a display alert button, which when clicked should display an alert box.

How To Add JavaScript To Your Web Pages Part 1 Example

What Is JavaScript?

CodeNique — Sun, 12 Jul 2009 08:47:40 +0000

JavaScript, which was originally called Mocha and then LiveScript, is used to add interactivity to your web pages without learning complex programming languages. With JavaScript, you can write scripts that can display the time or add an alert box, rollovers and much more.

JavaScript is an object and prototype based programming language, which was created in 1995 by Brendan Erich at Netscape.

You should realize that JavaScript is not like Java but both are similar to the C programming language.

Recognizing The Cascade

CodeNique — Sun, 12 Jul 2009 08:46:27 +0000

Now let me explain to you on how to recognize the cascade game, which the browsers play in order to determine on how to use the CSS style rules declarations.

It’s a good idea to recognize the cascade game in order to understand how the style rules declarations will be applied to your web page. There are about four levels to the cascade game, which I will explain in a sec.

1. The first level will try to locate all the style rules declarations from each style sheet, which can include internal, external and inline styles. The user agents will then try to match the selectors to the appropriate tags.

2. The second step is to sort out each declaration by giving greater importance to declarations marked !important then followed by sorting the declarations by origin. There are three types of origins, author, which are author style sheets, reader style sheets also known as a user or visitor, and user agent style sheets also known as a browser. Declarations that have normal weight from the authors style sheet will receive the highest status. Declarations from the user will receive medium status and declarations from user agent style sheets will receive the lowest priority. However, !important reader declarations take priority over any other styles including !important author declarations. Both the author and reader declarations take priority over the user agents default declarations.

3. The third step is to arrange the specificity of the selector; the more detailed the selector the more priority it is given over regular selectors.

4. And the fourth step will sort out the declarations by order specified giving higher priority to declarations that appear latest in the style sheet or document. And declarations inside the imported style sheets are considered to come before any declarations in the style sheet that imported them.