JavaScriptで16進カラーコードから補色を求める関数を実装する方法

はじめに

本記事では、16進数カラーコード（HEXカラー）を唯一の引数として受け取り、その色の補色（complementary color）を計算して返すJavaScript関数の実装方法を解説します。

補色とは、色相環において対象の色と正反対の位置にある色のことです。デザインやUI開発において、コントラストの高い配色を自動生成したい場合などに活用できる便利な処理です。

期待する動作

作成する関数 getComplementaryColor() は、以下のように入力と出力が対応します。

getComplementaryColor('#142814') = '#ebd7eb';
getComplementaryColor('#ffffff') = '#000000';
getComplementaryColor('#3399ff') = '#cc6600';

このように、入力されたHEXカラーの各要素を反転させることで、補色を簡単に導き出すことができます。

実装コード

実際のコードは以下の通りです。

const str1 = '#142814';
const str2 = '#ffffff';
const str3 = '#3399ff';

const getComplementaryColor = (color = '') => {
    // 先頭の「#」を除去してカラーコード部分だけを取得
    const colorPart = color.slice(1);
    // 16進数文字列を数値に変換
    const ind = parseInt(colorPart, 16);
    // 「すべてのビットが1の値 - 入力値」で補色を算出し、再び16進数文字列へ変換
    let iter = ((1 << 4 * colorPart.length) - 1 - ind).toString(16);
    // 桁数が足りない場合は先頭を0で埋める
    while (iter.length < colorPart.length) {
        iter = '0' + iter;
    };
    return '#' + iter;
};

console.log(getComplementaryColor(str1));
console.log(getComplementaryColor(str2));
console.log(getComplementaryColor(str3));

処理の流れを解説

このアルゴリズムのポイントは以下の3ステップです。

1. 前処理： slice(1) で先頭の「#」を取り除き、純粋な16進数文字列だけを抽出します。
2. 補色の計算： ビット演算 (1 << 4 * colorPart.length) - 1 により「桁数分のビットがすべて1の最大値」を作り、そこから入力値を引きます。これにより各RGB成分が反転され、補色が得られます。
3. 整形： 計算結果の先頭に0が必要な場合（例：#000000 のようなケース）、while ループで0埋めを行い、最後に「#」を付けて返します。

実行結果

コンソールには次のように出力されます。

#ebd7eb
#000000
#cc6600

まとめ

このように、ビット演算を活用することで、わずか数行のコードでHEXカラーの補色を効率的に求めることができます。#ffffff（白）に対して #000000（黒）が返されるように、直感的にも正しい結果が得られる点も確認できました。ダークモード・ライトモードの切り替え機能など、動的に配色を反転させたい場面でぜひ活用してみてください。