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

公開日: : JavaScript/jQuery, 画像処理

スポンサーリンク


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

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

スポンサーリンク
Amazon

  • このエントリーをはてなブックマークに追加

関連記事

リクルート期間限定ポイントの有効な使い道

はじめに  先日クレジットカードの見直し活動の一環でポイント還元率の

初心者がお金を貯めるための節約・財テク手法まとめ【ポイント還元・投資・税金対策】

はじめに  最近なるべく節約しようと思い、お金周りに関して色々調べて

動画講座を効率的にキャプチャして復習する方法

はじめに  最近、動画媒体の講座などをたまに視聴しています。独学だと

Twitterのオリジナルサイズの画像ファイル(.jpg-large,.jpg-orig等)を一括リネームする

Twitterの画像をオリジナルサイズで保存しようとするとjpg-la

【Unity】他のスクリプトを一括で取得して有効化・無効化を制御する

Unityを使っていて他のスクリプトを一時的に停止させたいと思ったので

テレビの録画をPCやNASで共有する

今までテレビはテレビ用のモニターで見ればいいやと思っていたのですが、さ

【DeepLearning】物体検出手法のSSD(Keras版)を試す (Ubuntu14.04)

はやりのディープラーニングの物体検出手法の一つであるSSDのサンプルを

→もっと見る

  • Author : ががんぼ
    プログラミングやWeb関係で気付いたことについてメモしていく予定。だいたいが備忘録ですが、自分でサンプルを作って動かしてみたりしています。
PAGE TOP ↑