WEBCRE8.jp > 考える > [色]デザイナーっぽくカラーコードの16進数を覚えたくないですか？

[色]デザイナーっぽくカラーコードの16進数を覚えたくないですか？

この記事は約5分ぐらいで読めます

カラーコードについて
色について
16進数のカラーコードの特徴
例題

カラーコード

#000000は黒、#ffffffは白。
webデザインではHTMLやCSSにおける色の指定の仕方としてこのような16進数による表記を主に用いています。
色指定には他にも

16進数指定（三ケタ） #f00
10進数指定 rgb(255, 0, 0)
%指定 rgb(100%, 0%, 0%）
色名指定 red

全て赤の場合

といった指定の仕方があります。Photoshopに慣れ親しんだ方はもっと色指定の仕方に覚えがあると思いますが、今回はコーディングにおける色指定の観点で説明しますね。

デザイナーでさえカラーコードを見て即座に色を想像できなかったり（私が未熟なだけなのかもしれませんが＞＜）、ましてや色を見てカラーコードをぴたりと当てるなんて芸当はさすがに難しいです。環境によって微妙に色が違って見えたり、隣接色や面積によってどうしても人間の知覚する色の見え方は変わってきますしね(色の錯視 – Wikipediaを参照してみてください)。

ただ、大雑把にでもこの16進数が表す色の特徴を知っていれば結構便利なんじゃないかなと思います。今回はこれに関して書いてみますね。

色について

一応色に関してちゃんと知っておきたいと言う人は以下のページが参考になるかと思います。

色彩心理学に学ぶ Webサイトの色選び / ウェブデザインライブラリー
カラフルでもまとまりのある配色、WebデザインにするためのTips – Webデザインレシピ
色 – Wikipedia

こういったページを見ておけばまあ大体色についての認識は深まると思います。

16進数のカラーコードの特徴

カラーコードを知ってる人にとっては言葉にすると当然の事ですが、わからない人は覚えておくとカラーコードの認識に役立つ事をまとめます。以下のような事を知っておくと不意にカラーコードが必要になった時、わかりやすくなるのではないでしょうか。

3色のうち一色だけが大きいと光の三原色（赤・緑・青）のどれかに近くなる
3色のうち一色だけが少ないと色の三原色（シアン・マゼンタ・イエロー）のどれかに近くなる
全体的に数字が小さいほど黒に近づき、大きいほど白に近づく
各3色のうち最大の数値と最小の数値の差が小さいほど色がくすみ、大きいほど鮮やかになる

光の三原色（RGB）を作る

色の三原色（CMY）を作る

色の明度と彩度を作る

つまり例えば…
今選んだ色が#2235b8(暗い青)だったとして、これより色身は同じで、少し明るくしたい…そういう時は16進数の22(赤の数値)、35(緑の数値)、ｂ8(青の数値)に同じだけの数値を足しましょう。3346c9、4457da、と少しずつ明るい色になっていきます。そんなに繊細に色を選ぶつもりがなければ別に下一桁を無視しても構いません。

作りたい色がある場合は色相環で隣り合った2つの色を見つけ、それ同士の中間の色になるように数値を調整します。作りたい色が純粋な橙色だった場合、色相環を見ると黄色と赤の間に位置する事が確認できます。黄色は#ffff00、赤は#ff0000なので、Gの値のffと00の中間を取ればいいことになります。つまりカラーコードは#ff8800となります。

更にこれの明るい色が肌色(例えば#ffcc99)、暗い色が茶色(#663300)と言うふうに前述の方法で明度を変えて違う色を作ることも出来ます。茶色とオレンジが同じ軸にあることはピンと来ない人もいると思います。