Top

補色のRGB値をJavaScriptで計算

RGB 値から色の補色を計算できないかという事で計算する関数を作ってみました。

補色とは下の画像のように色相環上で反対の位置にある色の組み合わせで、矢印の一方ともう一方が補色の関係です。

complementary-color

補色の計算方法

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

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