補色のRGB値をJavaScriptで計算

補色の計算方法

補色をどう計算するかは以下のページを参考にしました。

参考：補色のRGB値を計算する

上記参考ページでも書いてありますが、

R、G、B の値の中で最大値と最小値を足したものを □ とする。

□ - R、□ - G、□ - B が補色の R、G、B の値となる。

という事なので、それを計算する JavaScript コードです。各 R、G、B の数値を入れると補色のカラーコードの文字列を返す関数です。

JavaScript

function complementary_color(R, G, B) {

    //各値全てが数値かつ0以上255以下
    if(!isNaN(R + G + B) && 0 <= R && R <=255 && 0 <= G && G <=255 && 0 <= B && B <=255) {

        //最大値、最小値を得る
        var max = Math.max(R, Math.max(G, B));
        var min = Math.min(R, Math.min(G, B));

        //最大値と最小値を足す
        var sum = max + min;

        //R、G、B 値を和から引く
        var newR = sum - R;
        var newG = sum - G;
        var newB = sum - B;

        var comColor = "rgb("+ newR + ", " + newG + ", " + newB +")";

        //文字列を返す
        return comColor;
    } else {

        //if 条件から外れた場合は null を返す
        return null;
    }
}

//使い方
complementary_color(211, 59, 105) // ⇒"rgb(59, 211, 165)"

文章をただコード化しただけなのでそんなに難しくはありません。

最初の if 文で「数値であり、かつ0以上255以下」の判定をしています。JavaScript には isNaN メソッドという数値でないと true を返すものがあるのでそれを利用します。数値ではないというところが少し紛らわしいです。

また最大値、最小値の取得は Math.max、Math.min を使いました。2つの値しか判定できないので、2つまず比べて、さらにもう1個と比べるという方法を取っています。

RGB補色ジェネレーター

せっかくなのでジェネレーターを作ってみました。下のフォームに数値を入れるとその補色が出力されます。

rgb(, , ) の補色は

まとめ

参考にしたページでは Illustrator の計算方法という事で、もしかしたらほかの計算方法、解釈が存在するのかもしれませんが WEB の人が考える補色はほぼこれで間違いないと思います。

canvas などを使ってお絵かきツールなどを作る際使える気がする関数になりました。補色の組み合わせは映える色合いになるので、背景色と文字色などに適用すると目立つかもしれないです。