【javascript】色コードの16進数、RGB、Opacityなどを変換するライブラリを作成してみた。

「red」から「#FF0000」や、「#FF0000」から「rgb(255, 0, 0)」、はたまた「rgba(255, 0, 0, 0.5)」から「#7FFF0000」など、色コードを双方に変換したい時があります。
楽したいなあ、とライブラリを作成してみました。

出来ること

• 「red」などのキーワードから「#FF0000」や「rgb(255, 0, 0)」などの16進数やRGBへ変換
• 「#FF0000」などの16進数色コードから、「rgb(255, 0, 0)」などのRGBや「rgba(255, 0, 0, 1)」へ変換
• 「rgb(255, 0, 0)」などのRGBや「rgba(255, 0, 0, 1)」から「#FF0000」や「#FFFF0000」へ変換

使用方法

ファイルのダウンロード

GitHubのConvColorページからダウンロードしてください。
本体ファイルは「ConvColor.js」もしくは「ConvColor.mini.js」です。

htmlファイルへリンク

[sourcecode language=”html”]
<script src=".ConvColor.js"></script>
[/sourcecode]

スクリプトサンプル

上記のGitHubからダウンロードできる「demo.htm」にサンプルを記載しています。
簡単ではありますが、こちらでも紹介します。

[sourcecode language=”js”]
// 値のセット ConvColor( {ここに色コード} , {透明度} )
// 透明度（opacity）の値は省略可能です。何も指定しなければ「1」となります。
convcolor = new ConvColor( "rgb( 225 , 0 , 0 )" , "0.5" );

// これらも同じようにセット可能です。
// convcolor = new ConvColor( "rgba( 225 , 0 , 0, 0.5 )" );
// convcolor = new ConvColor( "red" , 0.5 );
// convcolor = new ConvColor( "#ff0000" , 0.5 );
// convcolor = new ConvColor( "#7fff0000" );

// ここからメソッドの紹介です。
convcolor.getRgb(); // return rgb(255, 0, 0)
convcolor.getRgba(); // return rgba(255, 0, 0, 0.5)
convcolor.getColor(); // return #ff0000
convcolor.getAColor(); // return #7fff0000
[/sourcecode]