「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ファイルへリンク
<script src=".ConvColor.js"></script>
スクリプトサンプル
上記のGitHubからダウンロードできる「demo.htm」にサンプルを記載しています。
簡単ではありますが、こちらでも紹介します。
// 値のセット 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
コメント