人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

javascriptで、ダイナミックに変化する背景色(RGB)に応じて、上に載ってくる文字を見やすいよう "黒または白"に設定したいのですが、
どういった計算でもとめられますでしょうか?

黒または白を、背景RGB値からどうやって判定したらいいでしょうか?



●質問者: ken1bf7
●カテゴリ:ウェブ制作
✍キーワード:JavaScript RGB 背景色 計算
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● coles
●35ポイント

RGBの値から輝度値を計算してそれが最大輝度(白)に近いか最小輝度(黒)に近いかを判定して黒に近ければ白を、白に近ければ黒を指定するようにすればいいでしょう。


http://www.sm.rim.or.jp/~shishido/yuv.html

Y=0.299R+0.587G+0.114B


大雑把に計算しても問題ないので

Y=0.3R+0.6G+0.1B

としてY>0.5なら黒、Y>=0.5なら白という判定で充分だと思います。

◎質問者からの返答

ありがとうございます!!


2 ● gday
●35ポイント

YUVフォーマット及び YUV<->RGB変換

http://vision.kuee.kyoto-u.ac.jp/~hiroaki/firewire/yuv.html


RGBの値からYUVの値に変換するとYが輝度になります。

この輝度成分を白あるいは黒と比較してコントラスト(輝度比)が大きい組み合わせを選べば文字が見やすくなります。


Y = 0.299R + 0.587G + 0.114B


なので、簡易的に


Y = (3*R + 6*G + 1*B)/10


として、RGBは8bitとすると白は(255,255,255)で黒は(0,0,0)なので


0≦(3*R + 6*G + 1*B)≦2550


この範囲の値をとります。

中央の値1275(=2550/2)が50%グレーと同等の輝度になるので


(3*R + 6*G + 1*B)<1275 ならば黒に近いので背景は白に、

(3*R + 6*G + 1*B)≧1275 ならば白に近いので背景は黒に、


それぞれ決定すればいいでしょう。

◎質問者からの返答

ありがとうございます!!

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ