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色分のカラーコード表を作成できました。

• 

  プログラムを実行したところ

プログラムのポイントは、プログラム冒頭(※1)にある変数「混ぜ具合」です。配列として6つの値を定義しており、これによって色の混ぜ具合を指定しているのです。ここで作成する色コードは、(※2)で、赤要素、緑要素、青要素のそれぞれに繰り返して、組み合わせたものとなっています。

なお、(※3)では、暗い色を表示するときに、文字の色を白色に反転する処理も加えてみました。ここで「明度計算」という関数を利用していますが、これはプログラムの後半で定義しています。明度計算では、RGBの各要素の最小の値と最大の値を求め、それを足して割っています。これによって、色の明度が調べられます。

まとめ

このように、プログラムを作ることで、手軽にカラーコード表を作成できます。1677万色の全ての色を表示すると、色を選ぶのが大変になってしまいます。そこで、いくつか代表的な値を取り出してRGBの各要素で繰り返し組み合わせることで、見やすい色見本を作成できました。

ちなみに、今回は6種類の値を総当たりで組み合わせていますが、もっとこだわって、特定の値を基にしたり、一定の規則に沿って色を並べてみると、綺麗な色見本を作ることもできます。色見本表はアイデアや用途に応じて、いろいろ作成できるので、工夫して作ってみてください。

自由型プログラマー。くじらはんどにて、プログラミングの楽しさを伝える活動をしている。代表作に、日本語プログラミング言語「なでしこ」 、テキスト音楽「サクラ」など。2001年オンラインソフト大賞入賞、2004年度未踏ユース スーパークリエータ認定、2010年 OSS貢献者章受賞。技術書も多く執筆している。直近では、「シゴトがはかどる Python自動処理の教科書(マイナビ出版)」「すぐに使える!業務で実践できる! PythonによるAI・機械学習・深層学習アプリのつくり方 TensorFlow2対応(ソシム)」「マンガでざっくり学ぶPython(マイナビ出版)」など。