色・カラーのはなし(その2)

※ブラウザはFirefox・Chrome・(Edge)をお使い下さい。IE(Internet Explorer)では作動しません。

 色・カラーのはなし(その1)赤(Red)緑(Green)青(Blue)の光の三原色のはなしをしました。それぞれ0~255の256の番号が振られていて、3つを混ぜるといろいろないろ(256の3乗=16,777,216色)が出来ると!  例えば、赤は(r:255 g:0 b:0)、青は(r:0 g:0 b:255)、明るい緑(lightgreen)は(r:144 g:238 b:144)になります。どの色が赤何番?・緑何番?・青何番?か直感的に分かりません。そこで色を、色合い(色相 hue)・鮮やかさ(彩度 saturation)・明るさ(輝度きど lightness または 明度 value (明度と輝度は別ものです))の3つで表現する工夫がされています。それぞれ、hsl色空間とかhsv色空間と呼ばれているそうです。hの色相は0(赤)~60(黄)~120(緑)~180(シアン)~240(青)~300(マゼンタ)~359で、360で0の赤に戻る色の環です。sの色相は0~100までの比率で表され100はrgbの差が一番大きく鮮やかな色になり、0はグレーっぽくなります。 輝度(l)も0~100%で標準は50%です。
 因みに #ff00ffのように#の後に数字アルファベットが6文字あるのは、r/g/b の三原色の番号を16進数で表したものでrgb表記と同じものです。 下の黒のボタン(カラーピッカー)を押して選んだ色がどんな表記になるか試して見て下さい

  


彩度・輝度の違いを体験してみよう

スライダーで下に並んでいる色の彩度・輝度を変化させてみてください。

※ 色にマウスを乗せると情報が表示されます。
※ 表示色の数は変更出来ます。

   

    
 

写真の彩度・輝度などを変化させてみよう

 
 色・カラーのはなし(その1)では で変化させましたが、ここではスライダーを使いました。
画像のピクセル毎に変化させています。いろいろな色があるので色相を変化させると面白い効果が出ます。カラーフィルターは元画像にその色をかぶせたような感じになります。
 PCの中のご自分の画像でも試せます。Please try!
Canvas not supported ...


 
 

カラーフィルター

  
  
  
  
  
  



 ※ セキュリティ:画像処理はPCの中で処理され、サーバには保存されないので安全です。
 ※ ダウンロード:画像を右クリックして「名前をつけて画像を保存」


おしまい