「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
コメント