中間色の作り方

１：中間色

同じ中間色でも白黒ならすごくわかりやすいくて作りやすいですよね
でも実際はドット絵ってほとんどカラーです
そんなとき、もし緑と赤とか、肌色と紫との中間色を作成しなきゃいけなくなったらあなたはすぐに作れますか？（笑）
そこで「そんなん言われなくても作れるわい！」ってならこの講座は別に読む必要はないです（笑）
もし「オレ、初心者だからそうこられるとお手上げ・・・」なんて人はとりあえずこのまま読んでみてください☆
ハッキリ言って全然色の知識知らない人でも簡単に誰でも作れます（笑）

２：中間色は計算して作る？

こういうふうに言うとなんかすごくムズかしそうですが、計算っていっても足し算とわり算、かけ算が出来ればいいだけです（笑）
まずコンピューター・グラフィックでの色というのは「Ｒ（レッド）・Ｇ（グリーン）・Ｂ（ブルー）」の数値で表している、というのはわかりますよね？
実はこれが便利なわけです（謎）

まず中間色を作成する場合の簡単な方程式を書いてみます・・・

３：中間色の計算法

「色１」という色と「色２」という２つの違う色における中間色を作りたい場合、

・中間色のＲ（レッド）の求め方

　（色１のＲ）＞（色２のＲ）の場合、
　中間色のＲ＝｛（色１のＲ）−（色２のＲ）｝／２＋（色２のＲ）

　（色１のＲ）＜（色２のＲ）の場合、
　中間色のＲ＝｛（色２のＲ）−（色１のＲ）｝／２＋（色１のＲ）


・中間色のＧ（グリーン）の求め方

　（色１のＧ）＞（色２のＧ）の場合、
　中間色のＧ＝｛（色１のＧ）−（色２のＧ）｝／２＋（色２のＧ）

　（色１のＧ）＜（色２のＧ）の場合、
　中間色のＧ＝｛（色２のＧ）−（色１のＧ）｝／２＋（色１のＧ）


・中間色のＢ（ブルー）の求め方

　（色１のＢ）＞（色２のＢ）の場合、
　中間色のＢ＝｛（色１のＢ）−（色２のＢ）｝／２＋（色２のＢ）

　（色１のＢ）＜（色２のＢ）の場合、
　中間色のＢ＝｛（色２のＢ）−（色１のＢ）｝／２＋（色１のＢ）


この計算で出来たＲとＧとＢの数値をそのまま設定すればいいのです
まぁやってることは極単純なんですが、まだちょっとわかりにくいっていう人のためにお約束で例を使って説明します

４：中間色作成の例

とりあえずまず一例として適当に２つ色があるとします

（Ｒ：３０　Ｇ：１６０　Ｂ：８０）

（Ｒ：１５０　Ｇ：２０　Ｂ：１６０）

ここで色の知識があまりない人はたぶんこの２つの色の中間色がどんな色になるのかというのが、すぐには想像できないことでしょう

では計算していきましょう

まずＲを求めます

この場合、Ｒだけ見れば、下の色のほうが数値が高いので、
まず「１５０−３０＝１２０」という計算をします
この１２０という数値は、言わなくてもわかると思いますが、「２つの色のＲの差」ということです、まんまですね（笑）
そこで次に１２０を２で割ります「１２０／２＝６０」
ただ、注意してほしいのは、毎回２で割るわけではありません
ここでは「中間色を１色だけ」作成するということを前提にしているので２で割っているわけです（まぁこれはあとで説明します）
で、次は６０に「２つのＲのうちの小さい方」を足します
この場合は上の方が小さいわけですから「６０＋３０＝９０」で、この９０という答えが、結局中間色のＲ数値になります。
どうですか？簡単でしょ？（笑）
同様にＧもＢも計算方法は同じです。
そこで、出た答えはＧ＝９０　Ｂ＝１２０です

で、実際その色はというと・・・

（Ｒ：９０　Ｇ：９０　Ｂ：１２０）

こんな色です
想像してましたか？（笑）

では並べてみます



なんかパっと見たカンジでは「これがホントにこの色の中間色？」って思うかもしれませんが、実際この色でアンチエイリアスかけると文字通りちゃんとかかってくれるんですよね〜、なんか不思議なカンジですね（笑）

まぁこれは中間色１色っていう例なんでわかりにくいかもしれないと思うので、次は３色作ってみましょう☆

４−Ａ：３色作ってみる

先ほど「毎回２で割るわけじゃない」って言いましたよね
それは今回のように３色作る場合とか、２色またはそれ以上作る場合のときのことを言っています
結論を言うと、２で割るところは「中間色２色作るならば、３で割る、３色なら４・・・」というカンジに作る色数に１足した数で割ると思ってください

それでは例として３色実際に作っていってみましょう

（Ｒ：３０　Ｇ：１６０　Ｂ：８０）

（Ｒ：１５０　Ｇ：２０　Ｂ：１６０）

まずＲは、先ほどと同じように「１５０−３０＝１２０」で、次に、今回は３色作るので４で割ります「１２０／４＝３０」そしてさっきと同じように小さい方の３０を足します「３０＋３０＝６０」で、１つ目の中間色Ｒは６０になります
さらにここで注意してほしいのはこの６０というのは中間色を３つ作るうちで、上の色（元のＲの小さい方）に一番近い中間色のＲを指しています
そして、この最初の中間色Ｒの６０が求まれば、あとの２色も簡単に求められます
元の色のＲ（小さい方）が３０で、次の色のＲが３０増しの６０ならば、次も当然３０増しの９０です。そして最後の中間色Ｒはさらに３０増しの１２０、そしてもうひとつの元の色（大きい方）のＲが１５０ということです
つまり、元の２つの色のＲの差を均等に３等分してるだけなんです
これでもうすでに中間色３色分のＲが求められたわけです、簡単ですね（笑）
同様にＧもＢも求めましょう

Ｇは計算すると、最初のＧは５５です
ということは２０から５５ということで３５増しずつ増やせばいいから次のＧは９０、その次は１２５、で、元の色Ｇは１６０ですね

Ｂは計算すると、最初が１００なんで２０増しの１２０、１４０ですね。

ほら、もうこれで中間色３色できあがりました（笑）

まとめると、まず１つ目は（Ｒ：６０　Ｇ：１２５　Ｂ：１００）の

　この色です

２つ目は（Ｒ：９０　Ｇ：９０：　Ｂ１２０）の

　この色です

最後は（Ｒ１２０　Ｇ：５５　Ｂ：１４０）の

　この色です

それではもう一度並べてみましょう☆

どうですか？これだけ並べれば、ちゃんとグラデーションになってることがわかるでしょ？（笑）

ではこの色を使って一つアンチエイリアスの例をお見せしましょう


　　　

ね？ちゃんとアンチエイリアスかかるでしょ？（笑）
どうですか？中間色作る方法、大体わかっていただけましたか？（＾＾）
最後にちょっと注意を書いておきます

戻る