RGB値のやさしい小話から色を操るヒントを得る- カラもく編

 

色を表す16進数(例えばジョンブリアンという色の16進数表記は#FFDC00)。
これは、RGBの値で表記されているの知ってますか?

今日は、RGBの仕組みから表記のお話をちょっとします。難しい話は抜きにして単純明快にいくつもりです。
このRGB表記を知っていると色を操るときに便利です。

RGBってそもそもなに?

RGBは原色の頭文字をとった名称の事。
R=Red
G=Green
B=Blue
Red, Green, Blueの発光体で光の色を作り出しているのが、パソコンやスマホの画面表示です。テレビのも同じ原理。このRGBの光を発光色と呼ぶのだけれども、RGBの発光色の強さの絶妙なバランスが多彩さを作り出します。

RGBを制して自由に色を作るために必要な知識

RGBの数字って何?

RGBの値はそれぞれ0〜255の数字で色の強弱を表せます。
「0」が一番色味としては弱く「255」は最強。

原色の赤色を表示したければ、Rの値だけを最大にする:R=255 G=0 B=0 →  
原色の緑色を表示したければ、Gの値だけを最大にする:R=0 G=255 B=0 →  
原色の青色を表示したければ、Bの値だけを最大にする:R=0 G=0 B=255 →  

RとGとBのそれぞれの値を調整しながら混色を作れます。
例えば、アイビーグリーンと言われるこの色のRGBのそれぞれの値は、
R=81 G=130 B=48
という構成で作られます。
3色の原色の微妙な組み合わせでいろんな色が作られるのは面白いですね。

また、RGBのそれぞれの値を同量にすれば、色味を持たないグレーになる。このときは、値の大きさの大小で、白っぽい色か黒っぽい色かを調整できます。
それでは、試してみます。
R=255 G=255 B=255は…なんと 白!なんです。
R=200 G=200 B=200ではこんな色★になります。
R=10 G=10 B=10ではこんな色★になります。

では、もう法則がお分かりの方もいるかと思いますが、
R=0 G=0 B=0はどうでしょう?…
答えは、そうなんです 黒!なんですね。

RGBと16進数

冒頭の話に戻りますね。
色を表す16進数(例えばジョンブリアンという色の16進数表記は#FFDC00)。
これは、RGBの値で表記されているという事をお話ししましたがどういう事なのでしょう?

前述したようにRGBは0から255までの「整数」の「10進数」で指定できます。
この「10進数」は、「16進数」に変換できます。WebのHTMLのようなソースコードで指定する場合は、「16進数」のRGB値を使います。
この記事に使われている色もソースコードは全て16進数で入力しています。
変換の例として、0は’00’、255は’FF’となります。

前述の例としてあげたアイビーグリーンの「16進数」は、#518230
16進数のRGBには記述スタイルがあり、ハッシュタグに使う「#」を先頭に置いて、左からR,G,Bの順番で16進数を並べます。
このアイビーグリーン Rにあたる16進数の値は16、 Gにあたる値は82、 Bにあたる値は30 ということになりますね。

今までの情報を知ると、ジョンブリアンという”輝くような黄色”という意味の素敵な名前を持った色#FFDC00。
この色、とてもわかりやすい色の構成だと思いませんか?
Rにあたる値=FFがマックスで入っており、Bが00で最小値。10進数に変換するR=255,G=220,B=0となります。

といっても色々考えるのが大変だと思うあなたにはPhotoshop /Illustrator のカラーピッカーがおすすめ

色を自由に作りたいと思っても、RGBは数値だから、どんな色になるか予測がつきにくく困ってしまいます。
だから、Photoshop /Illustrator のカラーピッカーには、入力した数値に合わせて、色(描画色,背景色)を表示する工夫がされています。
また、Photoshop/IllustratorではRGB値を0から255までの「整数」で指定します。カラーピッカーにRGBの値を入れる3つのボックスがあります。RGBの順で上から下へと、例えばあるオレンジ色だと 255, 100, 50と入力すれば完了です。
こんな感じですね↓

時間があるときに色々値を変えて遊んでみてください。

カラもくプロフィール
自称「色彩カフェのマスター」
色の「いろは」から「色のサイエンス」まで幅広い知識があります。
まじめに、時には面白く色に関する悩みを解決します!
時々このサイトの管理人の「デザもく」ことオクムラ アイのフィーチャリングでブログに登場します。

 

  関連記事 - Related Posts -

 

  最新記事 - New Posts -

 

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です