カラーフィルターを透過したスタイルシートの色数値を正確に求めたい！

Ruby on Rails

特定の列を強調表示するために、透明度を持った色でマスクした背景色を設定したい場合がある。現実の世界で例えれば、強調したい列の上にカラーセロファンを貼付けるような効果が欲しいのだ。縞模様である表に対して、上記のようにマスクした背景色を設定する場合、マスクした背景色を正確に求めないと、見た目の色合いに違和感を感じる...。
どうやったらマスクされた背景色が正確に求められるだろう？おそらく計算式があるのだろうが、知らない...。そこで最初は、マスクする前の背景色を、同じ値だけ変化させてみた。 例えば、#E0FFFFと#FFFFFFなら、それぞれ16減少させて#D0EFEFと#EFEFEFにした。しかし、この方法では違和感は消えない...。そこで同じ率で、それぞれ減少させてみたが、やはり変な感じだ...。

ターミナルで求めてみた

試行錯誤の結果、ターミナルを使って正確に求めることが出来た。（ターミナルはMacOSXでUNIXシェル環境を提供するアプリケーション）以下はターミナルの邪道な利用方法。

ターミナルウィンドウをカラーフィルタとして利用する。
  • ターミナルを起動して、コマンド＋iで、ターミナルインスペクタを開く。
  • ターミナルインスペクタの一番上のプルダウンリストで「カラー」を選択する。
  • 「この背景色を利用する」の右をクリックして、カラー選択のユーティリティウィンドウを開く。
  • まずは、マスク（カラーセロファン）の色と透明度を設定する。（ターミナルウィンドウがその色と透明度に設定される。）
  • その後、マスクしたい縞模様の上にターミナルウィンドウを移動する。
  • これで、ターミナルウィンドウの下に見える縞模様は、正しくマスクされた縞模様になる。


カラー選択のユーティリティウィンドウでカラー数値を読み取る。
  • 上記ウィンドウ上部で左から２番目の「カラーつまみ」を選択する。
  • プルダウンリストから「RGBつまみ」を選択する。
  • 虫眼鏡マークをクリックすると、マウス矢印が虫眼鏡になる。
  • 虫眼鏡を読み取りたいカラーの上に移動してクリックすれば、「RGBつまみ」の下にカラー数値が表示される。

16進数に変換したい

  • アプリケーションフォルダから計算機を起動する。
  • コマンド＋3で、プログラマ電卓になる。
  • 下記変換ボタンを押して、カラー数値を16進数に変換できる。
    • Hex=16進数、Oct=8進数、Dec=10進数


スタイルシートのカラー表現

  • HTMLでも利用できる表現
RGBを16進数6桁で表現 #E0FFFF
カラーネームによる表現 lightcyan
RGBを16進数6桁で表現 #EFF
RGBを10進で表現 rgb(224,255,255)
RGBの輝度を%で表現 rgb(88%,100%,100%)