Blog

rgbcolor.jsで16進数⇔rgb()の色の変換を簡単にできる

2015.11.10Cat:javascript jQuery デザイナー

私の場合、CSSの色の指定はほとんどの場合”#f6f6f6″のような16進数による指定を行っています。

jQueryでも、cssやanimateで色の指定をする場合、16進数により指定しています。

また、IllustratorでSVGを書き出した場合、fillやstrokeのような色の指定は16進数により行われています。

 

通常はこのことになんの問題もないのですが、

アニメーションをjQueryで実装する場合に、色の計算を直接しなくてはならない場合、

16進数の指定のままでは扱いにくいため、rgb形式に変換する必要があります。

 

最新のブラウザの多くでは、

インラインSVG内の要素のアニメーションの手段としてCSS3のtransitionやanimationを使うことができます。

しかしながらIEでは、SVG内の要素にCSSでアニメーションの指定をしても、動作させることができません。

そのため、jQueryなどを使い、

色の計算を直接行うことで、SVGのアニメーションを実装しなくてはならない場合があります。

 

そんなときに役立つのが、

rgbcolor.jsというJavaScriptのプラグインです。

 

↓公式サイト

RGB color parser in JavaScript / Stoyan’s phpied.com

 

使い方は↓こちらのサイトでわかりやすい説明をされています。

【javascript】RGB⇔カラーコード変換ライブラリ

 

 

こちらを使えば、

のように色を任意の形式で指定することで、

上記のように柔軟に色の情報を変換・取得することができます。

 

↓こちらはそれを応用してSVGのアニメーションを実装してみたDEMOです。

DEMO

 

用途は幅広いと思いますので、是非ご利用下さい。

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ