(cache) ソフゲート

等比計算の算出方法

グラデーション配色を行う場合、「徐々に明るくする」「徐々に暗くする」「徐々に目的色にする」の３種類が考えられますが、「明るく」→「白」、「暗く」→「黒」とすれば、すべて「徐々に目的色にする」事になります。このため、「基本色」から「目的色」への中間色を求める場合は、配色値をＲ・Ｇ・Ｂに分解して以下の計算を行います。

基本色を「R=Ra, G=Ga, B=Ba」、目的色を「R=Rb, G=Gb, B=Bb」とする。
この際の「X%」にあたる中間色「R=R(X), G=G(X), B=B(X)」は以下の計算式で求める。
---
・R(X) = (Rb - Ra) * X / 100 + Ra
・G(X) = (Gb - Ga) * X / 100 + Ga
・B(X) = (Bb - Ba) * X / 100 + Ba
---
＊X=0～100で小数利用も可能だが、演算結果は整数化が必要。

この計算式を使い、「目的色」を白（R=0xFF, G=0xFF, B=0xFF）とした場合のサンプルは以下となります。

基本色	青（R=0x55）（G=0x55）（B=0xAA）	水（R=0x55）（G=0xAA）（B=0xAA）	緑（R=0x55）（G=0xAA）（B=0x55）	黄（R=0xAA）（G=0xAA）（B=0x55）	赤（R=0xAA）（G=0x55）（B=0x55）	桃（R=0xAA）（G=0x55）（B=0xAA）	灰（R=0xAA）（G=0xAA）（B=0xAA）
0%	5555AA	55AAAA	55AA55	AAAA55	AA5555	AA55AA	AAAAAA
20%	7777BB	77BBBB	77BB77	BBBB77	BB7777	BB77BB	BBBBBB
40%	9999CC	99CCCC	99CC99	CCCC99	CC9999	CC99CC	CCCCCC
60%	BBBBDD	BBDDDD	BBDDBB	DDDDBB	DDBBBB	DDBBDD	DDDDDD
80%	DDDDEE	DDEEEE	DDEEDD	EEEEDD	EEDDDD	EEDDEE	EEEEEE
100%	FFFFFF	FFFFFF	FFFFFF	FFFFFF	FFFFFF	FFFFFF	FFFFFF

この計算式はグラデーションの中間色を求める一般的な方法で、Ｒ・Ｇ・Ｂの比較比率が同じことから「等比（計算）グラデーション」と呼ばれます。色のバランスを保持できる特徴があり、簡単な計算式で算出できるため、単に「グラデーションの計算方法」と言えば「等比計算」の事を指します。

等差計算の算出方法

グラデーション配色を行う際に「等比計算」を行うと、目的色に近付くにつれて配色値が収束されるため、１００％付近では同じような色になってしまいます。このため、色の違いを重視する場合は、配色値をＲ・Ｇ・Ｂに分解して各配色値を均一に変化させる以下の計算を行います。

基本色を「R=Ra, G=Ga, B=Ba」、その最小値を「RGBmin」、最大値を「RGBmax」とする。
加えて、配色用の下限値を「0」、上限値を「Cmax」とする。
この際の「X%」にあたる中間色「R=R(X), G=G(X), B=B(X)」は以下の計算式で求める。
---
・R(X) = (Cmax - RGBmax + RGBmin) * X / 100 + Ra
・G(X) = (Cmax - RGBmax + RGBmin) * X / 100 + Ga
・B(X) = (Cmax - RGBmax + RGBmin) * X / 100 + Ba
---
＊X=0～100で小数利用も可能だが、演算結果は整数化が必要。
＊ＨＴＭＬの場合は、Cmax=0xFF(255)。

この計算式を使い、「等比計算の算出方法」と同一の「基本色」を使った場合のサンプルは以下となります。

基本色	青（R=0x55）（G=0x55）（B=0xAA）	水（R=0x55）（G=0xAA）（B=0xAA）	緑（R=0x55）（G=0xAA）（B=0x55）	黄（R=0xAA）（G=0xAA）（B=0x55）	赤（R=0xAA）（G=0x55）（B=0x55）	桃（R=0xAA）（G=0x55）（B=0xAA）	灰（R=0xAA）（G=0xAA）（B=0xAA）
0%	000055	005555	005500	555500	550000	550055	555555
20%	222277	227777	227722	777722	772222	772277	777777
40%	444499	449999	449944	999944	994444	994499	999999
60%	6666BB	66BBBB	66BB66	BBBB66	BB6666	BB66BB	BBBBBB
80%	8888DD	88DDDD	88DD88	DDDD88	DD8888	DD88DD	DDDDDD
100%	AAAAFF	AAFFFF	AAFFAA	FFFFAA	FFAAAA	FFAAFF	FFFFFF

この計算式は同系色の明暗パターンを算出する方法で、Ｒ・Ｇ・Ｂの比較差が同じことから「等差（計算）グラデーション」と呼ばれます。色の違いを保持できる特徴がありますが、基本色は配色パターンの一例として扱われるため、一般用途の「グラデーション」とは意味が異なります。

等比計算と等差計算の違い

先に結論を述べると、「等比計算」は別な色に変化させる用途、「等差計算」は同系色で変化させる用途に適しています。別の視点で言えば、「等比計算」は色の境目をぼかす目的、「等差計算」は色を選択する目的で使い分けるべきでしょう。

サンプルで示した計算結果を比較すると下図のような特性を示し、一見すると等比計算では情報が損なわれるように見えます。しかし、実際には「等比計算」は別な色（白）に変化しており、「等差計算」は同系色で鮮やかさが変化しています。

等比計算の特性

等差計算の特性

→
反
転
補
正
→

＊基礎値の考え方が異なるので比率（％）の意味は異なります。

例えば「暗い緑」（55AA55）で比較してみると、「等比計算」では暗い色のバランスを維持しながら変化し、「等差計算」では緑色の鮮やかさが変化します。

等比計算	（等比０％）基本色（等差５０％）	等比２０％	等比４０％	等比６０％	等比８０％
等差計算	（等比０％）基本色（等差５０％）	等差６０％	等差７０％	等差８０％	等差９０％

上例では右側に行くにつれて違いが目立ち、どちらも徐々に黒の文字が読みやすくなることから「配色としては明るい色になった」と言えるのですが、イメージは全く異なります。このページでは計算方法を説明しているので「Ｒ・Ｇ・Ｂ」の数量（原色の度合い）を重視していますが、色の要素には「明度・彩度・色彩」と呼ばれる分類方法もあります。このため、計算方法の優劣は用途によって異なります。

「等比計算」が得意とする用途は、別な色に変化させる場合です。これまでの例では「等差計算」と比較しやすいように白（FFFFFF）への変化を扱ってきましたが、下例のように全く別の色へ変化させることを得意とします。（そもそもの目的が異なるため、「等比計算」では不可能な計算です）

赤（FF5555）→黄（FFFF55）の変化例（等比計算）
０％	１０％	２０％	３０％	４０％	５０％	６０％	７０％	８０％	９０％	１００％

これを間隔の小さい画像で扱うと色の境目をぼかすことが可能で、枠線の境界線や影の効果として使われます。ただし、下例のような「基本色」の反転色系統を「目的色」に選択すると途中に灰色が出現してしまう問題があります。

青（5555FF）→黄（FFFF55）の変化例（等比計算）
０％	１０％	２０％	３０％	４０％	５０％	６０％	７０％	８０％	９０％	１００％

「等差計算」が得意とする用途は、同系色で変化させる場合です。これまでの例では「等比計算」と比較しやすいように単一の比較差だけの変化をを扱ってきましたが、下例のようにパターン表示することを得意とします。

赤の表示パターン（等差計算）
差分：0x40	400000	703030	A06060	D09090	FFBFBF
差分：0x80	800000	A02020	C04040	E06060	FF7F7F
差分：0xC0	C00000	D01010	E02020	F03030	FF3F3F

このような表示パターンを参照すると数値的な違いを考慮して色を選択することが可能で、似たような色でも数値的な違いを考慮して配色を決定する際などに使われます。ただし、差分（RGBmax - RGBmin）が大きくなると変化が小さくなってしまう問題があります。

「等比計算」と「等差計算」を比較すると、用途や目的によって使い分けるべきだと言えます。ただし、「等差計算の０％と１００％」を「等比計算の基本色と目的色」に割当てて計算すると同じ結果になることから、「等差計算は等比計算の一例である」とも言えます。

その上で数値的な違いを比較すると、「等比計算」は初期配色が２色、「等差計算」は初期配色が１色となりますので、グラデーションの目的色が決定している場合は「等比計算」、汎用的なグラデーションを作成する場合は「等差計算」を推薦します。

グラデーション配色の計算方法

等比計算の算出方法

等差計算の算出方法

等比計算と等差計算の違い