RGBによる色の表し方

赤緑青の強さを調節して色を作ります

赤(R)、緑(G)、青(B)の強さを+-ボタンで増減します。はじめは全部0です。

それぞれ 0〜255 の範囲で変化します。51は255/5、17は255/15で255を等分する数です。

制作意図

24ビットカラーの説明のために作りました。自分で操作して黄色、茶色、オレンジ、など作ってみるとわかると思います。

最初は画像処理ソフトウェアの使い方で、その後ウェブページ作成のところで使いました。

プログラムなど

このページはhtmlとcssの部分でかなり作り込んでいますので解読は面倒かもしれません

その分プログラムが簡単になっています。innerHTMLを使えばbrタグを書けるのでもう少し楽ができますが、あえて避けました。

javascript-初期化部分

グローバルな変数を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)+" )";

html部分

<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>

css部分

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;
}