特定のHEX値が白色系か黒色系かjavascriptで判定する簡易な方法

2019/06/27（木）

あまり使い道は無いでしょうが、特定のカラーHEX値が白色系か、はたまた黒色系か判定する必要に迫られた時は以下の様な形で簡易的に判定することが出来ます。

HEX値色判定の実装

まずはHEX値の色判定を実装していきます。

判定自体は非常に簡素で、checkColor()で受け取ったHEX値をr,g,bに変換し、check_colorの部分で白色系であればwhite、黒色系であればblackを返します。

/**
 * checkColor.
 * @description 引数にHEX値を指定すると白色系か黒色系か判定して返します.
 * @param {stging} hexcolor
 * @return {stging} 'white' or 'black'
 */
const checkColor = hexcolor => {
  let r = parseInt(hexcolor.substr(1, 2), 16);
  let g = parseInt(hexcolor.substr(3, 2), 16);
  let b = parseInt(hexcolor.substr(5, 2), 16);

  let check_color =
    (r * 299 + g * 587 + b * 114) / 1000 < 128 ? 'black' : 'white';
  return check_color;
};

使い方

使い方も非常に簡単で、checkColorにHEX値を渡すだけです。

console.log( checkColor('#000000') );
// black

console.log( checkColor('#ffffff') );
// white

console.log( checkColor('#5776f3') );
// black

console.log( checkColor('#4cb944') );
// white

使う頻度が多いか少ないかで言うと限りなく少ないとは思いますが、上記の様な形でfunction.jsにでもexportして置いておけば何時の日か使える時が来るかもです。

ちなみに私は最近Slim ChatworkというChrome拡張機能を制作していた際に、UI色変更機能で文字色と同系色になった場合に使いました。

動的に色を変更する場合等では使えそうですね ^^

今回はHEX値が分かる前提での色判定方法でしたが、例えば背景画像の色判定等の場合ではBackground-Check等を利用すると背景画像（CSSのbackground-imageでも可）でも色判定が可能です。

Background-Check：https://github.com/kennethcachia/Background-Check