さらに気分次第で背景の色変えボタン
背景色をとても細かくボタンで変更。
【目次に戻る】
● 設置例
背景色
文字色

R 1 　8 　16

G 1 　8 　16

B 1 　8 　16

色辞典つきいろんな色作成機。
R=赤、G=緑、B=青。↑↓ボタンで各数値を上げ下げします。
直接テキストボックスの中に書き込んでもOK。
そして言うまでもないですが「暗く」「明るく」で暗くなったり明るくなったり。
ちなみに「暗く」押して「明るく」押しても必ずしも元の色に戻るかというとそうでもないので注意。
ランダムボタンで乱数を放り込んでみたり。色相ボタンは明るさを変えないで色をずらします。
色辞典だけで事足りるとか言っちゃイヤ。


●ソース
１・JavaScript 

<script type="text/javascript">
<!--
function up(n,m){
	if(document.form1.text1[n].value<=255-m){
		nn=document.form1.text1[n].value-0+m;
		document.form1.text1[n].value=nn;
		to16shin();
	}
}

function down(n,m){
	if(document.form1.text1[n].value>=0+m){
		document.form1.text1[n].value-=m;
		to16shin();
	}
}

function dark(){
	for(n=0;n<3;n++){
		down(n,16);
	}
}

function light(){
	for(n=0;n<3;n++){
		up(n,16);
	}
}

function rand(){
	for(n=0;n<3;n++){
		document.form1.text1[n].value=Math.floor(Math.random() * 255);
		to16shin();
	}
}

function sikisou(){
	a=document.form1.text1[0].value;
	document.form1.text1[0].value=document.form1.text1[1].value;
	document.form1.text1[1].value=document.form1.text1[2].value;
	document.form1.text1[2].value=a;
	to16shin();
}


//　text1からもってきた数値を16進変換してtext0にしまう
//　text0の値に背景色(文字色)変更
function to16shin(){
	if(document.form1.r[0].checked) a=0;
	else a=1;

	//　チェック。text1は0〜255の数字かどうか。
	for(i=0;i<3;i++){
		if(document.form1.text1[i].value-0<0 || isNaN(document.form1.text1[i].value-0)){
			document.form1.text1[i].value=0;
		}
		else if(document.form1.text1[i].value-0>255){
			document.form1.text1[i].value=255;
		}
	}

	r=new Array(3);
	g=new Array(3);
	b=new Array(3);

	r[a]=(document.form1.text1[0].value-0).toString(16);
	g[a]=(document.form1.text1[1].value-0).toString(16);
	b[a]=(document.form1.text1[2].value-0).toString(16);

	if(document.form1.text1[0].value-0<=15) r[a]="0"+r[a];
	if(document.form1.text1[1].value-0<=15) g[a]="0"+g[a];
	if(document.form1.text1[2].value-0<=15) b[a]="0"+b[a];

	document.form1.text0[a].value="#"+r[a]+g[a]+b[a];

	if(a==0) document.bgColor=document.form1.text0[a].value;
	else document.fgColor=document.form1.text0[a].value;
}


//　text0から数値をもって来て10進変換、text1にしまう
//　文字数が足りない場合、変な文字の場合は0で補完
function rclick(n){
	document.form1.text1[0].value=(document.form1.text0[n].value.substring(1, 3));
	document.form1.text1[1].value=(document.form1.text0[n].value.substring(3, 5));
	document.form1.text1[2].value=(document.form1.text0[n].value.substring(5, 7));

	for(a=0;a<3;a++){
		document.form1.text1[a].value
			=parseInt(document.form1.text1[a].value,16).toString(10);
		if(isNaN(parseInt(document.form1.text1[a].value,16)))
			document.form1.text1[a].value=0;
	}
}

//　フォーカスがtext0内に移動したら対応するラジオボタンにチェック
function focus2text0(n){
	document.form1.r[n].checked=true;
}

function focus2select0(){
	if(document.form1.r[0].checked) a=0;
	else a=1;

	i=document.form1.select0.selectedIndex;
	document.form1.text0[a].value=document.form1.select0.options[i].value;

	rclick(a);
	to16shin();
}
//-->
</script>


２・フォーム 

<form name="form1">
<table><tr><td>
<input type=text value="#ffffff" name=text0 size=10 onFocus="focus2text0(0)"
	onChange="rclick(0);to16shin()">
<input type=radio name=r checked onClick="rclick(0)">背景色
<br><input type=text value="#444444" name=text0 size=10 onFocus="focus2text0(1)"
	onChange="rclick(1);to16shin()">
<input type=radio name=r onClick="rclick(1)">文字色

<p>R <input type=text name=text1 size=3 value="255" onChange="to16shin()">
1<input type=button value="↑" onClick="up(0,1)">
<input type=button value="↓" onClick="down(0,1)">
　8<input type=button value="↑" onClick="up(0,8)">
<input type=button value="↓" onClick="down(0,8)">
　16<input type=button value="↑" onClick="up(0,16)">
<input type=button value="↓" onClick="down(0,16)">

<p>G <input type=text name=text1 size=3 value="255" onChange="to16shin()">
1<input type=button value="↑" onClick="up(1,1)">
<input type=button value="↓" onClick="down(1,1)">
　8<input type=button value="↑" onClick="up(1,8)">
<input type=button value="↓" onClick="down(1,8)">
　16<input type=button value="↑" onClick="up(1,16)">
<input type=button value="↓" onClick="down(1,16)">

<p>B <input type=text name=text1 size=3 value="255" onChange="to16shin()">
1<input type=button value="↑" onClick="up(2,1)">
<input type=button value="↓" onClick="down(2,1)">
　8<input type=button value="↑" onClick="up(2,8)">
<input type=button value="↓" onClick="down(2,8)">
　16<input type=button value="↑" onClick="up(2,16)">
<input type=button value="↓" onClick="down(2,16)">
<p>
<input type="button" value=" 暗く " onClick="dark()">
<input type="button" value="明るく" onClick="light()">
<input type="button" value="ランダム" onClick="rand()">
<input type="button" value=" 色相 " onClick="sikisou()">
</td><td width="20">
</td><td>
<select name="select0" size="15" onClick="focus2select0()">
<option value="#000000" style="background-color:#000000;color:#ffffff;">black
<option value="#191970" style="background-color:#191970;">midnightblue
<option value="#000080" style="background-color:#000080;">navy
<option value="#00008B" style="background-color:#00008B;">darkblue
<option value="#0000CD" style="background-color:#0000CD;">mediumblue
<option value="#0000FF" style="background-color:#0000FF;">blue
<option value="#00BFFF" style="background-color:#00BFFF;">deepskyblue
<option value="#1E90FF" style="background-color:#1E90FF;">dodgerblue
<option value="#4169E1" style="background-color:#4169E1;">royalblue
<option value="#4682B4" style="background-color:#4682B4;">steelblue
<option value="#483D8B" style="background-color:#483D8B;">darkslateblue
<option value="#4B0082" style="background-color:#4B0082;">indigo
<option value="#6A5ACD" style="background-color:#6A5ACD;">slateblue
<option value="#7B68EE" style="background-color:#7B68EE;">mediumslateblue
<option value="#6495ED" style="background-color:#6495ED;">cornflowerblue
<option value="#87CEEB" style="background-color:#87CEEB;">skyblue
<option value="#87CEFA" style="background-color:#87CEFA;">lightskyblue
<option value="#ADD8E6" style="background-color:#ADD8E6;">lightblue
<option value="#AFEEEE" style="background-color:#AFEEEE;">paleturquoise
<option value="#B0C4DE" style="background-color:#B0C4DE;">lightsteelblue
<option value="#B0E0E6" style="background-color:#B0E0E6;">powderblue
<option value="#E0FFFF" style="background-color:#E0FFFF;">lightcyan
<option value="#00FFFF" style="background-color:#00FFFF;">aqua
<option value="#00FFFF" style="background-color:#00FFFF;">cyan
<option value="#66CDAA" style="background-color:#66CDAA;">mediumaquamarine
<option value="#008080" style="background-color:#008080;">teal
<option value="#008B8B" style="background-color:#008B8B;">darkcyan
<option value="#20B2AA" style="background-color:#20B2AA;">lightseagreen
<option value="#5F9EA0" style="background-color:#5F9EA0;">cadetblue
<option value="#00CED1" style="background-color:#00CED1;">darkturquoise
<option value="#40E0D0" style="background-color:#40E0D0;">turquoise
<option value="#48D1CC" style="background-color:#48D1CC;">mediumturquoise
<option value="#7FFFD4" style="background-color:#7FFFD4;">aquamarine
<option value="#00FA9A" style="background-color:#00FA9A;">mediumspringgreen
<option value="#00FF7F" style="background-color:#00FF7F;">springgreen
<option value="#00FF00" style="background-color:#00FF00;">lime
<option value="#7CFC00" style="background-color:#7CFC00;">lawngreen
<option value="#7FFF00" style="background-color:#7FFF00;">chartreuse
<option value="#32CD32" style="background-color:#32CD32;">limegreen
<option value="#8FBC8F" style="background-color:#8FBC8F;">darkseagreen
<option value="#90EE90" style="background-color:#90EE90;">lightgreen
<option value="#98FB98" style="background-color:#98FB98;">palegreen
<option value="#9ACD32" style="background-color:#9ACD32;">yellowgreen
<option value="#ADFF2F" style="background-color:#ADFF2F;">greenyellow
<option value="#3CB371" style="background-color:#3CB371;">mediumseagreen
<option value="#006400" style="background-color:#006400;">darkgreen
<option value="#008000" style="background-color:#008000;">green
<option value="#228B22" style="background-color:#228B22;">forestgreen
<option value="#2E8B57" style="background-color:#2E8B57;">seagreen
<option value="#2F4F4F" style="background-color:#2F4F4F;">darkslategray
<option value="#556B2F" style="background-color:#556B2F;">darkolivegreen
<option value="#808000" style="background-color:#808000;">olive
<option value="#6B8E23" style="background-color:#6B8E23;">olivedrab
<option value="#708090" style="background-color:#708090;">slategray
<option value="#778899" style="background-color:#778899;">lightslategray
<option value="#696969" style="background-color:#696969;">dimgray
<option value="#808080" style="background-color:#808080;">gray
<option value="#A9A9A9" style="background-color:#A9A9A9;">darkgray
<option value="#C0C0C0" style="background-color:#C0C0C0;">silver
<option value="#D3D3D3" style="background-color:#D3D3D3;">lightgrey
<option value="#DCDCDC" style="background-color:#DCDCDC;">gainsboro
<option value="#800080" style="background-color:#800080;">purple
<option value="#8B008B" style="background-color:#8B008B;">darkmagenta
<option value="#C71585" style="background-color:#C71585;">mediumvioletred
<option value="#9370DB" style="background-color:#9370DB;">mediumpurple
<option value="#8A2BE2" style="background-color:#8A2BE2;">blueviolet
<option value="#9400D3" style="background-color:#9400D3;">darkviolet
<option value="#9932CC" style="background-color:#9932CC;">darkorchid
<option value="#BA55D3" style="background-color:#BA55D3;">mediumorchid
<option value="#DA70D6" style="background-color:#DA70D6;">orchid
<option value="#EE82EE" style="background-color:#EE82EE;">violet
<option value="#DDA0DD" style="background-color:#DDA0DD;">plum
<option value="#D8BFD8" style="background-color:#D8BFD8;">thistle
<option value="#E6E6FA" style="background-color:#E6E6FA;">lavender
<option value="#BC8F8F" style="background-color:#BC8F8F;">rosybrown
<option value="#8B4513" style="background-color:#8B4513;">saddlebrown
<option value="#A0522D" style="background-color:#A0522D;">sienna
<option value="#B8860B" style="background-color:#B8860B;">darkgoldenrod
<option value="#CD853F" style="background-color:#CD853F;">peru
<option value="#DAA520" style="background-color:#DAA520;">goldenrod
<option value="#CD5C5C" style="background-color:#CD5C5C;">indianred
<option value="#D2691E" style="background-color:#D2691E;">chocolate
<option value="#D2B48C" style="background-color:#D2B48C;">tan
<option value="#DEB887" style="background-color:#DEB887;">burlywood
<option value="#EEE8AA" style="background-color:#EEE8AA;">palegoldenrod
<option value="#F0E68C" style="background-color:#F0E68C;">khaki
<option value="#BDB76B" style="background-color:#BDB76B;">darkkhaki
<option value="#800000" style="background-color:#800000;">maroon
<option value="#8B0000" style="background-color:#8B0000;">darkred
<option value="#A52A2A" style="background-color:#A52A2A;">brown
<option value="#B22222" style="background-color:#B22222;">firebrick
<option value="#DC143C" style="background-color:#DC143C;">crimson
<option value="#FF0000" style="background-color:#FF0000;">red
<option value="#FF1493" style="background-color:#FF1493;">deeppink
<option value="#FF69B4" style="background-color:#FF69B4;">hotpink
<option value="#FFB6C1" style="background-color:#FFB6C1;">lightpink
<option value="#FFC0CB" style="background-color:#FFC0CB;">pink
<option value="#DB7093" style="background-color:#DB7093;">palevioletred
<option value="#FF00FF" style="background-color:#FF00FF;">fuchsia
<option value="#FF00FF" style="background-color:#FF00FF;">magenta
<option value="#F08080" style="background-color:#F08080;">lightcoral
<option value="#FA8072" style="background-color:#FA8072;">salmon
<option value="#E9967A" style="background-color:#E9967A;">darksalmon
<option value="#FFA07A" style="background-color:#FFA07A;">lightsalmon
<option value="#F4A460" style="background-color:#F4A460;">sandybrown
<option value="#FF4500" style="background-color:#FF4500;">orangered
<option value="#FF6347" style="background-color:#FF6347;">tomato
<option value="#FF7F50" style="background-color:#FF7F50;">coral
<option value="#FF8C00" style="background-color:#FF8C00;">darkorange
<option value="#FFA500" style="background-color:#FFA500;">orange
<option value="#FFD700" style="background-color:#FFD700;">gold
<option value="#FFFF00" style="background-color:#FFFF00;">yellow
<option value="#F5DEB3" style="background-color:#F5DEB3;">wheat
<option value="#FFDAB9" style="background-color:#FFDAB9;">peachpuff
<option value="#FFDEAD" style="background-color:#FFDEAD;">navajowhite
<option value="#FFE4B5" style="background-color:#FFE4B5;">moccasin
<option value="#FFE4C4" style="background-color:#FFE4C4;">bisque
<option value="#FFE4E1" style="background-color:#FFE4E1;">mistyrose
<option value="#FFEBCD" style="background-color:#FFEBCD;">blanchedalmond
<option value="#FFEFD5" style="background-color:#FFEFD5;">papayawhip
<option value="#F5F5DC" style="background-color:#F5F5DC;">beige
<option value="#FAEBD7" style="background-color:#FAEBD7;">antiquewhite
<option value="#FAF0E6" style="background-color:#FAF0E6;">linen
<option value="#FAFAD2" style="background-color:#FAFAD2;">lightgoldenrodyellow
<option value="#FDF5E6" style="background-color:#FDF5E6;">oldlace
<option value="#FFF0F5" style="background-color:#FFF0F5;">lavenderblush
<option value="#FFF5EE" style="background-color:#FFF5EE;">seashell
<option value="#FFF8DC" style="background-color:#FFF8DC;">cornsilk
<option value="#FFFACD" style="background-color:#FFFACD;">lemonchiffon
<option value="#FFFFE0" style="background-color:#FFFFE0;">lightyellow
<option value="#FFFAF0" style="background-color:#FFFAF0;">floralwhite
<option value="#FFFAFA" style="background-color:#FFFAFA;">snow
<option value="#FFFFF0" style="background-color:#FFFFF0;">ivory
<option value="#F0F8FF" style="background-color:#F0F8FF;">aliceblue
<option value="#F0FFF0" style="background-color:#F0FFF0;">honeydew
<option value="#F0FFFF" style="background-color:#F0FFFF;">azure
<option value="#F5F5F5" style="background-color:#F5F5F5;">whitesmoke
<option value="#F5FFFA" style="background-color:#F5FFFA;">mintcream
<option value="#F8F8FF" style="background-color:#F8F8FF;">ghostwhite
<option value="#FFFFFF" style="background-color:#FFFFFF;">white
</select>

</td></tr></table>
</form>

●設置方法
上記の１・JavaScriptをHTMLソース内<head>〜</head>に、
２・フォームを<body>〜</body>に貼り付けてください。

【目次に戻る】