こんにちは。オガリア開発チームの粂です。

引き続きGoのことを書くつもりだったのですが、今回はJavaScriptのことを書きます。

今書いてるアプリケーションで、背景色の明度によって文字色を切り替える箇所がありました。そんなに複雑なことはしておらずシンプルな方法なんですが、せっかくなのでブログに書いておこうと思います。

例えば、背景色が黒なら文字色を白に、背景色が黄色なら文字色を黒に、やりたいのはこういうことです。

まず、明度っていうのはHSV色空間(色相、彩度、明度)の構成要素のひとつになります。なので、背景色の明度を取得するためには色情報をHSVに変換する必要があります。

Web上で色を指定する際は、#000000などカラーコードで指定することが多いかと思いますが、これはRGB値を十六進法で表記した文字列になります。よって、カラーコードをRGBへ変換した後、さらにHSVに変換する必要があります。

RGBからHSVへの変換については理論的なことは正直よくわかんないんですが、ウィキペディアに変換方法が載っています。
HSV色空間

上記ページによれば、明度はR、G、Bのうちの最大値とのことです。色相、彩度、明度のうち一番簡単でした。良かったです。
ここまでくれば後はソースコードに落とし込めそうです。

var colorCode = '#000000';

var rgb = {
    red   : 0,
    green : 0,
    blue  : 0
};

rgb.red   = parseInt(colorCode.substring(1, 3), 16);
rgb.green = parseInt(colorCode.substring(3, 5), 16);
rgb.blue  = parseInt(colorCode.substring(5, 7), 16);

var brightness = Math.max(rgb.red, rgb.green, rgb.blue) / 255;

var color = brightness >= 0.5 ? 'black' : 'white';

背景色のカラーコードをインプットに、明度が50％未満なら白を、明度が50%以上なら黒を取得することができました。あとはjQuery使うも良し、DOMに適用すれば終わりです。
カラーコードが6桁じゃなかったらどうするの？とか色々ツッコミどころはあると思いますので、もっとちゃんとしたいならライブラリ探してきて使ったほうが良さそうですね！

次はまたGoに戻ります！

最後までお読みいただきありがとうございました！

Pocket

Tweet