色の表現、RGBとRGBA

著者:杉浦

色の表現、RGBとRGBA

 コンピュータが色を表す方式の中にはRGB、RGBAというものがあります。RGB表現はR(赤)、G(緑)、B(青)の三色の要素の強さで色を表しています。RGB全て取りうる範囲は[0,255]で、要は8bitで整数になる範囲です。RGBA表現はRGB表現にAlphaという要素を加えた色の表し方です。ほぼ全ての場合でAlphaは透明度として扱われます。A=[0,1]であり、非透明度の割合を示します。A=1(非透明度=100%)の場合、RGBA表現のRGB要素の値はRGB表現のRGB要素の値と全く同じになります。bitmapフォーマットは各ピクセルのRGBA値が延々と並んでいて、古い画像は8bit*4=32bit/pixelなデータが多いです。ハードの強化、高画質化に伴って64bit/pixelなデータも増えてます。
 RGBAによって表現される色は、自身の持つA要素である透明度、自身の持つRGB要素である描画色、重ねて塗られる対象のRGB要素である背景色、の計算から導かれます。計算はいたって単純な重みづけ平均で、次式の通りです。

(1 - A) * rgb_of_background + A * rgb_of_drawing = rgb_of_output
                A:透明度。RGBA表現のAlpha要素。スカラー。
rgb_of_background:背景色。RGB表現。3x1行列。
rgb_of_drawing   :描画色。RGBA表現のRGB要素。3x1行列。
rgb_of_output   :出力される色。RGB表現。3x1行列。

先ほど”A=1(非透明度=100%)の場合,RGBA表現のRGB要素の値はRGB表現のRGB要素の値と全く同じになります。”と述べました。A = 1ならば

rgb_of_drawing = rgb_of_output

あり出力される色は描画色と等しくなり、描画色のRGBの三要素のみで色を表しているわけです。
 透明度を使用することで背景色を考慮した色を出力することができます。これは例えばデザインに用いるような汎用的なライブラリで使われます。
 例えば、googleの公開しているマテリアルデザイン用ライブラリ、Material Design Liteでは
rgba(0,0,0,0.12)、rgba(158,158,158, 0.20)の様な、色の濃淡のみを変更するような使い方にrgbaを活用しています。

  • この記事いいね! (0)

著者について

杉浦 administrator