カラーコードで色を自由自在に変えてみよう！【初心者向け】

カラーコードで色を自由自在に変えてみよう！【初心者向け】

 
今回のテーマは「カラーコード」。

 
カラーコードとは、例えば「#FF0000」などの「#」+「6桁の数字（文字）」のこと。

ウェブ上で「色」を表すことができます。

 
例えば「#FF0000」と指定すると「赤色」になります。

 

 
カラーコードを使いこなせるようになると「1,000万種類以上の色」を自由自在に表現できるようになります。

 
でも、暗号みたいでどのコードがどの色かいまいちわからないんですよね・・・。

 
「カラーコード表」などで調べればいいのですが、面倒ですし、色がズラ～と並んでいるとどの色にしたらいいのか逆に迷ってしまいます。なかなか自分の望む色に辿り着けません。

 
カラーコードを使いこなせるようになれば、そんな悩みから解放されます。

 
ただ、そのためには「カラーコードの知識」だけでなく「色の知識」も必要となります。

そこで、この記事では

• カラーコードの仕組み
• 色の基礎

について紹介しています。（ウェブデザイン初心者向けの内容となります。）

 

カラーコードの仕組み

カラーコードの仕組み自体はとてもシンプルです。

基本的なルールは次の３つ。それぞれ説明していきます。

ルール１

#〇〇〇〇〇〇

左２桁は「赤色」の要素。
中２桁は「緑色」の要素。
右２桁は「青色」の要素。

 
いわゆるＲＧＢです。
（Red,Green,Blueの頭文字）

 
 
例えば、左２桁を変えると・・・

 　#FF0000

 
中２桁を変えると・・・
 　#00FF00

 
右２桁を変えると・・・
 　#0000FF

ルールその２

数字（文字）の増え方は「00」から始まり「FF」で終わる。

 
次のような感じです。途中でややこしい増え方をするので注意。（１６進数と同じ増え方です。）

 
00
01
02
03
・
・
09
0A ← ９の次はＡ
0B
0C
0D
0E
0F
10 ← Ｆの次は０に戻り、
11  左の桁が１つ増える
12
13
・
・
FD
FE
FF

 

ルールその３

「00」に近いほど暗くなり、「FF」に近いほど明るくなる。

 
 　#000000
 　#330000
 　#660000
 　#990000
 　#CC0000
 　#FF0000

 
 　#000000
 　#333333
 　#999999
 　#AAAAAA
 　#CCCCCC
 　#FFFFFF

 
#000000が一番暗い色。つまり、黒色。
#FFFFFFが一番明るい色。つまり、白色。

ルールはこれだけ。でも・・・

カラーコードのルールはこれだけです。

でも、これだけではカラーコードを自由自在に操ることはできません。

「色の知識」も必要になります。

 
例えば、「黄色」を作りたければ「赤色」と「緑色」を混ぜる必要があります。

 　#FF0000
+
 　#00FF00
↓
 　#FFFF00

 
「赤色と緑色を混ぜたら黄色・・・？」

 
そう感じた人もいるかもしれません。

 
「絵の具の色」を混ぜるのと、「画面上の色」を混ぜるのでは出来上がる色が変わります。

例えば、「絵の具の赤色」と「絵の具の緑色」を混ぜると「茶色っぽい色」になります。「黄色」にはなりません。

※ この違いについては次の記事で簡単に説明しています。
→ 混ぜたら何色？少しだけ役に立つクイズ【６】

基本の３色を混ぜてみよう！

カラーコードの基本となる色は「赤」と「緑」と「青」。

この「赤」と「緑」と「青」を混ぜてみます。

 
「赤」と「緑」を混ぜると「黄色」になります。

 　#FF0000
+
 　#00FF00
↓
 　#FFFF00

 
「赤」と「青」を混ぜると「赤紫色」になります。

 　#FF0000
+
 　#0000FF
↓
 　#FF00FF

 
「緑」と「青」を混ぜると「水色」になります。

 　#00FF00
+
 　#0000FF
↓
 　#00FFFF

 
「赤」と「緑」と「青」を混ぜると「白色」になります。

 　#FF0000
+
 　#00FF00
+
 　#0000FF
↓
 　#FFFFFF

 
「赤」も「緑」も「青」も何も混ぜなければ「黒色」になります。

 　#000000

ここまでを一旦まとめると・・・

ここまでを一旦まとめます。

覚えるべきは次の８色のカラーコード。

 
 　#FF0000

 　#00FF00

 　#0000FF

 　#FFFF00

 　#FF00FF

 　#00FFFF

 　#FFFFFF

 　#000000

 
この８色を覚えておけば、ある程度色を選べるようになります。

 
例えば、オレンジ色を作る場合。

「オレンジ色は赤色と黄色の中間くらいかな？」

そんなふうに考えれるようになります。

 　#FF0000

 　#FFFF00

↓

 　#FF9900

「明度」と「彩度」

色を考えるうえで避けられない２つの要素があります。

それは「明度」と「彩度」です。（「色相」もありますが、今回は省略。）

明度とは

明度は、その字の通り「明るさ」です。

赤にも「明るい赤」もあれば、「暗い赤」もあります。

 　#000000
 　#330000
 　#660000
 　#990000
 　#CC0000
 　#FF0000

「00」の方が暗く、「FF」の方が明るくなります。

彩度とは

彩度は、色の鮮やかさのこと。

赤にも「濃い赤」もあれば、「薄い赤」もあります。

 　#FF0000
 　#FF3333
 　#FF6666
 　#FF9999
 　#FFCCCC
 　#FFFFFF

 
ただ、この彩度の調整は少々厄介です。

調整方法について説明する前に「無彩色」について簡単に説明します。

無彩色とは

無彩色とは「赤」でもなく「緑」でもなく「青」でもない。

そんな色です。

例えば、次のような色。

 
 　#000000
 　#333333
 　#666666
 　#999999
 　#CCCCCC
 　#FFFFFF

 
つまり、黒色、灰色、白色の３色です。

「赤」と「緑」と「青」を同じ量だけ混ぜると無彩色が出来上がります。

おススメは「無彩色」を基準に考えること

「彩度」を調整する際に、おススメなのが「無彩色」を基準に考えること。（というより、無彩色からの差が彩度になります。）

 
例えば、「明るくて薄い赤」を作るのであれば、基準とする無彩色を少し明るめにして、そこに赤を加える。

 　#999999

 　#FF9999

他にも、「暗くて薄い赤」を作るのであれば、基準とする無彩色を暗めにして、そこに赤を加える。

 　#000000

 　#660000

こんな感じです。

 
※ 下の赤は「濃い色」に見えるかもしれませんが、赤自体は薄くなっています。赤の彩度は低くなっています。

「明度」や「彩度」がなぜ重要なのか？

ここまで「明度」や「彩度」について簡単に説明してきました。

この「明度」や「彩度」。実は、かなり重要です。

 
例えば、「この文字」。

これは黄色（#FFFF00）なんですが、白背景だと「明度差」が少ないため読みにくくなってしまいます。

 
背景を黒にすると、

 
こんな感じでかなり読みやすくなります。

 
彩度に関しても、高彩度の色は、視線を惹く一方で強い色になり過ぎてしまう可能性があります。低彩度にすることで逆に見やすくなることも。

この文字　← #FF0000
この文字　← #CC3333

 
また、デザインする場合は「明度」と「彩度」をある程度揃えた方が良いと言われています。

いわゆる「トーン」を揃えるというやつです。

色は奥が深い

今回紹介したのはあくまで一例。

web上で表現できる色は１千万色以上あります。（ブラウザやOSの性能にもよりますが・・・。）

 
２色使うのであればその組み合わせは１億パターン以上。

 
そう考えると、色は奥が深いですね。

 
色の知識を深める一番の近道は、自分で色をあれこれいじってみること。

 
自分だけの配色作りをしてみてはいかがでしょうか？

たいへんな作業ですが、面白いこと間違いなしです。

カラーコード以外で色を表す方法

最後にカラーコード以外で色を表す方法を紹介したいと思います。

rgb

まずは「rgb」。

Red,Green,Blueの頭文字です。

 
rgb(255,0,0)

こんなふうに書きます。

ちなみにこれで「赤」を表します。

 

 
実はこれ、カラーコードと考え方は全く同じです。

カラーコードは１６進数表記
rgbは１０進数表記

になっているだけです。

16進数？？？

とはいっても「１６進数？？？」となる人も多いかと思います。

 
「２４進数」だったらどうでしょうか？

これは毎日使ってますよね。

「時間」です。

 
１日は

０時→１時→２時→３時→・・・

→２１時→２２時→２３時

 
と進んでいき、「２４時」になった瞬間に次の日になります。

 
つまり、２４になった時点で次に進む。だから「２４進数」なんていいます。

 
カラーコードに話を戻します。

カラーコードが「１６進数」ということは、１６になったら次に進むということ。

ただ、カラーコードの場合は、９の次を１０にしてしまうと３桁になってしまいます。（例えば、09→010）

 
そうなると最大９桁のカラーコードになってしまうので使い勝手が悪くなってしまいます。

 
そのため、９の次は、アルファベットを使って、A→B→C→D→E→Fと進んでいきます。

 
数字が０～９の１０個
アルファベットがA～Eの６個

計１６個です。

１０進数と１６進数を並べてみると・・・

１０進数と１６進数を並べてみます。

左側が１０進数、右側が１６進数です。

つまり、左側がrgb、右側がカラーコード。

 
0 :00
1 :01
2 :02
3 :03
・
・
09 :09
10 :0A
11 :0B
12 :0C
13 :0D
14 :0E
15 :0F
16 :10
17 :11
18 :12
19 :13
・
・
253:FD
254:FE
255:FF

 
例えば、「#FF0F10」であれば、rgb(255,15,16)になります。

ちょっと頭がこんがらがりますね・・・。

 
rgb表記の良い所は、「赤」「緑」「青」の強弱が一目でわかるところ。

 
rgb(255,15,16)であれば、「赤が強い」ことがすぐにわかります。

一方、カラーコードの「#FF0F10」は、少し悩んでしまいます。

 
色を微調整していく場合はrgbの方が良いかもしれません。

カラーネーム

「rgb」の他にも「カラーネーム」というものがあります。

例えば、「red」と指定すると次の色になります。

 

 
カラーネームは全部で１５０種類程度。

色をイメージしやすいので、色の指定が簡単になります。

ただ、一方で色の微調整ができなくなるといった欠点もあります。

 
あと、名前を覚えるのがちょっとたいへんです。

例えば、「Blue」と名がつくものだけでも

 　Blue
 　CadetBlue
 　CornflowerBlue
 　DarkBlue
 　DarkSlateBlue
 　DeepSkyBlue
 　DodgerBlue
 　LightBlue
 　LightskyBlue
 　LightsteelBlue
 　MediumBlue
 　MediumSlateBlue
 　MidnightBlue
 　PowderBlue
 　RoyalBlue
 　SkyBlue
 　SlateBlue
 　SteelBlue

こんな感じでたくさんあります。

ちょっと覚えるのは厳しいですね・・・。

 
ただ、オシャレな名前が多いので、個人的には好きです。（使いこなせてはいませんが・・・）

 
カラーネームはyahoo検索やgoogle検索で簡単に調べることができます。

カラーコードの省略形

最後にもう一つ。

カラーコードの省略形があります。

例えば、「#000000」を「#000」なんて表す方法です。

6桁を3桁で表すことができます。

 
この方法だと桁数が減る分、表現できる色の種類も減ってしまいます。

その数は約4,000種類。

 
でも、ぶっちゃけ4,000種類も色があれば十分ですよね。

 
カラーコードがめんどくさければ、この省略形がおススメです。

まとめ

いかがだったでしょうか？

カラーコードはややこしいのですが、使いこなせば強力な武器へと変わってくれます。

 
使いこなすためには、カラーコードを実際にいじることが重要です。

ぜひ、自分の理想の色を見つけてみてください。

※ OSやブラウザによって、色が変わることがあります。また、人によっても色の見え方が変わります。そもそも、自分の右目と左目でもわずかですが変わります。そういう意味では、細かすぎる微調整はムダになる可能性があるのでご注意を。（例えば、#000000を#000001に変えるなど。）

 

---

＜関連記事＞
決断できないときに役立つ「メリット・デメリット表」

---