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

最終更新日:2017年09月27日  (初回投稿日:2011年05月21日)

今回は、ウェブサイトでの色指定についてまとめます。
「#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. 色指定でのアクセシビリティ(色覚マイノリティへの対処)

●2017年9月に記事を更新しました。(本文を読みやすく編集しました)
●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)

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

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

*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種類から選べます。
Photoshopの校正設定で「P型」の表示を見る

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

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

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

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

Re: No title

おっ、ほんとだ。
Key tone とか、そういえば聞いた事あるような。
さっそく修正します。ありがとうございました!
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.