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

ウェブサイトの色指定は CSS(Cascading Style Sheets)で行います。
色指定には「16進数」や「10進数」「カラーネーム」など、いろいろな方法があります。
「#ff0000」というカタチで書く16進数での指定法の ff や 00 が何か知っていると、指定しやすいですよね。それには RGB(光の三原色)の知識が大事です。
また、CSS3 から HSL という指定法もできるようになって、便利になりました。

というわけで今回は「ウェブの色指定」についてまとめます。

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

この記事は2013年02月作成、2015年8月に更新しました。( HSL指定 が抜けていたので追加しました)
(*ページ下部の「関連記事」インデックスから外れてしまうので、投稿日を2011年5月にしています。ご了承ください。)

ウェブの色指定の種類

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

16進数指定(例:#ff0000(3桁に省略することもできる #f00))
RGBの各値を2桁ずつ(合計6桁)、16進数で表す方法。
上の例のようにRGB各色の数値が繰り返す場合は、#f00 と3桁に省略する事も出来る。
RGBについては下で説明しています。16進数についても下記参照。
色の名前(ウェブカラーネーム)による指定(例:red
各ブラウザで定義されているカラーネームが約140色ほどあります。
olive TXT 、 bisque TXT 、 indianred TXT など、名前も色も楽しいものがたくさん♪
「原色大辞典」さんが、カラーネームを見やすくまとめてくださっています。
10進数指定(例:rgb(255,0,0)
RGBの値をそれぞれ「,(カンマ)」で区切って10進数で表す方法。
光の強さをマックス255で表します。rgb(0,0,0)は黒、rgb(255,255,255)は白。
10進数指定については下で説明しています。
10進数指定 透明度も指定するもの(例:rgba(255,0,0,0.5)
RGBの値のあとに「0〜1」の数値で透明度を指定します。
透明が0、不透明が1。50%の透明度にしたければ 0.5 と指定します。
0.5は「.5」と 0 を省略して書いてもOK。
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 もイケます。
これってあまり使わないかな...。でも、使えますw。
background: rgb (100%,0%,0%) background: rgba (100%,0%,0%,0.5)

「RGB」とは「光の三原色(Red, Green, Blue)」のこと

RGB(アールジービー)は光の三原色のことです。テレビやPCのディスプレイでは、この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 と言ったんだそうです。
(コメントくださった方、ありがとうございました!修正しました。2013.03.05)

16進数(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個ある。OK?
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桁〜!
というわけで、1つの桁が長いというか多いんです。

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

#000000なら、Rは光が00(無し)、Bも00、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色しか扱えなかった時代には、各OS(まあハッキリ言うと WIN と MAC)は、自分が表示できない色は、適当に他の色に置き換えていました。
これをどうにかしようと、共通の「標準カラーパレット」として216色(Rを6段階 × G6段階 × B6段階の組み合わせ = 216)が定めらた。これが「ウェブセーフカラー」です。
256色から WIN と MAC 独自のシステムカラー40色を引いた216色だったんですね。(誕生秘話w)

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

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

ウェブセーフカラー216色の16進数表示は「原色大辞典」さんの WEB216で見やすくまとめられています。
216色でもけっこういろんな色味があります。

私はわりと積極的にこのウェブセーフカラーを使ってます。
例えば、茶色の #8C5E00 なら、それに近いウェブセーフカラーがあればそっちにしとく。

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

ウェブでは、見ている環境が違えば、色味も微妙に異なります。(例えば、ガンマ調整しているディスプレイ、してないディスプレイ、デバイスやメーカーによっても、彩度や明度が全然違います。)
なので、1つ1つの色をあまり吟味しても無意味。(大事なのは全体的なトーンです)
というわけで、似た色がウェブセーフカラーにあるならそれを使うのがベスト だと思う。
指定がシンプルで自分が編集しやすいし、どの環境でも確実にその色が表示されるから。

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

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

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

rgba(255,0,0,0.5) は、「255,0,0(red)」の最後の「0.5」でアルファ値(透明度)を指定しています。0.5は透明度50%です。
このアルファ値は、0 から1 までの数値で表現します。0 が透明、1 で不透明です。
0と1以外の値なら 0を省略して小数点から書いてもOK。(例えば、0.5なら「.5」)

この「ほんっとに」でも、「[13-3] サイトの背景にCSS3でグラデーションをつけてみよう」の、透明度も変更するグラデーションの指定で使ってます。
rgbaは便利です。背景・ボーダー・テキストなどに、ピンポイントで透明度を指定できるので。

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進数で指定するより、直感的に色指定できます。
色相環をぼんやり思い浮かべながら(思い浮かばない場合は壁に貼っとくw)色のトーンを選べます。
(#ff0000 などという書き方から覚えた身にとっては、なんてわかりやすいんだろうと思います♪)

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クリエイターボックス「色覚障がい者に配慮したWebサイトの作り方」

カラーブラインドの方にサイトを見てもらうための注意点が書かれています。「赤や緑に色分けするならパターンもつける工夫を」などの具体的な解説があり、参考になりました。

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

ちなみにこの「ほんっとにはじめてのHTML5」をチェックしてみたのがこちら。(クリックで拡大します)

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

そして、みなさんもうご存知かと思いますが、Photoshop (Adobe) で簡単にカラーブラインドのかたの見え方をチェックできます。(CS4から)
メニューバーの「表示」>「校正設定」で「P型」「D型」の2種類から選べます。
Photoshopの校正設定で「P型」の表示を見る

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

今回いろいろ調べて思ったのは、赤と緑の使い方に気をつけようということ。
:hover(マウスオーバー)で、赤から緑(または逆)の変化は最悪(違って見えない)ですね。
(なぜリンクテキストの色に青が多いのか、やっとわかりました。)
グラフや地図・路線図などで、赤と緑が隣接しているのもNG。
隣接させるなら、一方にパターンや罫線をいれて差別化する。
ウェブサイトだけでなく、デザイン全般に関わることですので、気を配っていきたいと思います。

*Webのアクセシビリティについてはコチラをご覧ください。
「[12-2] なんでHTMLとCSSはセットなの?」

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

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

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

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

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

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

スポンサーリンク

コメントの投稿

Re: No title

おっ、ほんとだ。
Key tone とか、そういえば聞いた事あるような。
さっそく修正します。ありがとうございました!
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
07 | 2017/08 | 09
- - 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.