Homepagebau	Dateiversion: diesen Beitrag diskutieren, ergänzen, eine Frage stellen

Beschreibung:

Es gibt eine ganze Palette verschiedener Farbtöne und auch eine Reihe Namen bzw. Bezeichnungen, die nicht so geläufig sind.
Beides finden sie auf dieser Seite...

Hinweis: diese Farbtabellen wurden dynamisch über JavaScript erzeugt. Wir halten es da ausnahmsweise mit MediaMarkt - alle Farbwerte von Hand eingeben? Ich bin doch nicht blöd!
Am Ende dieser Seite finden sie die Skripte, welche zur Erzeugung dieser Tabellen verwendet wurden.

Kleiner Tipp:
Wir empfehlen diese Seite lokal auf ihrem Rechner zu speichern um sie (auch offline) bei Bedarf (meist während der Arbeit am eigenen Quellcode) aufrufen zu können.

Hexadezimal-Farbcodes

verschiedene Codes für ihre Homepage ...

000000	101010	202020	303030
404040	505050	606060	707070
808080	909090	a0a0a0	b0b0b0
c0c0c0	d0d0d0	e0e0e0	f0f0f0
000000	001000	002000	003000
004000	005000	006000	007000
008000	009000	00a000	00b000
00c000	00d000	00e000	00f000
000000	001008	002010	003018
004020	005028	006030	007038
008040	009048	00a050	00b058
00c060	00d068	00e070	00f078
000000	081000	102000	183000
204000	285000	306000	387000
408000	489000	50a000	58b000
60c000	68d000	70e000	78f000
000000	101000	202000	303000
404000	505000	606000	707000
808000	909000	a0a000	b0b000
c0c000	d0d000	e0e000	f0f000
000000	100800	201000	301800
402000	502800	603000	703800
804000	904800	a05000	b05800
c06000	d06800	e07000	f07800
000000	100000	200000	300000
400000	500000	600000	700000
800000	900000	a00000	b00000
c00000	d00000	e00000	f00000
000000	100008	200010	300018
400020	500028	600030	700038
800040	900048	a00050	b00058
c00060	d00068	e00070	f00078
000000	100010	200020	300030
400040	500050	600060	700070
800080	900090	a000a0	b000b0
c000c0	d000d0	e000e0	f000f0
000000	080010	100020	180030
200040	280050	300060	380070
400080	480090	5000a0	5800b0
6000c0	6800d0	7000e0	7800f0
000000	000010	000020	000030
000040	000050	000060	000070
000080	000090	0000a0	0000b0
0000c0	0000d0	0000e0	0000f0
000000	000810	001020	001830
002040	002850	003060	003870
004080	004890	0050a0	0058b0
0060c0	0068d0	0070e0	0078f0
000000	001010	002020	003030
004040	005050	006060	007070
008080	009090	00a0a0	00b0b0
00c0c0	00d0d0	00e0e0	00f0f0

HTML-Farbtabelle

eine Auswahl verschiedener Farbnamen, welche sie verwenden können
(einige ältere Browser verwenden nicht unbedingt alle hier angegebenen Bezeichnungen)

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	lightgoldenrodyellow	lightgreen
lightgrey	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	turquoise	violet	wheat
white	whitesmoke	yellow	yellowgreen

Windows-Systemfarben

(Quelle: Microsoft)

Nur im Internet Explorer stehen zusätzlich bestimmte Namen für vom Nutzer eingestellte Systemfarben zur Verfügung.
Diese möchte ich an dieser Stelle der Vollständigkeit halber erwähnen.
Da diese Farbnamen im Netscape-Navigator nicht unterstützt werden, ist von der Verwendung allerdings abzuraten.

activeborder	activecaption	appworkspace	background
buttonface	buttonhighlight	buttonshadow	buttontext
captiontext	graytext	highlight	highlighttext
inactiveborder	inactivecaption	inactivecaptiontext	infobackground
infotext	menu	menutext	scrollbar
threeddarkshadow	threedface	threedhighlight	threedlightshadow
threedshadow	window	windowframe	windowtext
transparent

Blick hinter die Kulissen...

Bitte nur zur privaten Verwendung und zu Testzwecken

Hier finden sie die 2 Skripte, mit denen diese Tabellen erzeugt wurden.
Zum Ausprobieren, können sie den Quelltext einfach in eine neue Datei kopieren, die sie als "*.html" speichern.

Erstellen einer Hexadezimal-Farbtabelle:
<html> <head> </head> <body> <H1>Hexadezimal-Farbtabelle</H1> <table align="center" border="0" cellspacing="2" cellpadding="3"> <script language="JavaScript"> <!-- dieses Skript erzeugt eine Farbtabelle, Autor: www.All-Community.de // ... freigegeben zur privaten Verwendung, solange der Hinweis auf den Autor // nicht entfernt wird ... var text = ""; var text2= ""; // S->W for (i=0; i < 255;) { document.writeln('<TR>'); for (j=0; j < 4; j++) { text = i.toString(16); if (text.length == 1) {text = "0"+text;}; document.writeln('<TD width="100" bgcolor="#'+text+text+text+'">#'+text+text+text+'</TD>'); if (i < 255) { i=i+16; }; }; document.writeln('</TR>'); }; // gruen for (i=0; i < 255;) { document.writeln('<TR>'); for (j=0; j < 4; j++) { text = i.toString(16); if (text.length == 1) {text = "0"+text;}; document.writeln('<TD width="100" bgcolor="#00'+text+'00">#00'+text+'00</TD>'); if (i < 255) { i=i+16; }; }; document.writeln('</TR>'); }; // gruen/blau for (i=0; i < 255;) { document.writeln('<TR>'); for (j=0; j < 4; j++) { text = i.toString(16); text2= (i/2).toString(16); if (text.length == 1) {text = "0"+text;}; if (text2.length == 1) {text2 = "0"+text2;}; document.writeln('<TD width="100" bgcolor="#00'+text+text2+'">#00'+text+text2+'</TD>'); if (i < 255) { i=i+16; }; }; document.writeln('</TR>'); }; // gruen/gelb for (i=0; i < 255;) { document.writeln('<TR>'); for (j=0; j < 4; j++) { text = i.toString(16); text2= (i/2).toString(16); if (text.length == 1) {text = "0"+text;}; if (text2.length == 1) {text2 = "0"+text2;}; document.writeln('<TD width="100" bgcolor="#'+text2+text+'00">#'+text2+text+'00</TD>'); if (i < 255) { i=i+16; }; }; document.writeln('</TR>'); }; // gelb for (i=0; i < 255;) { document.writeln('<TR>'); for (j=0; j < 4; j++) { text = i.toString(16); if (text.length == 1) {text = "0"+text;}; document.writeln('<TD width="100" bgcolor="#'+text+text+'00">#'+text+text+'00</TD>'); if (i < 255) { i=i+16; }; }; document.writeln('</TR>'); }; // orange for (i=0; i < 255;) { document.writeln('<TR>'); for (j=0; j < 4; j++) { text = i.toString(16); text2= (i/2).toString(16); if (text.length == 1) {text = "0"+text;}; if (text2.length == 1) {text2 = "0"+text2;}; document.writeln('<TD width="100" bgcolor="#'+text+text2+'00">#'+text+text2+'00</TD>'); if (i < 255) { i=i+16; }; }; document.writeln('</TR>'); }; // rot for (i=0; i < 255;) { document.writeln('<TR>'); for (j=0; j < 4; j++) { text = i.toString(16); if (text.length == 1) {text = "0"+text;}; document.writeln('<TD width="100" bgcolor="#'+text+'0000">#'+text+'0000</TD>'); if (i < 255) { i=i+16; }; }; document.writeln('</TR>'); }; // pink for (i=0; i < 255;) { document.writeln('<TR>'); for (j=0; j < 4; j++) { text = i.toString(16); text2= (i/2).toString(16); if (text.length == 1) {text = "0"+text;}; if (text2.length == 1) {text2 = "0"+text2;}; document.writeln('<TD width="100" bgcolor="#'+text+'00'+text2+'">#'+text+'00'+text2+'</TD>'); if (i < 255) { i=i+16; }; }; document.writeln('</TR>'); }; // rot/violett for (i=0; i < 255;) { document.writeln('<TR>'); for (j=0; j < 4; j++) { text = i.toString(16); if (text.length == 1) {text = "0"+text;}; document.writeln('<TD width="100" bgcolor="#'+text+'00'+text+'">#'+text+'00'+text+'</TD>'); if (i < 255) { i=i+16; }; }; document.writeln('</TR>'); }; // blau/violett for (i=0; i < 255;) { document.writeln('<TR>'); for (j=0; j < 4; j++) { text = i.toString(16); text2= (i/2).toString(16); if (text.length == 1) {text = "0"+text;}; if (text2.length == 1) {text2 = "0"+text2;}; document.writeln('<TD width="100" bgcolor="#'+text2+'00'+text+'">#'+text2+'00'+text+'</TD>'); if (i < 255) { i=i+16; }; }; document.writeln('</TR>'); }; // blau for (i=0; i < 255;) { document.writeln('<TR>'); for (j=0; j < 4; j++) { text = i.toString(16); if (text.length == 1) {text = "0"+text;}; document.writeln('<TD width="100" bgcolor="#0000'+text+'">#0000'+text+'</TD>'); if (i < 255) { i=i+16; }; }; document.writeln('</TR>'); }; // blau/gruen for (i=0; i < 255;) { document.writeln('<TR>'); for (j=0; j < 4; j++) { text = i.toString(16); text2= (i/2).toString(16); if (text.length == 1) {text = "0"+text;}; if (text2.length == 1) {text2 = "0"+text2;}; document.writeln('<TD width="100" bgcolor="#00'+text2+text+'">#00'+text2+text+'</TD>'); if (i < 255) { i=i+16; }; }; document.writeln('</TR>'); }; // cyan for (i=0; i < 255;) { document.writeln('<TR>'); for (j=0; j < 4; j++) { text = i.toString(16); if (text.length == 1) {text = "0"+text;}; document.writeln('<TD width="100" bgcolor="#00'+text+text+'">#00'+text+text+'</TD>'); if (i < 255) { i=i+16; }; }; document.writeln('</TR>'); }; //--> </script> </table> </body> </html>

Erstellen einer Tabelle der Farbnamen:
<html> <head> </head> <body> <H1>Farbtabelle</H1> <table align="center" border="0" cellspacing="2" cellpadding="3"> <script language="JavaScript"> <!-- dieses Skript erzeugt eine Farbtabelle, Autor: www.All-Community.de // ... freigegeben zur privaten Verwendung, solange der Hinweis auf den Autor // nicht entfernt wird ... var names = 'aliceblue,antiquewhite,aqua,aquamarine,azure,beige,bisque,black,blanchedalmond,blue,blueviolet,brown,burlywood,'; names+= 'cadetblue,chartreuse,chocolate,coral,cornflowerblue,cornsilk,crimson,cyan,darkblue,darkcyan,darkgoldenrod,darkgray,'; names+= 'darkgreen,darkkhaki,darkmagenta,darkolivegreen,darkorange,darkorchid,darkred,darksalmon,darkseagreen,darkslateblue,'; names+= 'darkslategray,darkturquoise,darkviolet,deeppink,deepskyblue,dimgray,dodgerblue,firebrick,floralwhite,forestgreen,'; names+= 'fuchsia,gainsboro,ghostwhite,gold,goldenrod,gray,green,greenyellow,honeydew,hotpink,indianred,indigo,ivory,khaki,'; names+= 'lavender,lavenderblush,lawngreen,lemonchiffon,lightblue,lightcoral,lightcyan,lightgoldenrodyellow,lightgreen,'; names+= 'lightgrey,lightpink,lightsalmon,lightseagreen,lightskyblue,lightslategray,lightsteelblue,lightyellow,lime,limegreen,'; names+= 'linen,magenta,maroon,mediumaquamarine,mediumblue,mediumorchid,mediumpurple,mediumseagreen,mediumslateblue,'; names+= 'mediumspringgreen,mediumturquoise,mediumvioletred,midnightblue,mintcream,mistyrose,moccasin,navajowhite,navy,oldlace,'; names+= 'olive,olivedrab,orange,orangered,orchid,palegoldenrod,palegreen,paleturquoise,palevioletred,papayawhip,peachpuff,' names+= 'peru,pink,plum,powderblue,purple,red,rosybrown,royalblue,saddlebrown,salmon,sandybrown,seagreen,seashell,sienna,'; names+= 'silver,skyblue,slateblue,slategray,snow,springgreen,steelblue,tan,teal,thistle,tomato,turquoise,violet,wheat,white,'; names+= 'whitesmoke,yellow,yellowgreen'; color = names.split(','); for (i=0; i < color.length; i++) { if (j == 0) { document.writeln('<TR>'); }; document.writeln('<TD width="100" bgcolor="'+color[i]+'">'+color[i]+'</TD>'); if (j == 3) { j=0; document.writeln('</TR>'); } else { j++ }; }; //--> </script> </table> </body> </html>

JavaScript Profis werden sicher schnell erkennen, dass beide Skripte nicht optimal sind,
ABER da sie ohnehin nur einmal ausgeführt werden müssen um den Code zu erzeugen, ist Geschwindigkeit hier nicht von Bedeutung...

Autor: Thomas Meyer

Home: www.All-Community.de

Kontakt: