[色のはなし] その1. RGBってなに?

今日から12月になりましたね。
2017年も残りわずかです。照屋です。

今日のテーマは「色」です!

色には種類があるんです!

色には映像に使われる「光の三原色RGB」と主に印刷物で使われる「色料の三原色CMY」の2種類があります。なんだか長くなりそうなので、今日は光の色について書きますね。

映像に使われる光の色RGB

1.光の三原色RGBってなに?

「光の三原色」!学生の頃に聞いたことがありますね!懐かしい!「光」とは、TVやスマホ、PCなどのモニターや映像に使われている色のことですね。
三原色とは「Red=赤 Green=緑 Blue=青」のことで、それぞれの頭文字をとって「RGB」と略されます。私たちが目に見えている映像やWebもこの3色で出来てるんですね!
今見えているモニターの色もRGBで表現されています。

2.色を指定するRGB値

RGBは「0~255」の値で指定します。
光なので、数値が「255(光がたくさんある状態)」に近いほど白く、「0(光がない状態)」に近づくほど黒くなります。

太陽の光が当たりすぎると明るすぎて白く感じることがありますよね。逆に光が当たっていないところは影となって暗く、黒く見えます。そんな感じです。

RGBで色を表現したい場合、例えば赤ならRGB値は「R:255 G:0 B:0」となります。

R:255にG:100を足すと赤よりも薄いオレンジになりましたね!さらにB:200を足すとピンクに!
数値を指定することで色を作っているんですね。

さらに、3つの数値が高いほど白っぽく(光がある状態)、0に近いほど黒っぽく(光がない状態)なります。

3.RGBを指定するカラーコード#000000 / #ffffff

カラーコードとは「色を表現するために用いられる文字の符号」のことです。RGBの数値を#から始まるコードにしたものですね。
#00(R)00(G)00(B)とそれぞれの色の濃さを数字で表しています。

コードは
# + 0~9 + a~f
までの英数字の組み合わせで構成されます。

「0」が光(色)がない状態、「f」が光(色)がある状態なので濃くなります。

先ほどの「赤:R255 G0 B0」のカラーコードは「#ff0000」となります。
RGBで表現しても#カラーコードで表現しても同じ色のです。
Red=ff[255](光MAX)Green+BLUE=00[0](光なし)なので赤になるんですね。

このカラーコードはWebでも使用されます。HTMLやCSSで色を使用したいときは、「#00ff00」や「#0000ff」のカラーコードで指定するんですね~。

なんだか小難しい内容になってしまいました…。
もっと簡潔に分かりやすく説明したかったのに…( ノД`) 語彙力のなさっ…!
「色料の三原色CMY」についてはまた次回。

つ、つぎは簡潔に説明できるように頑張ります…(たぶん無理)。

では、また!

この記事を書いた人

照屋野枝
照屋野枝クリエイティブ事業部 ウェブデザイナー
クライアント様の思いを形にできるようなデザインえを心がけています。 プロフィールを見る
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

何でもお気軽にお問い合せください。

お問い合せはこちら