RGBとカラーコードを数字から読み解く

仕事をしていく中で、色の問題にぶちあたったので、自分なりにノウハウをまとめておきたいと思います。色々なところに落ちている情報の寄せ集めですし、デザインを生業にしている人からすると当たり前のことかもしれませんが、フロントに携わるエンジニアは意識しておいて損はない分野かと思います。

RGBとカラーコード の違いは？

よく聞くのはRGBとカラーコード ですね。CSSなどでは、どちらでも書くことができます。

・RGBはRed、Green、Blueの略で、光の三原色を表しています。
それぞれの濃さを0〜255で表記したものです。

赤なら Redを濃くだすので、R:255 G:0 B:0
黒なら 全ての色を最大限含むので、R:255 G:255 B:255
といった具合でしょう。 

・カラーコードはRGBを16進数で表記したものです。

ITの世界には2進数、8進数、10進数、16進数と様々な数の数え方が存在しています。1文字で使える数のパターンだと思ってくれて構いません。私たちが普段使っているのは10進数で「0,1,2,3,4,5,6,7,8,9」の10パターンの文字を使っています。
ここで上がった16進数とは、「0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F」を使います。「16がF」になるので「17は10」さらに「255はFF」となります。気持ち悪いかもしれませんが、こんなもんなのです。

16進数で脱線した話を元に戻します。

カラーコード は6桁で表記されます。#000000　といった形ですね。
これは2桁ずつ区切られ、1,2桁目がRedを、3,4桁目がGreenを、5,6桁目がBlueを表しています。

赤なら R:255 G:0 B:0 なので、#FF0000
黒なら R:255 G:255 B:255 なので、#FFFFFF
となります。

どちらが使いやすいかと言われると、6桁ですむカラーコードの方が覚えやすいので利便性は高いのかと思います。
我ながら初歩中の初歩のお話で少し恥ずかしくなりました。。。正直今の段階ではこのくらいしか知識はありません。いつかもっと知識が増えたらまた記事を更新したいです。

今回はプログラムに生きる、数字を元にした色の考えを書いていきました。次は実際にデザインよりの色の話をしていきたいと思います

ここまで読んでくださり、ありがとうございました。ぜひ、また読んでくださると嬉しいです！