■CSSフィルターで簡単画像変換(7):階調の反転(invert)

 CSS(Cascading Style Sheets)のフィルター機能を使用すると、カラー画像に対して容易に下記に示す各種変換を施すことができます。

(1)blur(ぼかし)
(2)brightness(明度)
(3)contrast(コントラスト)
(4)drop-shadow(ドロップシャドウ)
(5)grayscale(グレースケール)
(6)hue-rotate(色相環)
(7)invert(階調の反転)
(8)opacity(不透明度)
(9)saturate(彩度)
(10)sepia(セピア)

 ここでは、(7)のinvert(階調の反転)の例を示します。

 ・使用フィルター: {filter: invert(30%)}、 {filter: invert(100%)}
    引数の説明: 諧調の反転度合い、0を基準に1が最も反転した状態

 (元画像)
     


●階調反転について(補足説明)

 ネガポジ反転などとも呼ばれ、画像の各画素のRGB値(r, g, b)に対して、下記変換式で変換した画像を得る。
・100%反転
  r' = 255 - r
  g' = 255 - g
  b' = 255 - b
・任意の%(a = 0〜100%)反転
  r' = r(1 - a) + (255 - r)a
  g' = g(1 - a) + (255 - g)a
  b' = b(1 - a) + (255 - b)a
 50%反転では、下記のように全面グレーになる。
  r' = r(1 - 0.5) + (255 - r)x0.5 = 128
  g' = g(1 - 0.5) + (255 - g)x0.5 = 128
  b' = b(1 - 0.5) + (255 - b)x0.5 = 128

 (図は左から順に、40%、50%、60%反転)
     


ホーム