【JavaScript】色コードの明暗を判定する関数の作成！

あきぞらです。

JavaScriptでフロント開発をしていて、

背景色が暗いときは白色、明るいときは黒色を返すような関数がほしいな・・・

と思ったので、作成してみました。

反対の色を算出すること自体はそんなに難しくなかったので、あとは実装するだけでした。

というわけで、今回はその処理を紹介していきます。

色コードの明暗を判定する関数

以下のような関数を作成してみました。

getInvertedColorの引数にカラーコードを渡してあげると、

明暗を判定して白か黒を返してくれます。

// 渡された色コードの明暗を判定して明るいときは黒、暗いときは白を返す関数
function getInvertedColor(colorCode) {
  // 16進数を変換
  const red = parseInt(colorCode.substr(1,2), 16);
  const green = parseInt(colorCode.substr(3,2), 16);
  const blue = parseInt(colorCode.substr(5,2), 16);

  // 明るさを判定
  const luminance = ( red*299 + green*587 + blue*114 ) / 2550;

  // 明るいときは黒、暗いときは白を返す（60の基準値は調整する）
  if (luminance > 60) {
    return "#000000";
  } else {
    return "#ffffff";
  }
}

カラーコードは16進数なので、最初に変換をかけています。

上のコードでは、明るさ計算の結果が60より大きければ（明るければ）黒を返し、

結果が60以下であれば（暗ければ）白を返すという感じにしています。

60の基準の数字は適当なので、適宜変更してもらえればと思います。

では、また。