• ITに強い編集プロダクション・リブロワークスのWebサイト

    編集の仕事には、「原稿をチェックし、修正が必要であれば修正内容を校正紙に書き込む」という作業があります。先日そんな作業をしている最中に「黄緑色を選択する」と指示を入れようと思ったのですが、ふとこんな違和感を持ちました。「これって黄緑だろうか? いや、緑だろうか?」

    どんな色だったのか

    一体どんな色だったかというと、下の画像のような色です。

    もちろん感じ方には個人差があると思いますが、私には黄緑っぽいという感じを受けます。

    さきほどの作業では、選択肢として緑系統の部分がそこにしかなかったので、結局自分の感覚に近い「黄緑」という単語で指示を書き込みました。しかし、似たような色が他にもあった場合、言葉だけで指し示すにはちょっと曖昧で、場合によっては誤解を生む可能性もあるのではないかと思います。そこで、色の違いをもう少し客観的に比べてみることにしてみました。

    カラーネーム

    コンピューターで色を表現する方法はいくつかありますが、簡単な方法としてはカラーネームを利用する方法が挙げられます。例えば、Webブラウザで使用できるカラーネームは140個(拡張した147個の場合もあります)あります。以下に、例として9色を適当にピックアップしてみました。

    whitelightskybluedarkorange
    crimsinchocolateindigo
    seagreenlightyellowblack

    この他に131色あるわけですが、そのなかから先程の黄緑っぽい色を探してみたところ、yellowgreenが近そうでした。

    左がyellowgreen、右が先程の黄緑っぽい色です。似たような名前のgreenyellowは

    こんな色です。黄色っぽさが強いですね。また、greenは

    こんな色で、かなり落ち着いた色合いです。

    カラーコード

    色を作り出す方法として、光の三原色を用いる方法があります。光の三原色とは赤(R)、緑(G)、青(B)のことで、それぞれ同じ量だけ混ぜ合わせると白になります。白以外の色を作りたい時は、混ぜ合わせる三原色のそれぞれの強さを調整すると、いろいろな色を作ることができます。

    この記事では、それぞれの色の強さを(R、G、B)=(x、y、z)と書くことにします。ただし、x、y、zはそれぞれ0から255までの整数です。この表現を使うと、例えばさきほどのgreenという色は(R、 G、 B)=(0、128、 0)となります。Gの値を最大にした(R、 G、 B)=(0、255、 0)は

    こんな色合いになります。カラーネームではlimeと呼ばれる色で、greenに比べるとかなり明るい印象です。

    この光の三原色で色を表現するのがカラーコードです。カラーコードではRGBの値を表すx、y、zをそれぞれ16進数で表し、先頭に#をつけて順番に並べます。Webやイラストなどの制作などに携わる方には馴染み深いかもしれません。
    例えばyellowgreenをRGBの値で表すと、(R、 G、 B)=(154、205、50)となります。154、205、50をそれぞれ16進数で表すと9A、CD、32となります。よって、カラーコードは#9ACD32となります。

    ちなみに、冒頭で私が緑というべきか黄緑というべきか悩んだ色のカラーコードを調べてみたところ、#78C30Dでした。RGBの値で表すと(R、 G、 B)=(120、195、13)です。

    色空間

    ところで、色を数値で表現できるとなると、それぞれの色がお互いにどれぐらい近いのか計算したくなりませんか? なりますよね。そこで次のように計算してみました。

    さきほど三原色を(R、G、B)=(x、y、z)と表すと書きましたが、x、y、zの3つの軸でできる座標空間で、x、y、zの値をそれぞれR、G、Bの値であると読み替えれば、RGBの値で構成される空間が出来上がります。これをRGB色空間といいます。
    このRGB色空間に、上で見てきた緑系の色をプロットして見てみましょう。下のグラフは、マウスで(スマホなら指で)動かして好きな視点に変えたり拡大・縮小したりできます。いろいろな方向から眺めてみてください。

    グラフで見ると一目瞭然で、黄緑っぽい色に一番近いのがyellowgreenであることがわかりますが、一応ちゃんと計算してみましょう。それぞれの色の黄緑っぽい色からの距離は以下のようになりました。

    yellowgreengreenyellowlimegreen
    51.2386.98134.8138.1

    今回判断に迷った黄緑っぽい色は、カラーネームのついた色の中ではyellowgreenが最も近いということが数値としてもわかりました。このように、どの色が近いのか迷った時は、自分の感覚だけでなく、数値に頼ってみるというのもいいかもしれませんね。

    ちなみに、色空間にはRGB色空間以外にもいろいろなものがあります。どんな色空間を使うかによっても色同士の距離は変わってきますが、この記事では長くなり過ぎてしまうので割愛します。

    200色の白?

    色のことをいろいろ考えていた時に、最近ネットで話題になったアンミカさんの「白って200色あんねん」というセリフを思い出しました。手に持っているタオルを褒めてと頼まれて咄嗟に出てきた一言です。「白と一言で言っても、黄色っぽい白や青っぽい白もある。黄色っぽい白のタオルは手に取ると手も汚く見える気がするが、青みがかった白のこのタオルは手にも乱反射して綺麗に見えて素晴らしい」という趣旨のお話だったと思います。

    微妙な違いがたくさんあることの例えとしての200色という数字なのだと思いますが、実際のところどれぐらいの違いを持つものなのか、RGB色空間にプロットして見てみたいと思います。
    まずは単純に(R、G、B)=(255、255、255)から一辺の長さが6(3乗して200に最も近くなる整数)の立方体の格子点(座標値が整数の点)に点を打ってみます。

    とても微妙な違いではありますが、真っ白(R、G、B)=(255、255、255)から最も遠い(R、G、B)=(250、250、250)の点は、真っ白に比べると結構暗い感じがします。真っ白からの距離は約10です。これまでに見てきたことを踏まえると、距離という観点でプロットした方が良さそうです。

    (R、G、B)=(255、255、255)を中心とする球を考えて、内側に含まれる点が200個に近くなる半径を調べてみたところ、内側に含まれる格子点の個数が半径6.48で199個、半径6.49で205個となることがわかりました。そこで、半径6.48の球の内側に含まれる点をプロットしたのが次のグラフです。

    暗い感じの白が少なくなり、より「白って200色あんねん」な感じになったような気がします。

    おわりに

    色の違いをRGBの色空間を使って比べてみました。色同士の違いを数値で表現する一つの方法として便利な一方、実はRGB色空間では人間の感覚とはちょっと違う結果になる場合もあります。気になった方は、ぜひ「色空間」で調べてみてください。

    本記事に掲載したグラフは、PythonのPlotlyというライブラリを使用しています。使用したコードはGitHubに共有しています。