色の表示の仕組み
HTMLで使用される色は光の三原色であるRGB（レッド・グリーン・ブルー）の強度で表します。それぞれの強度を256分割して16進数で表現します。
例）
#FF0000
#はHTMLで16進数であることを表します。上から2桁ごとに赤値・緑値・青値となりますので、赤値がFF（255）で緑値が00（0）、青値が00（0）となります。したがって赤しか強度を持たないので赤色となるわけです。
<html> <body> <font color="#FF0000">これはサンプルです。</font> </body> </html>
表示例：
となります。
というわけで、JavaScriptを使用すれば、全ての色を表示することが可能（かもしれない）ということで、全色表示に挑みます。ただ、作る前に考えておくべき事がありまして、3色256個ずつの組み合わせですの、$256^3=16777216$通りの組み合わせがあります。16,777,216（一千六百七十七 万 七千二百十六）です。これだけの量を出力したところで、需要がないってことに注意しながら作成していきます。
- color-sample.html
<html> <head> <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script> </head> <body> <table id="table1"> <tr> </table> <script> let trn = 0; for (let i = 0x000000; i <= 0x00FFFF; i++) { if(i % 100 == 0 ){ trn++; $("#table1").append(`</tr><tr id="tr${trn}">`); } let s = (('000000' + i.toString(16).toUpperCase()).substr(-6)); let v = 0xFFFFFF - i; let vs = (('000000' + v.toString(16).toUpperCase()).substr(-6)); $(`#tr${trn}`).append(`<td style="background-color: #${s};"><p style="color:#${vs} ">#${s}</p>`) } </script> </body> </html>
これをダウンロードして開くとこんな感じになると思います。
スクリプトでは、1行（横）100マスのテーブルを用意し、セルの背景色を#000000から順に1ずつずらしながらセットしていきます。こうすることで、表示可能な色を余すことなく映し出すことができるのですが・・・。やはり16,777,216通りの色を一度に出力しようとするとパソコンが居眠りします。なので、上記のプログラムでは#000000～#00FFFFの間の色を表示しています。
16行目
for (let i = 0x000000; i <= 0x00FFFF; i++) {
では、for文の繰り返しを行いますが、0xから始まる値は16進数で表現されていることを表します。16進数表現であっても整数は整数ですので、整数として扱います。iの値が0x00FFFF（緑と青の値が最大）になるまで繰り返します。
23行目
let vs = (('000000' + v.toString(16).toUpperCase()).substr(-6));
では、文字色を作成しています。黒の背景色に黒色の文字色だと、文字がつぶれてしまうので、0xFFFFFFから背景色を引いた値を文字色として使用することにします。こうすることで、文字が背景色につぶれることなく表示することができます。
全色はさすがに意味が無い
全色表示すっぞと意気込んでみたものの、こんなもん需要もない。1つ値が違ったところで人間の目には区別がつきません。というわけで、16区切りで色を表示することにします。
$256/16=16$で$16^3=4096$なので、これなら赤色まで網羅できそうです。
まぁ、そんなことなら簡単じゃんと、
for (let i = 0x000000; i <= 0x00FFFF; i++) {
を
for (let i = 0x000000; i <= 0x00FFFF; i=i+16) {
としたところで、ひどい目に合います。これだと、$256^3/16=1,048,576$になるだけですから。本来やりたいことは、青も16区切り、緑も16区切り、赤も16区切りです。
i=i+16
としたところで、下二桁（つまり青）が16ずつ増えるだけで、上の四桁は256通り表示されることになります。まぁやってみればわかりますが、i+16としたところで、出力されるHTMLは以下の通りになります。
<tr id="tr1"> <td style="background-color: #000000;"><p style="color:#FFFFFF ">#000000</p></td> <td style="background-color: #000010;"><p style="color:#FFFFEF ">#000010</p></td> <td style="background-color: #000020;"><p style="color:#FFFFDF ">#000020</p></td> <td style="background-color: #000030;"><p style="color:#FFFFCF ">#000030</p></td> <td style="background-color: #000040;"><p style="color:#FFFFBF ">#000040</p></td> <td style="background-color: #000050;"><p style="color:#FFFFAF ">#000050</p></td> <td style="background-color: #000060;"><p style="color:#FFFF9F ">#000060</p></td> <td style="background-color: #000070;"><p style="color:#FFFF8F ">#000070</p></td> <td style="background-color: #000080;"><p style="color:#FFFF7F ">#000080</p></td> <td style="background-color: #000090;"><p style="color:#FFFF6F ">#000090</p></td> <td style="background-color: #0000A0;"><p style="color:#FFFF5F ">#0000A0</p></td> <td style="background-color: #0000B0;"><p style="color:#FFFF4F ">#0000B0</p></td> <td style="background-color: #0000C0;"><p style="color:#FFFF3F ">#0000C0</p></td> <td style="background-color: #0000D0;"><p style="color:#FFFF2F ">#0000D0</p></td> <td style="background-color: #0000E0;"><p style="color:#FFFF1F ">#0000E0</p></td> <td style="background-color: #0000F0;"><p style="color:#FFFF0F ">#0000F0</p></td> <td style="background-color: #000100;"><p style="color:#FFFEFF ">#000100</p></td> <td style="background-color: #000110;"><p style="color:#FFFEEF ">#000110</p></td> <td style="background-color: #000120;"><p style="color:#FFFEDF ">#000120</p></td> <td style="background-color: #000130;"><p style="color:#FFFECF ">#000130</p></td> <td style="background-color: #000140;"><p style="color:#FFFEBF ">#000140</p></td> <td style="background-color: #000150;"><p style="color:#FFFEAF ">#000150</p></td> <td style="background-color: #000160;"><p style="color:#FFFE9F ">#000160</p></td> <td style="background-color: #000170;"><p style="color:#FFFE8F ">#000170</p></td> <td style="background-color: #000180;"><p style="color:#FFFE7F ">#000180</p></td> </tr>
3行目の
<td style="background-color: #000010;"><p style="color:#FFFFEF ">#000010</p></td>
ではちゃんと、青色が16ずつ増えていることがわかります。
ただし、18行目に注目して下さい。
<td style="background-color: #000100;"><p style="color:#FFFEFF ">#000100</p></td>
本当はここの背景色は「#000100」ではなく、「#001000」になるべきなんですね。16進数のシフトビット1)ですので、16倍しないといけません。$256/16=16$ですので、17回目にiの値を16倍、33回目にiの値を16倍、49回目にiの値を16倍しないといけません。という、コードを追加します。これは、iの値を16で割ったときの余りが1の時に16倍すればよいということです。
と思ったんですが、面倒です。青・緑・赤のそれぞれで、for文を作って入れ子にすれば良いだけです。3色の組み合わせを全て表示する場合、繰り替え処理の入れ子で実現できるのでした。
<html> <head> <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script> </head> <body> <table id="table1"> <tr> </table> <script> let trn = 0; let rowCounter = 0; //青のループ for (bi = 0x00; bi <= 0xFF; bi=bi+15){ //緑のループ for(gi = 0x00; gi <= 0xFF; gi=gi+15){ //赤のループ for(ri = 0x00; ri <= 0xFF; ri=ri+15){ if(rowCounter % 100 == 0){ trn ++; $("#table1").append(`</tr><tr id="tr${trn}">`); } rowCounter++; //背景色を作成 let bgColor = ri*(16**4)+gi*(16**2)+bi; //文字色を作成 let ftColot = 0xFFFFFF - bgColor; //背景色を文字列にする let bgColorStr = (('000000' + bgColor.toString(16).toUpperCase()).substr(-6)); //文字色を文字列にする let ftColorStr = (('000000' + ftColot.toString(16).toUpperCase()).substr(-6)); $(`#tr${trn}`).append(`<td style="background-color: #${bgColorStr};"><p style="color:#${ftColorStr} ">#${bgColorStr}</p>`) } } } </script> </body> </html>
FFは10進数では255ですので、カウンターを15ずつ増やすことで、白色（#FFFFFF）まで表示することができるようになります。
実行結果はこうなります。
