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

どういった計算でもとめられますでしょうか?

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

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2008/06/24 22:37:32
  • 終了:2008/07/01 22:40:02

回答(2件)

id:coles No.1

coles回答回数10ベストアンサー獲得回数12008/06/24 22:56:06

ポイント35pt

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なら白という判定で充分だと思います。

id:ken1bf7

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

2008/06/25 10:48:28
id:gday No.2

gday回答回数383ベストアンサー獲得回数712008/06/24 23:11:45

ポイント35pt

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 ならば白に近いので背景は黒に、


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

id:ken1bf7

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

2008/06/25 10:48:30

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません