[14-4] 色指定について（16進数, 色名, 10進数, HSL, accessibility）

今回は、ウェブサイトでの色指定についてまとめます。
「#ff0000」と書く方法の「ff」や「00」の意味を知っていると指定しやすいですよね。

色指定は CSS（Cascading Style Sheets）で行います。
「16進数」や「10進数」「カラーネーム」などいろいろな方法があり、透明度も指定できたりします。

本日のINDEX

1. ウェブの色指定の種類
2. 「RGB」とは「光の三原色（Red, Green, Blue）」
3. 16進数（16進法）について知っておこう！
4. 「ウェブセーフカラー」は216色の基本色
5. 10進数の指定は「透明度」も指定できます
6. CSS3から加わった「HSL」も「透明度」を指定できます
7. キーワード transparent と currentColor
8. 色指定でのアクセシビリティ（色覚マイノリティへの対処）

●2018年3月にキーワード transparent と currentColor が抜けていたので追加しました。
●2015年8月に記事を更新しました。（ HSL指定 が抜けていたので追加しました）
●ページ下部の「関連記事」インデックスから外れてしまうので、投稿日を2011年5月にしています。（実際の投稿日は 2013年02月）

ウェブの色指定の種類

下記の各指定方法の「例：」の値は、どれも同じくこの色 red です。
透明度の指定があるものは 透明度0.5 にしています。

16進数指定（例：#ff0000（3桁に省略することもできる #f00））

RGBの各値を2桁ずつ（合計6桁）、16進数で表す方法。
同じ数値が2度繰り返す場合は 3桁に省略する事もできます（#ff0000 を #f00 に）

色の名前（ウェブカラーネーム）による指定（例：red）

各ブラウザで定義されているカラーネームが、
olive TXT 、 bisque TXT 、 indianred TXT など 140色ほどがあります。
原色大辞典 ←こちらで見やすくまとめられています。

10進数指定（例：rgb(255,0,0) ）

RGBの値をそれぞれ「,（カンマ）」で区切って10進数で表す方法。
光の強さを 0〜255で表します。rgb(0,0,0)は黒、rgb(255,255,255)は白。

10進数指定 透明度も指定するもの（例：rgba(255,0,0,0.5) ）

RGBの値のあとに透明度を「0〜1」の数値で指定します。
透明が0、不透明が1。透明度 50％なら 0.5 と指定します。

HSLでの指定（例：hsl(0,100%,50%) ）

色相環での角度（0〜359度）で色を、そのあと彩度と輝度を％で「,（カンマ）」で区切って表します。

HSL指定 透明度も指定するもの（例：hsla(0,100%,50%,0.5) ）

HSL指定も、10進数指定と同様に、最後に「0〜1」の数値で透明度を指定できます。

％指定（例：rgb(100%,0%,0%) または　rgba(100%,0%,0%,0.5) ）

RGBの値をそれぞれ「,（カンマ）」で区切ってパーセントで表す方法。
256段階を、100段階で表します。透明度の rgba も指定できます。
background: rgb (100%,0%,0%) background: rgba (100%,0%,0%,0.5)

「RGB」とは「光の三原色（Red, Green, Blue）」

RGB（アールジービー）は光の三原色。Red、Green、Blue です。
ディスプレイでは このRGB で表示します。
RGB の 3色が全部混ざると白、3色とも無いと真っ暗なので黒になり「加法混合」と言われます。

私たちが普通に肉眼で見ている世界も「RGBの世界」。
可視光線を認知してるわけで、私達の目は「2眼レフ」のカメラと言えます。
だから、光が無いと真っ暗。光が過多だとまぶしくて真っ白。

印刷物のインクの三原色もあり、シアン（C）マゼンタ（M）イエロー（Y）のCMY（シーエムワイ）です。
絵の具を何色も混ぜていくと濁って黒っぽくなる原理はコレ。
CMY全部混ざると黒になるんです。 色を引いていくと白になるので「減法混合」と言われます。

カメラで撮った写真は RGB。ディスプレイで見てる時もまだRGB。
でも印刷すると CMY の世界になるわけ。
実際の印刷では、CMYだけで真っ黒にするのは難しい（Mだけ少し足りないと緑っぽい黒になったりする）ため、黒インクも使い、「CMYK」と呼ばれます。
「CMYK」の「K」は、「Key plate」または「Key tone」の略だそうです。
活版（凸版）印刷で、輪郭をハッキリさせようと用いた「版」が Key plate 。使ったインクを Key tone と言ったんだそうです。

16進数について知っておこう

コンピュータで使うのは、2進法、10進法、そして16進法。
（ちなみに「16進法の数値」を「16進数」と言います）
16進法は少ない桁数でたくさん表現できるので、ウェブの色指定に使われてます。

2進法については、
[14-3] コンピュータ上の単位について（ビット、バイト、メガ、ギガ）をご覧ください。

16進法は、0から9までの10個の数字と、AからFまでの6個のアルファベットの、合計16個の組み合わせで数えます。

こんなかんじです。
0、1、2、3、4、5、6、7、8、9、このあとまだ1桁目が続いて、A、B、C、D、E、Fまでが1桁。16個ある。
Fの次がやっと2桁目で10。
10から11、12…19までは普通。19の次が1A、1B、1C…と1Fまで続いて次が20。
同様に97、98、99ときたら100じゃなくて9A。9B、9C、と続き、9D、9E、9Fの次がA0。
2桁の最後のほうは、…F9、FA、FB、FC、FD、FE、FF。ここまでが2桁。
次がやっと100で3桁です。
というわけで、16進法だと 1つの桁が長い（多い）んです。

16進数の色指定

16進数の色指定では、RGBそれぞれを、16進数の2桁（00〜FF）で表しています。
2桁だと16×16=256個もありますよ。

#000000なら、Rも Bも Gも光が 00（無し）で真っ暗。黒です。
#FFFFFFは、RGBそれぞれマックス（FF）ですので白です。
#FF0000は、 Rがマックス（FF）、それ以外が無し（00）なので RED（赤）なのです。
（それぞれ、#000, #FFF, #F00と、3桁に省略できます。）

このように、1つの原色を2桁（16の2乗）=256色で表すので、
3原色の組み合わせでは、256の3乗（256×256×256）= 16,777,216色も表現できます！
人間が識別できる色数は、人により5万〜1千万色くらいと言われてるので、1677万色なら見分けられないくらい多いと思っていいですね。

「ウェブセーフカラー」は216色の基本色

大昔、コンピュータが 256色（8bit）しか扱えなかった時代に、各OS（MAC と WIN）は、自分が表示できない色を、適当に他の色に置き換えていました。

これをどうにかしようと、共通の「標準カラーパレット」を定めました。
256色から WIN と MAC 独自のシステムカラーの合計40色を引いたものが 216色だったんです。
これが「ウェブセーフカラー」です。
Rを6段階 × G6段階 × B6段階の組み合わせ = 216 が定められました。

ウェブセーフカラーは16進数のとき数値がシンプル。
R・G・B 各色が 00〜ff までのぞろ目なので 3桁表示にできるんです。

ウェブセーフカラー216色は、こちらで見やすくまとめられています。
216色でもけっこういろんな色味があります。
WEB216

ウェブセーフカラーの使いどころ

ウェブセーフカラーはかつて、他の色に置き換えられずに確実に表示される色 でした。
今のOSでは、他の色に置き換えることなんてないけど、今でも「ウェブセーフカラー」が使われているのは、古くからある基本色で、どの環境でも確実に表示されるから。

例えば、茶色の #8C5E00 なら、それに近いウェブセーフカラーがあるので（#960）そっちを使います。

「#8C5E00」の色 サンプル 　だったら
コレ「#960（ウェブセーフカラー）」の色 サンプル

見ている環境が違えば、色味も微妙に異なります。
（例えば、ガンマ調整しているディスプレイもあれば、デバイスやメーカーによっても、彩度や明度が違います）
なので、1つ1つの色をあまり吟味しても無意味。
大事なのは全体的なトーン（複数の色の組み合わせ）です。
似た色がウェブセーフカラーにあるなら、それを使うほうが、指定がシンプルで編集しやすくなります。

10進数の指定は「透明度」も指定できます

10進数での指定は、RGBの各色を「0〜255までの256通り」で表現 します。
256色ですので、色数は16進数とまったく同じなんです。

この10進法は、「透明度」も指定したい時に重宝します。
指定の方法は、例えば「rgba(255,0,0,0.5) 」というカタチで使います。
この「rgba」の最後の「a」は「アルファ値（alpha value）」の略で「透明度」を表します。

このアルファ値は、0 から1 までの数値で表現します。0 が透明、1 で不透明です。
0と1以外の値なら 0を省略して小数点から書いてもOK。（例えば、0.5なら「.5」）

CSS3から加わった「HSL」も「透明度」を指定できます

HSL（エイチエスエル）は、色相（Hue）、彩度（Saturation）、輝度（Luminance）で表現します。

H（色相）は、色相環での角度で色を表します。赤（=0）から始まって360度でグルッと赤まで戻ってきます。単位は無しで、0〜359の数値を書きます。

小数の値も使えますが、赤（red）を示す 0も 1も、見分けがつかないくらいの色味なので、0.5とか使っても意味無いかな。

S（彩度）は、0〜100％の値で表します。0はモノトーン。100％は彩度がマックスのビビットカラー。
0以外は単位「%」を付けます。

L（輝度）は、光の量。0〜100％の値で表します。0だと真っ暗なので黒、100%だと明るさマックスで白、50％が丁度いい量で純色。これも 0以外は単位「%」を付けます。

HSLは、RGBを16進数や10進数で指定するより、直感的に色指定できます。
色相環をぼんやり思い浮かべながら、色のトーンを選べます。

hsl (0,100%,50%)	hsl (90,100%,50%)	hsl (210,100%,50%)	hsl(270,100%,50%)
hsl (0,60%,80%)	hsl (90,100%,20%)	hsl (210,80%,80%)	hsl (270,100%,80%)

HSLも「hsla」と 最後に「a（アルファ値）」を付けることで、透明度も指定できます。

hsla (0,60%,80%,0.4)

hsla (90,100%,20%,0.1)

hsla (210,80%,80%,0.5)

hsla (270,100%,80%,0.2)

キーワード transparent と currentColor

CSS3 から新しく加わったキーワード「transparent」「currentColor」もあります。

transparent（トランスペアレント）は「透明色」を指定します。
currentColor（カレント カラー）は「文字色（colorプロパティの色）」を指定します。

transparent は、borderプロパティで小さい三角形を作ったり、グラデーションでチェック柄を作ったりするときに便利です。
それらの指定のしかたは、こちらをご覧ください。
小さい三角形：
【13-1】borderと borderのショートハンド
【22-2】要素を絶対位置に指定する position: absolute | 見出しのアクセントにも大活躍
チェック柄：
[18-5] 水玉、ボーダー、チェック柄を作ろう（background-size）

色指定でのアクセシビリティ（色覚マイノリティへの対処）

最後になってしまいましたが重要。色に関するアクセシビリティです。

＊Webサイト全般のアクセシビリティについては、
[12-2] なんでHTMLとCSSはセットなの？ に書いていますので、ご覧ください。

色覚マイノリティへの対処に詳しいサイトを見つけました。
Webクリエイターボックス「色覚障がい者に配慮したWebサイトの作り方」

「赤や緑に色分けするならパターンもつける工夫を」などの具体的な解説があり、参考になります。

このサイトでも紹介されている「Colorblind Web Page Filter」で、既存サイトがカラーブラインドの人にどう見えてるかチェックできます。
「Type a URL:」に、調べたいサイトの URLを書くと表示されます。

ちなみにこの「ほんっとに...」をチェックしてみたのがこちら。
左が通常の見え方、右が色覚マイノリティの見え方。色覚のタイプ別に表示できます。

ほかにも、画像をアップロードして見え方をチェックするサイトや、フリーソフトをインストールしてチェックできるものもあります。
●Coblis — Color Blindness Simulator
Daniel Flück氏のサイト。画像ファイルをアップロードして見え方をチェック。
●Chromatic Vision Simulator
浅田一憲氏のカラーシミュレーター。こちらも画像ファイルをアップロードして見え方をチェック。
●Visolve - 色覚補助ソフトウエア
（株）両備システムソリューションズのフリーソフト。WIN、MAC版、iPhoneアプリがあります。

そして、Photoshop で簡単にカラーブラインドのかたの見え方をチェックできます。
メニューバーの「表示」＞「校正設定」で「P型」「D型」の2種類から選べます。

カラーブラインドには「P型」「D型」が多数。
ほかに「T型」「A型」があるけれども少数派だそうです。
参考サイト：色覚の仕組み│NPO法人　北海道カラーユニバーサルデザイン機構

今回調べて思ったのは、赤と緑の使い方に気をつけようということ。

「 :hover（マウスオーバー）」で、赤から緑の変化は、あまり違って見えないですね。
グラフや地図・路線図などで、赤と緑を隣接させるなら、一方にパターンや罫線をいれて差別化する。
ウェブサイトだけでなく、デザイン全般に関わることですので、気をつけていきたいと思います。