文字と背景の配色をRGBで

文字と背景の組み合わせを試す

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

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

制作意図

「RGBによる色の表し方」に文字色の変更も加えたものです。

ウェブページの色指定に実際に使うことを想定して、カラーコードを目立たせてあります。

プログラムなど

1. javascript-初期化部分
2. javascript-背景色ボタンの処理
3. javascript-文字色ボタンの処理
4. html
5. css

背景色関係はbx...文字色関係はch...またはc..となっています。全部idにより場所を特定して色とテキストを入れているだけなので、プログラム自体は簡単になっています。

⇣javascript-初期化部分▲

window.onload = function() {
     init();
     boxCol('red',0);
     chrCol('red',0);
}
function init() {
  d33 = 51;
  d11 = 17;
  d1  = 1;
  var colorinit = 255;
  rr = colorinit;
  gg = colorinit;
  bb = colorinit;
  var chainit = 0;
  crr = chainit;
  cgg = chainit;
  cbb = chainit;
  bxsum=document.getElementById("bxsum");
  bxred=document.getElementById("bxred");
  bxgrn=document.getElementById("bxgrn");
  bxblu=document.getElementById("bxblu");
  bxhex=document.getElementById("bxhex");
  chred=document.getElementById("chred");
  chgrn=document.getElementById("chgrn");
  chblu=document.getElementById("chblu");
  chhex=document.getElementById("chhex");
}

⇣⇡javascript-背景色ボタンの処理▲

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;
    }
    bxred.style.background = 'rgb('+rr+','+  0 +','+  0 +')';
    bxgrn.style.background = 'rgb('+  0 +','+gg+','+  0 +')';
    bxblu.style.background = 'rgb('+  0 +','+  0 +','+bb+')';
    bxred.firstChild.nodeValue = rr;
    bxgrn.firstChild.nodeValue = gg;
    bxblu.firstChild.nodeValue = bb;
    bxred.style.color = "#fff";
    bxgrn.style.color = (gg>204)?"#000":"#fff";
    bxblu.style.color = "#fff";
    bxhex.firstChild.nodeValue = "#"+toHex(rr)+toHex(gg)+toHex(bb);
    bxsum.style.background = 'rgb('+rr+','+gg+','+bb+')';
}
function toHex(num) {
    var s = ('0'+num.toString(16)).slice(-2) ;
    return s;
}

⇣⇡javascript-文字色ボタンの処理▲

function chrCol(col,dx) {
    if ( col == 'red' ){
       crr += dx;
       if ( crr>255 ) crr=255;
       if ( 0>crr   ) crr=0;
    }else if( col == 'grn' ){
       cgg += dx;
       if ( cgg>255 ) cgg=255;
       if ( 0>cgg   ) cgg=0;
    }else if( col == 'blu' ){
       cbb += dx;
       if ( cbb>255 ) cbb=255;
       if ( 0>cbb   ) cbb=0;
    }
    chred.style.background = 'rgb('+crr+','+  0 +','+  0 +')';
    chgrn.style.background = 'rgb('+  0 +','+cgg+','+  0 +')';
    chblu.style.background = 'rgb('+  0 +','+  0 +','+cbb+')';
    chred.firstChild.nodeValue = crr;
    chgrn.firstChild.nodeValue = cgg;
    chblu.firstChild.nodeValue = cbb;
    chred.style.color = "#fff";
    chgrn.style.color = (cgg>204)?"#000":"#fff";
    chblu.style.color = "#fff";
    chhex.firstChild.nodeValue = "#"+toHex(crr)+toHex(cgg)+toHex(cbb);
    bxsum.style.color = 'rgb('+crr+','+cgg+','+cbb+')';
}

⇣⇡html▲

<table id="boxcolor">
<tr>
<td colspan="3" class="topsum">文字色</td>
</tr>
<tr>
<td class="red">
<table class="inner">
<tr>
<td class="updn" onclick="chrCol('red',d33)">+51</td>
<td class="updn" onclick="chrCol('red',d11)">+17</td>
<td class="updn" onclick="chrCol('red',d1)">+1</td>
</tr>
<tr>
<td class="updn" onclick="chrCol('red',-d33)">-51</td>
<td class="updn" onclick="chrCol('red',-d11)">-17</td>
<td class="updn" onclick="chrCol('red',-d1)">-1</td>
</tr>
</table>
</td>
<td class="grn">
<table class="inner">
<tr>
<td class="updn" onclick="chrCol('grn',d33)">+51</td>
<td class="updn" onclick="chrCol('grn',d11)">+17</td>
<td class="updn" onclick="chrCol('grn',d1)">+1</td>
</tr>
<tr>
<td class="updn" onclick="chrCol('grn',-d33)">-51</td>
<td class="updn" onclick="chrCol('grn',-d11)">-17</td>
<td class="updn" onclick="chrCol('grn',-d1)">-1</td>
</tr>
</table>
</td>
<td class="blu">
<table class="inner">
<tr>
<td class="updn" onclick="chrCol('blu',d33)">+51</td>
<td class="updn" onclick="chrCol('blu',d11)">+17</td>
<td class="updn" onclick="chrCol('blu',d1)">+1</td>
</tr>
<tr>
<td class="updn" onclick="chrCol('blu',-d33)">-51</td>
<td class="updn" onclick="chrCol('blu',-d11)">-17</td>
<td class="updn" onclick="chrCol('blu',-d1)">-1</td>
</tr>
</table>
</td>
</tr>
<tr>
<td id="chred" class="dspCol">dec</td>
<td id="chgrn" class="dspCol">dec</td>
<td id="chblu" class="dspCol">dec</td>
</tr>
<tr>
<td colspan="3" class="topsum" id="chhex">rgb</td>
</tr>
<tr>
<td colspan="3" id="bxsum" class="dspCol3">
  <p><b>文字色と背景色</b></p>
  <p>文字の色は背景色によっても<br>印象が異なります。<br>
  色の違いだけでなく明暗差も必要です。</p>
  </td>
</tr>
<tr>
<td colspan="3" class="topsum" id="bxhex">rgb</td>
</tr>
<tr>
<td id="bxred" class="dspCol">dec</td>
<td id="bxgrn" class="dspCol">dec</td>
<td id="bxblu" class="dspCol">dec</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 colspan="3" class="topsum">背景色</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:2% 0;
}
td.dspCol3{
  padding:2em 1em;
}
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;
}
td p {
  text-align:left;
}
td b{
  font-weight:bold;
  font-size:140%;
}