JavaScript/jQuery 画像処理

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

投稿日:

スポンサードリンク


RGBをカラーコードに変換、または、カラーコードをRGBに変換したい場合が出てきたのでどういうものがあるかと思い調べてみたところ「rgbcolor.js」というライブラリ(プラグイン?)があったので使ってみました。

導入

まずはrgbcolor.jsをダウンロードしてきます。本家ページの「http://www.phpied.com/files/rgbcolor/rgbcolor.js」を右クリックして名前を付けてリンク先を保存などしてダウンロードします。

サーバーにアップロードしたらヘッダタグ内などに貼りつけて終了です。jQueryは関係なくそのまま使えます。

<script type="text/javascript" src="rgbcolor.js"></script>

使い方

たいして長いスクリプトでもないので上から読んでいきます。まずはRGBColorという引数が一つ(color_string)のクラスが定義されています。この引数にはrgbから始まる色指定(例えばrgb(30,10,200)など)かカラーコード(例えば#442255や442255)、もしくは色の名前(例えばaquaなど)の3つのいずれかを指定することができます。(いずれも文字列)

第一引数に指定できる色の形式
  1. 赤緑青のrgb(○○,○○,○○)の形
  2. カラーコード(#335511や#555など)の形
  3. 色の名前

これらは後の「color_defs」に定義されている色識別用の配列でいずれの入力でもRGB値に統一するように変換されます。入力した引数が正しいもので変換が滞りなくうまくいった場合には「ok」プロパティに「true」の値が格納されるようになっています。

ちなみに色の名前についてはクラス内の「simple_colors」に連想配列として定義されています。

最後に肝心のRGB値、もしくはカラーコード(16進数)取得ですがこれらは「toRGB」メソッドと「toHex」メソッドで取得することができ、それぞれの戻り値は「rgb(○○,○○,○○)」もしくは「#○○○○○○」で返ってきます。

直接RGBの値(10進数)がそれぞれ欲しい場合には「r,g,b」のそれぞれのプロパティに格納されているのでそれを使うことができます。

サンプル

var color = new RGBColor("rgb(30,120,210)");
//var color = new RGBColor("#1e78d2"); //カラーコードの場合

if(color.ok){
 var result = color.r + "-" + color.g + "-" + color.b ;
 var rgb = color.toRGB();
 var hex = color.toHex();
 document.getElementById("output").innerHTML =  result + "," + rgb + ","+hex;
}

色を指定してRGB値やカラーコードを取得しています。

デモ

上記のサンプルをそのまま出力しています。

こちらのデモも参考にしてみてください。

ライセンスについて

ライセンスについてはrgbcolor.jsの冒頭に

license Use it if you like it

と書かれているのでかなり自由に使っていいものと思います。

スポンサードリンク

-JavaScript/jQuery, 画像処理

Copyright© めめんと , 2019 All Rights Reserved Powered by AFFINGER5.