Web Safe Color Cube

ウェブセーフカラーで色立体を作ってみた。

「純色」でも赤と黄色では、明るさが違う。 その明るさを高さとして表現するようなことができないかなぁ、と考えたのだ。

もちろん、こうした試みはマンセル表色系の色立体などとして、いろいろ考案されている。 だから、新しい見方を提唱するといった大それたコトをしようと思ったわけではなく、確認してみたかっただけである。

自分で手を動かして考えてみないと、なかなか理解できないからね。

色光の三原色

色光の三原色_赤_緑_青

赤・緑・青は「光の三原色」である。 この三色を混ぜ合わせることによって、あらゆる色を(この世のすべての色ではないが)表現できる。

赤と緑を等分に混ぜれば黄(イエロー)に、緑と青を等分に混ぜれば水色(シアン)に、青と赤を当分に混ぜれば赤紫色(マゼンタ)になる。 赤と緑と青を等分に混ぜれば、白になる。

PCや携帯電話のディスプレイもテレビも、一つのピクセル(画素)は赤・緑・青の小さなブロックからできている。 ルーペなどで拡大すると、その三色のブロックの明るさの組み合わせで、あらゆる色が表現されていることがわかる。

赤・緑・青のそれぞれの光の強さを、0から255までの256段階で表す。 16進法では、00からffまで、となる。 これを、赤、緑、青の順につなげて、色を表すと次のようになる(RGBカラーの16進表現)。

赤 ff0000

緑 00ff00

青 0000ff

ちなみに、すべてゼロ(000000)なら黒となる。

色光の三原色から基本8色を作る

赤・緑・青をそれぞれの最大値(ff)で混ぜた色も、16進RGBで表してみよう。

イエロー ffff00

シアン 00ffff

マゼンタ ff00ff

白 ffffff

これらを三原色とともに配置すると、次のようになる。

赤_イエロー_緑_シアン_青_マゼンタ

この8色は、RGBそれぞれの最大・最小の明度の掛け合わせでできた色である。 ちなみに、ごく初期のTVゲームやPCでは、この基本8色しか表現できなかった。

RGB色相環

赤からイエロー*1、イエローから緑というように変化する途中の段階を加えて環のようにつなげてみる。

赤_イエロー_緑_シアン_青_マゼンタの色相環

00からffまでを6段階(00, 33, 66, 99, cc, ff)にしてあるが、これはどのPC、どのブラウザでも正しく表現できる Web safe color(ウェブセーフカラー)に対応している*2

そこで、先の基本8色を立方体の頂点と考える。 ただの円ではなく、立方体の頂点であるところがミソである。

白、つまりRGBすべてが全開で最も明るいffffffが手前の中心となる。 黒、つまりRGBすべてがゼロで最も暗い000000が中心の奥にある。

手前ほど明るいことを表すので、赤や緑よりもイエローやシアンのほうが明るいことになる。

白が上、黒が下にくるように少し回転させて見ると、次のようになる。

赤_イエロー_緑_シアン_青_マゼンタの色相環を側面から

さらに、中間の色をすべて表して立方体にしてみると、その様子がよくわかる。

RGB色立体

白(ffffff)を手前側の頂点とする立方体

白を手前側の頂点とする立方体

上の図のように、手前ほど明るい。この立方体を向こう側へ少し回してみると、次の図のようになる。

白と黒が同時に見えるようにした立方体

さらに向こうへ回し、最初の状態から180度回転させたものが次の図だ。

黒(000000)を手前側の頂点とする立方体

黒を手前側の頂点とする立方体

今度は手前が黒となり、暗いほうの半分が見える。 しかし、見えるのは表面だけで、中が見えない。

そこで、中を順に見えるようにしてみた。

アニメーションにしてみた

赤・緑・青をそれぞれ00からffまで変化させてみる

赤と緑を固定しておいて青だけを変化させた場合、赤と青を固定しておいて緑だけを変化させた場合、緑と青を固定しておいて赤だけを変化させた場合を連続的なアニメーションにしてみた。

その下には、手動で一段階ずつ変化させるページへのリンクを置いてある。

赤・緑・青をそれぞれ0から255まで変化させてみる

手動で変化させる

明度を変化させてみる

今度は黒(000000)から白(ffffff)まで、次第に明るくなるように(そして次第に暗くなるように)変化させたアニメーションである。

明度を変化させてみる

手動で変化させる

こうして見ると、赤・緑・青の成分をそれぞれ同じ数値で配合しても、同じ明度にならないようだ。

赤-緑-青の層

例えば、上の図の上方、赤(ff0000)から右下の緑(00ff00)に至る小さな立方体の色は、次のようになっている。

ff0000→cc3300→996600→669900→33cc00→00ff00

ワシが見た感じでは、緑が最も明るく、次に赤、その次は33cc00かなぁ……。

こうした見え方の違いは、装置(デバイス)の特性と、ヒトの個々人の視細胞の感度によるようだ。

……同じようにデジタルに表現された色も、個人によって見え方が違うのだ。

すでにリンク先を見た方はお気付きのとおり、上の「手動で変化させる」ページでは、人口の95%以上を占めるC型(一般型)のほか、少数派の色覚型*3であるP型、D型での見え方のシミュレーション画像も載せてある。

ここにも一つ載せておこう。 次の図の左がP型、右がD型のシミュレーション画像である。

赤-緑-青の層:P型 赤-緑-青の層:D型

P型の人から「なぜC型の人は『あおみどり』というのだろう? 青と緑はハッキリ分かれるのに。それより『あかみどり』という色があることを主張したい」という話を聞いたことがある。

明度の近い色はさまざまな色覚型で混同しやすいから、色遣いを考えることを仕事にしている人は、ご注意くださいね。


*1 なぜ黄色と書かずにイエローと書いているのか、というと、色材の三原色と関係があるのだが、ここでは深入りしない。
*2 ウェブセーフカラーは全部で216色。じつはどのブラウザでもすべて正しく表現できるというわけではない。また、PCの性能やブラウザの表現力が上がったため、ウェブセーフカラーにこだわる必要は、現在ではほとんどないらしい。
*3 色覚タイプについては『カラーユニバーサルデザイン』を参照のこと。

FrontPage   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2012-02-15 (水) 23:20:34 (2686d)