合成された色 | ||||||||||||||||||||
dec hex |
||||||||||||||||||||
dec per% hex |
dec per% hex |
dec per% hex |
||||||||||||||||||
|
|
|
||||||||||||||||||
赤 0/255 | 緑 0/255 | 青 0/255 |
赤(R)、緑(G)、青(B)の強さを+-ボタンで増減します。はじめは全部0です。
それぞれ 0〜255 の範囲で変化します。51は255/5、17は255/15で255を等分する数です。
24ビットカラーの説明のために作りました。自分で操作して黄色、茶色、オレンジ、など作ってみるとわかると思います。
最初は画像処理ソフトウェアの使い方で、その後ウェブページ作成のところで使いました。
このページはhtmlとcssの部分でかなり作り込んでいますので解読は面倒かもしれません
その分プログラムが簡単になっています。innerHTMLを使えばbrタグを書けるのでもう少し楽ができますが、あえて避けました。
グローバルな変数をinit()内でvarなしで値を初期化しています。これはonloadで呼ばれます。
dxxはクリックした時の加減幅、rr,gg,bbはそれぞれR,G,Bの値、bxsumは合成色を表示するtd, bxredなどは赤などのtd、spnで始まるものはtd中に2または3行の記述をするときにspanタグを使って分けたのでその配列を格納します。bxrrrなどは最下行のrrr/255となる分子の位置になるspanです。
window.onload = function() { init(); boxCol('red',0); } function init() { d33 = 51; d11 = 17; d1 = 1; var colorinit = 0; rr = colorinit; gg = colorinit; bb = colorinit; bxsum=document.getElementById("bxsum"); bxred=document.getElementById("bxred"); bxgrn=document.getElementById("bxgrn"); bxblu=document.getElementById("bxblu"); spnsums=bxsum.getElementsByTagName("span"); spnreds=bxred.getElementsByTagName("span"); spngrns=bxgrn.getElementsByTagName("span"); spnblus=bxblu.getElementsByTagName("span"); bxrrr=document.getElementById("bxrrr"); bxggg=document.getElementById("bxggg"); bxbbb=document.getElementById("bxbbb"); }
dxは、51,17,1のうちのどれかです。+と-も加わって6種類になります。その数をrr,gg,bbのどれかに加えます。0〜255の範囲を超えるときは調節します。
function boxCol(col,dx) { if ( col == 'red' ){ rr += dx; if ( rr>255 ) rr=255; if ( 0>rr ) rr=0; }else if( col == 'grn' ){ gg += dx; if ( gg>255 ) gg=255; if ( 0>gg ) gg=0; }else if( col == 'blu' ){ bb += dx; if ( bb>255 ) bb=255; if ( 0>bb ) bb=0; } bxrrr.firstChild.nodeValue = rr; //最下行の分子の数値 bxggg.firstChild.nodeValue = gg; bxbbb.firstChild.nodeValue = bb; bxred.style.background = 'rgb('+rr+','+ 0 +','+ 0 +')'; //背景色 bxgrn.style.background = 'rgb('+ 0 +','+gg+','+ 0 +')'; bxblu.style.background = 'rgb('+ 0 +','+ 0 +','+bb+')'; bxsum.style.background = 'rgb('+rr+','+gg+','+bb+')'; bxred.style.color = "#fff"; //文字色。 bxgrn.style.color = (gg>204)?"#000":"#fff"; //背景色によっては白/黒を使い分ける bxblu.style.color = "#fff"; bxsum.style.color = (rr+gg*2+bb>408)?"#000":"#fff"; spnreds[0].firstChild.nodeValue = rr; //赤の強度(10進) spnreds[1].firstChild.nodeValue = (rr*100/255).toFixed(1); //赤の強度を%で spnreds[2].firstChild.nodeValue = "( "+toHex(rr)+" )"; //赤の強度(16進) spngrns[0].firstChild.nodeValue = gg; spngrns[1].firstChild.nodeValue = (gg*100/255).toFixed(1); spngrns[2].firstChild.nodeValue = "( "+toHex(gg)+" )"; spnblus[0].firstChild.nodeValue = bb; spnblus[1].firstChild.nodeValue = (bb*100/255).toFixed(1); spnblus[2].firstChild.nodeValue = "( "+toHex(bb)+" )"; spnsums[0].firstChild.nodeValue = rr+","+gg+","+bb; //RGBをコンマ区切りで(10進) spnsums[1].firstChild.nodeValue = "( #"+toHex(rr)+toHex(gg)+toHex(bb)+ " )"; //(16進) } //16進2桁にする関数 function toHex(num) { var s = ('0'+num.toString(16)).slice(-2) ; return s; }
innerHTMLを使うとspn...の部分をこのように書けますが、余りおすすめしません。
bxred.innerHTML = rr + "<br>" + (rr*100/255).toFixed(1) + "%<br>( "+toHex(rr)+" )";
<table id="boxcolor"> <tr> <td colspan="3" class="topsum">合成された色</td> </tr> <tr> <td colspan="3" id="bxsum" class="dspCol3"> <span>dec</span><br> <span>hex</span></td> </tr> <tr> <td id="bxred" class="dspCol"> <span>dec</span><br> <span>per</span>%<br> <span>hex</span></td> <td id="bxgrn" class="dspCol"> <span>dec</span><br> <span>per</span>%<br> <span>hex</span></td> <td id="bxblu" class="dspCol"> <span>dec</span><br> <span>per</span>%<br> <span>hex</span></td> </tr> <tr> <td class="red"> <table class="inner"> <tr> <td class="updn" onclick="boxCol('red',d33)">+51</td> <td class="updn" onclick="boxCol('red',d11)">+17</td> <td class="updn" onclick="boxCol('red',d1)">+1</td> </tr> <tr> <td class="updn" onclick="boxCol('red',-d33)">-51</td> <td class="updn" onclick="boxCol('red',-d11)">-17</td> <td class="updn" onclick="boxCol('red',-d1)">-1</td> </tr> </table> </td> <td class="grn"> <table class="inner"> <tr> <td class="updn" onclick="boxCol('grn',d33)">+51</td> <td class="updn" onclick="boxCol('grn',d11)">+17</td> <td class="updn" onclick="boxCol('grn',d1)">+1</td> </tr> <tr> <td class="updn" onclick="boxCol('grn',-d33)">-51</td> <td class="updn" onclick="boxCol('grn',-d11)">-17</td> <td class="updn" onclick="boxCol('grn',-d1)">-1</td> </tr> </table> </td> <td class="blu"> <table class="inner"> <tr> <td class="updn" onclick="boxCol('blu',d33)">+51</td> <td class="updn" onclick="boxCol('blu',d11)">+17</td> <td class="updn" onclick="boxCol('blu',d1)">+1</td> </tr> <tr> <td class="updn" onclick="boxCol('blu',-d33)">-51</td> <td class="updn" onclick="boxCol('blu',-d11)">-17</td> <td class="updn" onclick="boxCol('blu',-d1)">-1</td> </tr> </table> </td> </tr> <tr> <td class="btmred">赤 <span id="bxrrr">0</span>/255</td> <td class="btmgrn">緑 <span id="bxggg">0</span>/255</td> <td class="btmblu">青 <span id="bxbbb">0</span>/255</td> </tr> </table>
table{ margin:1% 0; } td { border:solid 1px #999; text-align:center; font-family:monospace; } td.topsum{ border:solid 1px #000000; background-color:#f0f0f0; color:#000000; } td.dspCol{ width:30%; padding:1em 0; } td.dspCol3{ padding:2.5em 0; } td span{font-size:120%;} td.red{ border:solid 1px #ff0000; background-color: #ff9999; } td.grn{ border:solid 1px #009900; background-color: #80ff80; } td.blu{ border:solid 1px #0000ff; background-color: #9999ff; } td[onclick] { cursor:pointer; margin: 0; padding: 1px 6px; border-style: solid; border-top-color: #f0f0f0; border-left-color: #f0f0f0; border-bottom-color: #666600; border-right-color: #666600; border-width: 1px; color: #000000; } td[onclick]:hover { background: #ffff99; color: #ff0000; } td[onclick]:active { border-style: inset; background: #0000ff; color: #ffffcc; } table.inner{ border-collapse:separate; border-spacing: 2px; border:none; background-color: transparent; } td.updn { font-size:90%; vertical-align:middle; } table.inner{ margin:0; padding:0; width:100%; } td.btmred{ border:solid 1px #ff0000; background-color:#ff0000; color:#ffffff; } td.btmgrn{ border:solid 1px #009900; background-color:#00ff00; color:#000000; } td.btmblu{ border:solid 1px #0000ff; background-color:#0000ff; color:#ffffff; }