おふとんの人 → ホームページ教室 → 色の設定で必要な１６進数

１６進数について

25.デザインを考えるの配色では、スタイルシートで色を指定するのに、１６進数を覚える必要があると述べました。ここでは、１６進数について詳しく述べたいと思います。

進数とは

そもそも進数とは、その数字で桁が上がる数字のことを言います。１０進数であれば、次の例のように、１０になれば一桁上がります。

0 → 1 → 2 → 3 → 4 → 5 → 6 → 7 → 8 → 9 → 10

１６進数であれば、１６になれば一桁上がるわけですが、１６進数で数字を数えていった場合、１０を超えた時点で「１０」と書いてしまったら、一桁上がったことになってしまうので、次の例のように、１０は「a」、１１は「b」とアルファベットで表現します。よって１５は「f」で、１６になったら「１０」となります。

0 → 1 → 2 → 3 → 4 → 5 → 6 → 7 → 8 → 9 → a → b → c → d → e → f → 10

なぜ１６進数なのか？

なぜ１６進数なのかを話す前に、２進数について話さなければなりません。２進数は、上の条件に従うと、次の例に示すように、２になると一桁上がります。

0 → 1 → 10 → 11 → 100 → 101 → 110 → 111 → 1000 → 1001 → 1010

２進数をもっと詳しく考えていきたいと思います。２進数は２で一桁上がるので、「０」か「１」の世界です。この「０」か「１」の世界は、実はコンピュータの世界と同じであると、お気づきでしょうか？

そもそもコンピュータの内部では、簡単に言うと、電気が流れたときが「０」、電気が流れないときが「１」として表現されています。つまり、電気が「ＯＮ」か「ＯＦＦ」の世界なのです。

電気ＯＮ＝０電気ＯＦＦ＝１

では、２進数１桁で表現できる組み合わせは「０」と「１」ですから、２進数１桁で２通りの表現ができることがわかります。では、２桁ではどうでしょうか？。２桁では、「００」「０１」「１０」「１１」の４通りです。数学的には、２2＝４通りと現せます。では、３桁では、２3＝８通り、４桁では２4＝１６通りの表見ができることがわかります。

このような２進数の桁の単位のことを、コンピュータの世界では、ビットと言います。つまり、２進数１桁は１ビット、４桁では４ビットです。ちなみに、８ビットを１バイトと言い、ＨＤＤなどの記録容量の単位になっています。

話しを戻しまして、２進数４桁は、１６通りの表現ができると書きましたが、１６進数の１桁も１６通りの表現ができます。つまり、２進数４桁が１６進数１桁に相当し、２進数と１６進数は親和性が高く、換算がしやすいのです。ということは、コンピュータの内部では、２進数で動いているわけですが、それを実際に記述するには桁数が多くなったり、０と１で見にくかったりするので、親和性の高い１６進数で記述していこうと考えたのです。

２進数、１０進数、１６進数の相対関係

２進数１０進数１６進数２進数１０進数１６進数２進数１０進数１６進数
0001000016101000003220
1111000117111000013321
10221001018121000103422
11331001119131000113523
100441010020141001003624
101551010121151001013725
110661011022161001103826
111771011123171001113927
1000881100024181010004028
1001991100125191010014129
101010a11010261a101010422a
101111b11011271b101011432b
110012c11100281c101100442c
110113d11101291d101101452d
111014e11110301e101110462e
111115f11111311f101111472f

１６進数を使った色の設定

Ｗｅｂページと、スタイルシートを結びつける方法については、「28.スタイルシートの制作と設置」で述べています。ここでは、25.デザインを考えるの「スタイルシートについて」で述べた設定例を使って、１６進数を使っての色の設定について、丁寧に説明したいと思います。

● スタイルシートの設定例１

body {

  background-color: #aabbcc;

  color: #404040;

}

このスタイルシートの設定では、HTMLソースの中で、bodyタグで挟まれた領域では、background-color、つまり背景色は「#aabbcc」にしなさいという命令です。また、colorでは、文字の色を「#404040」にしなさいという命令です。

ここで出てくる「aabbcc」や「404040」は６桁の１６進数で、この値をいろいろと変えることによって、色を変えることができます。では、この６桁の１６進数が、どのような意味を持っているのでしょうか？。

光の三原色

光の三原色という言葉を聞いたことはございますでしょうか？。つまり、光の色は「赤」「緑」「青」の３つの光の組み合わせで表現できるということです。これらの色の英語読みの頭文字「Red」「Green」「Blue」を取って、「ＲＧＢ」と表現することもあります。

例えば、Ｒを１００％、Ｇを０％、Ｂを０％出す光源があったとすると、その光源が出す光は赤色に見え、Ｒを０％、Ｇを０％、Ｂを１００％出す光源であれば、青に見えます。色は、組み合わせることもできるので、例えば、赤１００％、緑１００％、青０％であれば、黄色に見えます。そして、すべての色が１００％であれば白になります。

このように、ＲＧＢのそれぞれの光を何％ずつ明るくするかによって、色が決まってきます。次の表に、代表的な色を載せておきますので、目安にして下さい。

ＲＧＢ色
100%0%0%■ 赤
0%100%0%■ 緑
0%0%100%■ 青
100%100%0%■ 黄
100%0%100%■ 紫
0%100%100%■ 水色
100%50%0%■ だいだい
50%100%0%■ 黄緑
50%0%100%■ 青紫
0%0%0%■ 黒
25%25%25%■ 濃い灰色
50%50%50%■ 灰色
75%75%75%■ 薄い灰色
100%100%100%□ 白

１６進数で色を表現

実は、上のスタイルシートの設定例で示した３桁の１６進数は、このＲＧＢを表します。つまり、「#aabbcc」を例に取れば、「#」は１６進数ですよという意味で、次の６桁を２桁ずつ切って、それぞれＲＧＢに対応させています。ですので、最初の「aa」が赤Ｒ、次の「bb」が緑Ｇ、そして最後の「cc」が青Ｇという具合です。

１６進数２桁では、一番大きな数字は「ff」です。

上の例では、赤「aa」、緑「bb」、青「cc」と設定されていますが、仮に、１６進数２桁の最大値「ff」と設定されていたとします。

この「ff」が何％を表しているかと言いますと、「ff」が１００％です。反対に、「00」が０％です。つまり、ffは１０進数で２５５ですので、赤、緑、青それぞれ１色当たり２５６通りの色で表現できることになります。それが３色ですので、２５６3＝１,６７７,２１６色の表現が可能であることになります。

「ff」は、２進数で１６桁（１６ビット）です。Windowsの画面のプロパティで、画面の色を設定できますが、その設定で「中（１６ビット）」という設定にすると、画面を１,６７７,２１６色で表現するという設定になります。

話しを戻しまして、もうお気づきだと思いますが、仮にスタイルシートを次のように変更したとします。

● スタイルシートの設定例２

body {

  background: #cccccc;

  color: #ff0000;

}

そうすると、次の表示結果に示すように、bodyタグで挟まれた領域、つまりＷｅｂページ全体の背景色が灰色になり、文字の色が赤色になります。

● スタイルシートの設定例の表示結果

テスト表示

このように、色を１６進数で表現されたものを、カラーコードと言います。

この表示結果は、背景色と文字色の関係として、とても見づらいと思います。このように、１６進数６桁で色を設定して、見やすい配色をしていかなければなりません。次のページでは、文字色と背景色の組み合わせで、読みやすい組み合わせの考え方について、考えたいと思います。

A8広告

１６進数のアルファベット表記

１６進数では、１０から１５を、ａからｆのアルファベットで表記しています。私は、たまたま小文字を使っていますが、大文字でも同じです。ただし、小文字と大文字を混在させるのではなく、どちらかで統一しておいた方が、良いと思います。

●小文字で指定

color: #aabbcc;

●大文字で指定

color: #AABBCC;

カラーコードとカラー名の関係

スタイルシートで色を指定する場合、上記のように１６進数で指定する場合と、カラー名を直接入力する場合がございます。次の二つの例は、表示結果が同じになります。

●１６進数で指定

color: #ff0000;

●カラー名で指定

color: red;

「カラーコードとカラー名の関係」で、カラー名とカラーコードの相対関係をまとめましたので、参考になればと思います。