便利　WEBセーフカラー216色チャート

カラーコードのそれぞれの色をクリックすると、その選択した色が背景色とカラーコードの文字色に、同時に変わります。
そして左側の白い窓に、色名（カラー・コード）が表示されます。
カラーコードは３桁表示が可能（background-colorとbackgroundでの指定時。bgcolorタグで色を指定する時は6桁）です。
たとえば「#f00」は「#ff0000」、「#00f」は「#0000ff」、「#123」は「#112233」と同じです。
16進数の4096色カラーチャートはこちらから。

◆全ソース◆
ソースの中でマウスの右クリックで『すべて選択』した後に、
再度右クリックして『コピー』

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>便利　WEBセーフカラー216色チャート</title>

<!--★ここからコピー-->
<style type="text/css">
<!--
body{background-color:#ddc;color:#000;}/*★全体の背景色は薄茶、文字色は黒*/

#iro{margin:30px auto 0px}/*★カラーチャート表の位置指定*/

#bgR{
position:fixed;/*★右側のボタン説明の位置固定*/
bottom:130px;
right:10px;
padding:10px;
}

#bgL{
position:fixed;/*★左側の説明の位置固定*/
bottom:20px;
left:10px;
width:15%;
padding:10px;
}

/*★以下は全部、「上へ下へ」の設定*/
.top,.end{
position:fixed;
right:20px;
font-size: 130%;
line-height:0.5;
color:#f00;
background-color:#666;
padding:10px;
border:solid 2px #ff0;
}
.top{bottom:40px;}
.end{bottom:0px;}
.top a, .end a{
display:block;
text-decoration: none;
color:#f00;
}
.top a:hover,.end a:hover {color:#f00;}
-->
</style>
<!--★ここまでコピー。bodyにもコピーがあります-->

</head>

<body>
<!--★ここから全部コピー。　位置は<body>の中です-->
<!--★下の１行は「上へ」の目的位置指定。セットになります-->
<span id="tp"> </span>

<br><br>

<p style="color:#000;"id="ch">カラーコードのそれぞれの色をクリックすると、その<span style="color:#f00;">選択した色が背景色とカラーコードの文字色に、同時に変わります。</span><br>
そして左側の白い窓に、色名（カラー・コード）が表示されます。<br>
カラーコードは３桁表示が可能<span style="color:#f00;">（background-colorとbackgroundでの指定時。bgcolorタグで色を指定する時は6桁）</span>です。<br>
たとえば「#f00」は「#ff0000」、「#00f」は「#0000ff」、「#123」は「#112233」と同じです。<br>
16進数の4096色カラーチャートは<a href="b_1iro.html">こちら</a>から。</p>
<br>

<div id="bgR">
<input type="button" style="color:#fff;background:#666;" value="灰背景で黒文字" onClick="c(this);body.style.color='#000';ch.style.color='#000';"><br>
<input type="button" style="color:#fff;background:#000;" value="黒背景で白文字" onClick="c(this);body.style.color='#fff';ch.style.color='#fff';"><br>
<input type="button" style="color:#000;background:#fff;" value="白背景で白文字" onClick="c(this);body.style.color='#fff';ch.style.color='#fff';"><br>
<input type="button" style="color:#000;background:#fff;" value="白背景で黒文字" onClick="c(this);body.style.color='#000';ch.style.color='#000';"><br>
<input type="button" value="元に戻る" onClick="location.reload()"><br>
</div>

<div id="bgL">
<p id="nameC" style="text-align:center;width:100px;height:1em;border:2px solid #888; padding:5px;background:#fff;color:#000;">色名</p>
<p><span style="color:#000;">変更した背景色を<br>元に戻したり、</span><br>
<span style="color:#666;">カラーコード名を</span><br>
<span style="color:#f00;">見やすくしたい時は、</span><br>
<span style="color:#00f;">右側のボタンを</span><br>
<span style="color:#ff0;">クリックして下さい。</span><br>
<span style="color:#fff;">色が変わります。</span><br>
<span style="color:#0f0;">文字色の見え方もチェック。</span></p>
</div>


<!--★下の２行は「上へ下へ」の指定で詳細はCSSで設定。目的位置とセットです-->
<a href="#tp" ><p class="top" title="上へ">▲</p></a>
<a href="#ed" ><p class="end" title="下へ">▼</p></a>

<script type="text/javascript">
<!--
/*==============================================================================
カラーチャートBy Color chart script by Dion (http://members.xoom.com/yoboseyo)Script featured on JavaScript Kit (http://javascriptkit.com)
---------------------
背景色の変更　参考サイト: http://javascript.eweb-design.com/index.html
    　　　　　参考サイト: http://freett.com/nihonkyokujituto/download/javasc/js_top.htm
★カラーコードを３桁表示に変更。色数を512色からセーフカラー216色へ減。クリックで背景色変更に改造。
色名を別枠に表示できるよう改造。2014/12/17
================================================================================*/
clr=new Array('0','3','6','9','c','f');
for (i=0;i<6;i++) { 

document.write("<table border='1' cellpadding='4' width='60%' id='iro'>"); 
for (j=0;j<6;j++) {
document.write("<tr>");
for (k=0;k<6;k++) {
document.write('<td align="center" style="background-color:#'+clr[i]+clr[j]+clr[k]+';cursor: pointer;padding:10px auto;" onClick="c(this)">');
document.write('<span style="font-family:monospace; font-size:90%;"> #');
document.write(clr[i]+clr[j]+clr[k]+' </span></td>'); }
document.write("</tr>"); }
document.write("</table>");}

function c(d){
document.body.style.backgroundColor=d.style.backgroundColor;
document.body.style.color=d.style.backgroundColor;
document.getElementById("nameC").innerText=d.innerText;
document.getElementById("nameC").textContent=d.textContent;     //Firefox 対策
}
// -->
</script>

<!--★下の１行は「下へ」の目的位置指定。セットになります-->
<span id="ed"> </span>
<!--★ここまでコピー-->

<br><br><br>
</body>
</html>

WEBセーフカラー216色チャート UP日時 : 2014/12/17

　WEBセーフカラー216色チャート　　　　UP日時 : 2014/12/17