tande lab.

[JavaScript] 背景色に応じて文字色を白or黒に振り分ける

背景色に応じて、見やすいように文字色を白または黒に振り分けるサンプルコード。
Chrome Extension “Color Thief – 色泥棒” で利用したコードのメモです。

やってることは単純で、RGB それぞれの値を以下の計算式に当てはめます。

Y = 0.3*R + 0.6*G + 0.1*B

で Y > 127 なら黒、それ以外なら白、と振り分けています。

<script>
	var checkTxtColor = function(cR,cG,cB){

		// 最高値は 255 なので、約半分の数値 127 を堺目にして白/黒の判別する
		var cY = 0.3*cR + 0.6*cG + 0.1*cB;
		
		if(cY > 127){
			return "#000000"; // 黒に設定
		}
		return "#FFFFFF"; // 白に設定
	}

	// 関数 checkTxtColor を実行
	console.log(checkTxtColor(200,200,100));

	// 実行結果
	// #000000
</script>




0 comments
Submit comment