Ｗebサイトの作成やデジタルソフトを使っているときに目にすることがあるカラーコードは、どのような情報によって決められているのでしょうか。

フルカラーの場合、主にＷebサイトなどのデジタルデータで使われる「ＲＧＢカラー」とチラシなどの印刷物をフルカラーで印刷するときに使われる「ＣＭＹＫカラー」の二種類がありました。

このセクションでは、Ｗebサイトの作成によく利用されている「ＲＧＢカラー」の知識を使ってカラーコードを学んでいきましょう。

カラーコードを考える時には、「ＲＧＢカラー」と「加法混色」の知識が必要になります。思い出せなかったときは、Lesson8-1を復習してみましょう。

それでは、「カラーコードと１６進数」、「カラーコードの設定方法」について学んでいきましょう。

カラーコードと１６進数

１０進数とは

私たちが普段使っている数字は、１０進数と呼ばれています。

１０進数では、「０、１、２、３、４、５、６、７、８、９」の１０種類の数字を使っています。

桁数は、１０個進むと一桁繰り上がります。つまり、一つの桁の中で使える数字が０から９までの１０個あるのです。

１０進数では、１を１０個集めて１０の位に、１０を１０個集めて１００の位になります。
言い換えれば、位が進むごとに数が１０倍になるのです。

１６進数とは

カラーコードには、１６進数が使われています。

１６進数では、「０、１、２、３、４、５、６、７、８、９、Ａ、Ｂ、Ｃ、Ｄ、Ｅ、Ｆ」という１６種類の数字と記号を使っています。

１６進数は、１６個の数字と記号を使い終わったとき、Ｆの次から桁が上がります。

つまり、一つの桁の中で使える数字と記号は、０からＦまでの１６個あるのです。

１６進数では、１～Ｆまでを１６個集めると１６の位となり、位が進むごとに数が１６倍になります。

１６進数の数え方

具体的な数え方としては、０、１、２と数えはじめて９となったときには、Ａ、Ｂ、Ｃ・・・Ｆと数えます。

Ｆまで数えたら、１０、１１、１２・・・１９と数えていき、１Ａ、１Ｂ、１Ｃ・・・１Ｆと数えます。

そのあとは、また２０、２１、２２・・・９９と数えていき、９Ａ、９Ｂ、９Ｃ・・・９Ｆとなります。

このように、１６進数を数えるときには、一の位に注目してみましょう。

「９が終わると記号であるＡに変わる」ことをしっかり意識してみると、数えやすくなるのではないでしょうか。

１０進数と１６進数

１０進数と１６進数を比べてみると、「１０」は「Ａ」に、「１５」は「Ｆ」に該当しています。

ＲＧＢで指定できる範囲は、１０進数で０～２５５まででした。これを１６進数におきかえると、０～ＦＦまでとなります。

そのため、ＲＧＢで各色の要素を最大限使いたいときには「ＦＦ」と指定するとよいのです。

次の項目で、カラーコードの設定方法について詳しく確認していきましょう。

カラーコードの設定方法

カラーコードは、Webページで色を表現するために色を指定するコードです。「＃００００００」というように、＃と６桁の１６進数で指定します。

ここでは、無彩色と有彩色をカラーコードで設定する方法について学んでいきましょう。

無彩色のカラーコード

１６進数で一番小さい０を使ったときには、「＃００００００」となり、黒色を表します。

０という数字は色味がないことを示しており、ＲＧＢの場合は黒色になることに注意しましょう。

逆に１６進数で一番大きいＦを使ったときには、「＃ＦＦＦＦＦＦ」となり、白色を表します。

Ｆは色味があることを意味しており、ＲＧＢの赤色・緑色・青色の光を一箇所に集めると白くなるという「加法混色」が関係しています。

また、１６進数で０とＦの間にある６を使って「＃６６６６６６」と指定すると、黒色と白色の間にある灰色を表すことができます。

有彩色のカラーコード

有彩色のカラーコードは、＃の後に書かれている６桁の数字や記号で設定されます。

＃の後に書かれている６桁は、「ＲＧＢ」であるＲ（レッド）・Ｇ（グリーン）・Ｂ（ブルー）によって２桁ずつ設定されています。

有彩色の純色は、色相の中でもっとも彩度が高い色を意味しています。

純色をカラーコードで表示したいときには、純色のレッドは「＃ＦＦ００００」、純色のグリーンは「＃００ＦＦ００」、純色のブルーは「＃００００ＦＦ」で表すことができます。

このセクションでは、「カラーコードと１６進数」、「カラーコードの設定方法」について学びました。

次のセクションでは、「カラーコードの応用」について、引き続き学んでいきましょう。