ゼロからはじめてみる日本語プログラミング「なでしこ」(91) HTMLのカラーコード表を作ってみよう

コンピューターの画面はフルカラーで約1677万色を表現できます。その色コードを「#RRGGBB」のように表現します。これは、HTMLのカラーコード表現ですが、さまざまな場面で使われています。そこで、今回はなでしこを使ってカラーコード表を作成してみましょう。

RGBを組み合わせてカラーコード表を作ってみよう

約1677万色ってどういうこと？

私たちが目にしている多くのディスプレイはフルカラーです。光の三原色であるRGB(赤・緑・青)のそれぞれ256階調、つまり、256の3乗である16,777,216色を表現できます。

パソコンもスマートフォンも、身の回りにある多くのLEDディスプレイで同じ色数を表示できます。冷静に考えてみると、とても多くの色を描き分けています。実際にLEDディスプレイの1ピクセルは、どうなっているのでしょうか。

ディスプレイは、とても小さな画素（ピクセル）の集合体で構成されています。そして、1つの画素は、赤・緑・青の3つのサブピクセルで構成されています。そして、この3つの色が、それぞれ光の明るさを調整することで、1677万色を表現しているのです。

ディスプレイは赤・緑・青の3原色の明るさを調整することで約1677万色を表示している

HTMLの色表現ってどうやるの？

そして、それは私たちがブラウザを通して目にしているWebサイトでも同様で、16,777,216色のすべてを自由に指定することが可能となっています。Webデザイナーは、膨大な色の中から慎重に色を選んで配置しているのです。

HTMLでは、色をHTMLカラーコードと呼ばれる形式で表現します。それは「#RRGGBB」形式と呼ばれることもあるのですが、赤(RR)、緑(GG)、青(BB)のそれぞれを、256階調で表現する方法です。その際、0から255までを16進数で表現します。16進数で256階調を表現すると、00からFFまでです。

例えば、赤色を表すHTMLカラーコードは「#FF0000」、緑色は「#00FF00」、青色は「#0000FF」です。黒色は「#000000」で白色は「#FFFFFF」です。赤・緑・青の各成分の組み合わせによって、多用な色を表現できるのです。

なお、16進数が分からないと、よく分からないかもしれません。本連載の第20回( https://news.mynavi.jp/techplus/article/nadeshiko-20/ )で、16進数について詳しく解説しているので、確認してみてください。

なでしこで作るカラーコード表 - 簡易版

それでは、簡単に、なでしこでカラーコード表を作ってみましょう。以下のプログラムを「なでしこ簡易エディタ( https://nadesi.com/v3/start )」で実行してみましょう。

HTML=「」
# 光の三原色を作成
Rを0から1まで繰り返す：
　Gを0から1まで繰り返す：
　　　Bを0から1まで繰り返す：
　　　　赤=HEX(R×255)を2でゼロ埋め
　　　　緑=HEX(G×255)を2でゼロ埋め
　　　　青=HEX(B×255)を2でゼロ埋め
　　　　コード=「#{赤}{緑}{青}」を大文字変換
　　　　HTML=HTML&「[<span style="color:{コード}">■</span>] 」
　　　　HTML=HTML&「{コード}<br>」
HTMLのラベル作成。

すると、次のように8色のカラーコードが表示されます。この8色は、光の三原色(RGB)で表現する代表的な8色です。RGBのそれぞれについて0と255(最大)の値を組み合わせたものです。

上記のプログラムを実行してカラーコードを表示したところ

プログラムで利用している関数を確認してみましょう。関数「HEX(数値)」を使うと、数値を16進数に変換できます。そして「(値)を2でゼロ埋め」と書くと、桁数が1桁だった場合に「00」とか「0F」のように桁を0で埋めて揃えてくれます。

もっと色数の多いカラーコード表を作ろう

続いて、もっと色数のカラーコード表を作ってみましょう。今度は、色を6段階に分けて組み合わせてみます。同じように、以下のプログラムを、なでしこ簡易エディタに貼り付けて実行してみましょう。

# 色の混ぜ具合を指定 --- (※1)
混ぜ具合=["FF", "CC", "99", "66", "33", "00"]
H=「<table>」
# 光の三原色を作成 --- (※2)
Rで混ぜ具合を反復：
　Gで混ぜ具合を反復：
　　　H=H&「<tr>」
　　　Bで混ぜ具合を反復：
　　　　C=「#{R}{G}{B}」を大文字変換
　　　　文字色=「#000000」
　　　　L=明度計算(R,G,B) # --- (※3)
　　　　もし、L<0.5ならば：
　　　　　　文字色=「#FFFFFF」。
　　　　H=H&「<td style="background-color:{C}; color:{文字色}">」
　　　　H=H&「{C}</td>」
　　　H=H&「</tr>」&改行
H=H&「</table>」
HH=Hのラベル作成。
HH$文字サイズ=13px

●(RR,GG,BBで)明度計算とは：
　　# 数値に戻す
　　R=INT(「0x{RR}」) ÷ 255
　　G=INT(「0x{GG}」) ÷ 255
　　B=INT(「0x{BB}」) ÷ 255
　　# 明度計算
　　CMAX=MAX(R,G,B)
　　CMIN=MIN(R,G,B)
　　L=(CMAX+CMIN)÷2
　　Lを戻す

すると、次のように表示されます。30行程度のプログラムですが、216色分のカラーコード表を作成できました。