2011年2月26日土曜日

前景色と背景色の求め方

Tag Toolbar 0.8.30b8の記事で書いた、背景色を変える機能の詳細です。もっといい方法があるよって方はコメントもらえるとうれしいです。

まず、色の表現をRGBモデルからHSVモデルに変換します。RGBモデルは、スタイルシートなどで使われている、赤(R)、緑(G)、青(B)の数値で色を表すモデルです。HSVモデルは、色相(H)、彩度(S)、明度(V)で色を表すモデルで、RGBモデルからHSVモデルへは、Wkipediaに書かれている式で変換しています。
  • 背景色:
    タグの色のHSVモデルから、スライドバーかその横のテキストボックスで指定された割合(Lightness)の分だけ彩度を減らしたHSVモデルを背景色にします。ただ、それだけだと、明度の低い色(黒っぽい色)の場合に、ほとんどかわらないので、明度も増やします。Wikipediaにある図で言うと、中央に動かしつつ上にも動かすイメージです。タグの色のHSVモデルを HSV = (Ht, St, Vt)とすると、以下の式で求めます。
    H = Ht
    S = St - St * Lightness
    V = Vt + (1 - Vt) * Lightness
  • 前景色(文字色):
    • Tag colors(タグの色): この場合は、タグの色をそのまま使います。ただし、黄色っぽい色の場合と、背景色が濃い場合は、文字が読みづらくなるので、白か黒になります。具体的には、タグの色のHSVモデルがH = 60(黄系の色)の場合と、Lightness < 50(濃い背景色)の場合は、次に書くBlack/Whiteのやり方で求めます。
    • Black/White(黒か白): 背景色の明るさに応じて文字色を白か黒にします。背景色のRGBモデルを RGB=(Rb, Gb, Bb) とすると、以下の式で求めます。
      l = (Rb * 299 + Gb * 587 + Bb * 114) / 2550
      ・l < 50 の場合: 白
      ・それ以外: 黒
      色の三属性,色相,彩度,明度によるRGBカラー検索のページにある輝度を参考にしました。
    • Complementary colors(タグの色の補色): タグの色のHSVモデルのHを180度まわした色を文字色にします。ただし、Vが小さい色(黒っぽい色)と、S=0の色(白/グレー)は、180度まわしても、似た色になるか、Hが未定義なので、白か黒にします。背景色のHSVモデルを HSV = (Hb, Sb, Vb)とすると、以下の式で求めます。
      ・Vb < 0.25 の場合: 白
      ・Sb = 0の場合: 黒
      ・それ以外:
      H = (Hb + 180) % 360
      S = Sb
      V = Vb
      ※ % は余りを求める演算子です。

この機能、別の拡張機能として切り離したほうがいいのかなぁとも思っています。この機能はほしいけど、TagToolbarはいらないって人が多そうな気がします。

0 件のコメント:

人気の投稿(過去7日間)