ユーザーが背景色を指定できる要素の文字色をその背景色に応じて切り替えたいときの方法です。固定で白や黒にすると、背景色によっては見辛くなってしまうためです。そのためには背景色の輝度を算出します。RGBに対して R × 0.299 + G × 0.587 + B × 0.114 で算出できます。下記の例では背景色が暗ければ白を、明るければ黒となるように計算しています。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

const backColor = '#0033ff';

let r = backColor.substr(1, 2),
    g = backColor.substr(3, 2),
    b = backColor.substr(5, 2);

r = parseInt(r, 16);
g = parseInt(g, 16);
b = parseInt(b, 16);

const y = 0.299 * r + 0.587 * g + 0.114 * b; // 輝度

const foreColor = v < 128 ? 'white' : 'black';