あきぞらです。
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の基準の数字は適当なので、適宜変更してもらえればと思います。
では、また。