XHTML CSS Color Resource

Colors in CSS and HTML can be represented by using a standard name or a hexadecmal RGB value. These are the standard name. This is a resource and is freely distrubuted under the CC Act.

Color Name	Value
Popular
aqua	00ffff
black	000000
blue	0000ff
fuchsia	ff00ff
gray	808080
green	008000
lime	00ff00
maroon	800000
navy	000080
olive	808000
purple	800080
red	ff0000
silver	c0c0c0
teal	008080
yellow	ffff00
white	ffffff
Other
aliceblue	f0f5ff
antiquewhite	faebd7
aquamarine	7fffd4
azure	f0ffff
beige	f5f5dc
bisque	ffe4c4
blachedalmond	ffebcd
blueviolet	8a2be2
brown	a52a2a
burlywood	deb887
cadetblue	5f9ea0
chartreuse	7fff00
chocolate	d2691f
coral	ff7e50
cornflowerblue	6495ed
cornsilk	fff8dc
crimson	dc1436
cyan	00ffff
darkblue	000088
darkcyan	008b8b
darkgoldenrod	b8860b
darkgray	a9a9a9
darkgreen	006400
darkharki	bdb76b
darkmagneta	8b008b
darkolivegreen	556b2f
darkorange	ff8c00
darkorchid	9932cc
darkred	8b0000
darksalmon	e9967a
darkseagreen	8fbc8f
darkslateblue	483d8b
darkslategray	2f4f4f
darkturqoise	00ced1
darkvoiet	94000d3
deeppink	ff1493
deepskyblue	00bfff
dimgray	696969
dodgerblue	1e90ff
firebrick	b22222
floralwhite	fffaf0
forestgreen	228b22
gainsboro	dcdcdc
ghostwhite	f8f8ff
gold	ffd700
goldenrod	daa520
greenyellow	adff2f
honeydew	f0fff0
hotpink	ff69b4
indianred	cd5c5c
indigo	4b00082
indigo	4b0082
ivory	fffff0
khaki	f0e68c
lavender	e6e6fa
lavenderblush	fff0f5
lawngreen	7cfc00
lemonchiffon	fffacd
lightblue	add8e6
lightcoral	fo8080
lightcyan	e0ffff
lightgoldenrodyellow	fafad2
lightgreen	90ee90
lightgrey	d3d3d3
lightpink	ffb6c1
lightsalmon	ffa07a
seagreen	20b2aa
lightskyblue	87cefa
lightslategray	778899
lightsteelblue	b0c4de
lightyellow	ffffe0
limegreen	32cd32
linen	faf0e6
magenta	ff00ff
mediumaquamarine	66cdaa
mediumblue	0000cd
mediumorchid	ba55d3
mediumpurple	9370db
mediumseagreen	3cb371
mediumslateblue	7b68ee
meduimspringgreen	00fa9a
mediumturquoise	48d1cc
meduiumvioletred	c71585
midnightblue	191970
mintcream	f5fffa
mistyrose	ffe4e1
moccasin	ffe4b5
navajowhite	ffdead
oldlace	fdf5e6
oliverab	6b8e23
orange	ffa500
orangered	ff4500
orchid	da70d6
palegoldenrod	eee8aa
palegreen	98fb98
paleturquoise	afeeee
palevioletred	db7093
papayawhip	ffefd5
peachpuff	ffdab9
peru	cd853f
pink	ffc0cb
plum	dda0dd
powderblue	b0e0e6
rosybrown	bc8f8f
royalblue	4969e1
saddlebrown	8b4513
salmon	fa8072
sandybrown	f4a460
seagreen	2e8b57
seashell	fff5ee
sienna	a0522d
skyblue	87ceeb
slateblue	6a5acd
slategray	708090
snow	fffafa
springgreen	00ff7f
steelblue	4682b4
tan	d2b48c
thistle	d8bfd8
tomato	ff6347
turquoise	40e0d0
voilet	ee82ee
wheat	f5deb3
whitesmoke	f5f5f5
yellowgreen	9acd32

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.1 Australia License.

Add comment August 29th, 2005

Loading Script in Javascript Using CSS

So you want to give a little Loading Notification like Gmail has with its email. ( gMail’ ) Though this is pointless in the fact that usually your browser displays if there is somthing loading, you can add this to your page – though this will probably slow your site more down, but it has been used on lots of sites – so I have decided to write how do this, using Gmail for example codes – Google’s going to sue me haha.

How does it work?

Well ladies and gentlemen – and search bots – we are going to use Javascript and CSS for the design of the div -placement etc. We are using the document.write functions and some window.onload functions aswell as a getid and other css related functions via Javascript

Coding

Well… the way this one will work is that it show a Box – a div really – which has information which you define and it show while the page is loading.

Depending on the way you like your Box to show you change this css here.

#loading_div {
width: 75%;
height: 50%;
position: absolute;
margin-top: 10px;
margin-left: 10px;
border-top:1px solid;
border-bottom:1px solid;
font-size:11px;
border-color:#F3F4F4;
background-color:#FAFAFA;
}

Note: The CSS either must be added to the style sheet – external style sheet – it is a good idea if you make the style load before the content so the loading div looks beautiful all the way through but this is your choice. To impliment this into your own site use these tags

<style type="text/css"></style>

Also note that it must be defined in the header and you should also close the style tag! The style matches our site design 1 – which was used at the time of this article. The javascript… put this as high as possible in the BODY tag

<script type="text/javascript">
<!-- Scriptfrom -->
document.write('<div id="loading_div"> <strong>Loading Message Here</strong> </div>');
window.onload=function(){
document.getElementById("loading_div").style.display="none";
}
	
</script>

And your done? Comments help what ever just leave them below

Add comment August 28th, 2005