こんにちは！デザイナーのヒロです！
色をWebサイトで表現する方法、ちゃんと知っていますか？大丈夫！簡単です！
プロのWebデザイナーになるためには避けて通れない色の知識。
こちらの記事でも簡単にご紹介していますので、不安な方はぜひご覧ください！
さて、今回の記事では、実際にWebサイトに色を指定する方法についてご紹介します！
これも、ぜひ覚えておいてほしいポイントなので、絶対にチェックしてくださいね。
色の指定は、CSSで行う
Webサイトの色の指定はCSSで行います。
CSS（Cascading Style Sheets：カスケーディング・スタイル・シート）とは、Webサイトのスタイリングを指定するために使う言語です。
CSSについては、また別の機会でわかりやすくご説明しますね！
CSSでの色の指定方法はいくつかありますが、その中でも特に使う2つの方法が、「RGB（RGBA）」と「HEX（16進数、カラーコード）」です！
どちらも使う機会が多くあるので、ぜひ２つともチェックしてください！
RGB（RGBA）
RGBとは、Red（赤）・Green（緑）・Blue（青）で色をしている方法です。
それぞれの値で、0〜255 までの値を設定することができます。
つまり、255 × 255 × 255 = 1656万1375通りの色を表現することができます！
すごい数ですよね！
例えば、青を表現したい時には、下のようにCSSに書きます。
rgb(0, 0, 255)
カンマで区切られていますが、RGBの順なので、Red（赤）・Green（緑）・Blue（青） の順番で値を入れて行きます。
こちらの記事でご説明したとおり、RGBは加法混色なので、色を混ぜれば混ぜるほど、白っぽくなっていきます！
つまり、
rgb(255,255,255)
は、Red（赤）・Green（緑）・Blue（青）が、最大限混ざっている状態なので、白色になります！
反対に、
rgb(0,0,0)
は、Red（赤）・Green（緑）・Blue（青）が、なにも混ざっていない状態なので、黒色になります！
とてもわかりやすいですよね！
では、黄色や紫などはどうやって表現すれば良いのでしょうか？
特定の色を指定したい時は、PhotoshopやIllustratorなどの制作ツールに入っている、カラーパレットから、その色のRGBの値を調べておくとスムーズです！
Aは、Alpha（透明度）
RGB（RGBA）と書かせていただきましたが、RGBAの「A」とはなんでしょうか？
このAは、実はAlpha（透明度）を表します！
透明度ってなんでしょうか？
じつはそのままの意味で、色を透明にすることができるんです！
色を透明にすると、後ろの文字や画像をうっすら見せることができます。
透明度まで自由に扱えるようになれば、プロのWebデザイナーに近づいたと言っても過言ではありません！
透明度の指定は、0〜1の間で指定します。
0.5 などの小数点が入った数字が入ってくるようになるんですね！
rgb(0, 0, 0, 0.5)
例えばこの書き方だと、Red（赤）・Green（緑）・Blue（青）が、なにも混ざっていない状態なので、黒色になりますよね。
さらに後ろに、「0.5」と書かれあるので、透明度が50%、つまり黒が半透明になるということなんです！
実際にはグレーのような色になり、後ろが透けている状態になります。
面白いですよね！
HEX（16進数、カラーコード）
そして、もう1つの指定の方法が、HEX（16進数、カラーコード）です！
HEXは、ヘックスと読みます。HEXとは何でしょうか？
実は、16進数のことを「Hexadecimal Number」と呼び、その略称のことなんです。
ではでは、16進数はご存知でしょうか？
16進数とは、0〜9 と A〜F までの、数字とアルファベットを組み合わせて数値を表現することです。
0・1・2・3・4・5・6・7・8・9・A・B・C・D・E・F
16個あるから16進数です。覚えやすいですね！
ちなみに、僕たちがいつも計算など使っている方法は、
0・1・2・3・4・5・6・7・8・9
の10個の数値を使うので、10進数と呼ばれます。
こちらの方が馴染みがありますよね。
CSSでは、この16進数で6桁の数値を作ることで、色を指定することができます！
つまり、16 x 16 x 16 x 16 x 16 x 16 = 1677万7216通りの色を表現することができます。
そうなんです！RGBが1656万1375通りなので、
HEX（16進数、カラーコード）なら、21万5841通り多く、RGBより色を表現することができるんですね。
さて、6桁の数値とは、このような書き方をします。
#0000FF
よくわかりませんね（笑）
ちなみに、頭に#（シャープ）をつけた、この6桁のことを「カラーコード」と呼びます。
このカラーコード、実はRGBと同じで、最初の二桁がRed（赤）、次の二桁がGreen（緑）、最後の二桁がBlue（青）を表しています。
RGBだとわかると、わかりやすいですよね！
上のカラーコードの場合、
Red（赤）が00、Green（緑）が00、Blue（青）がFF、となります。
00はまったくなにもない状態で、FFは最も大きい値です。
つまり、#0000FFは、青色だということがわかります！
それでは、下のカラーコードの色は何色かわかりますか？
#FFFFFF
Red（赤）もGreen（緑）もBlue（青）も、最も大きい値が入っています。
そして、RGBは加法混色なので、色を混ぜれば混ぜるほど、白っぽくなっていきます！
なので、このカラーコードは、白色が正解です！
反対に、このカラーコードは何色でしょうか？
#000000
もうお分かりですよね？このカラーコードは黒色になります！
このHEX（16進数、カラーコード）は、RGBでの指定よりも多くの色を扱えることから、Webデザインだけでなく、いろいろな場面でとても多く使用されているのを見かけますので、ぜひ覚えておいてください！
ただ、RGBAのように、A（Alpha、透明度）がないので、透明な色を指定することができません。
Webサイトで透明な色を使いたい場合は、RGBAで指定するか、
HEX（16進数、カラーコード）で指定して、別の方法で透明にする必要があります。
これも、ぜひ覚えておきたいポイントですね！
いかがでしたか？
RGBもHEX（16進数、カラーコード）も、デザインをするにあたって本当にたくさん使う機会があります！
PhotoshopやIllustratorなどの制作ツールで、色を選ぶ時に表示されているはずなので、ぜひぜひチェックして「この色ってこんな値になるんだ」など、いろいろ試してみると楽しいですよ！
コメント