【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
  • このエントリーをはてなブックマークに追加

関連記事

jQueryで要素にappendとafterを使って追加する

jqueryのappendは要素の末尾に指定要素を追加し、afterは要素の後に指定要素を加えます。

記事を読む

ニコニコ動画の外部プレイヤーを動的に設置する【javascript/jQuery】

ニコニコ動画の外部プレイヤーはページのはじめの読み込みのときにしか表示されず、javascriptで

記事を読む

【javascript/jQuery】強制的にページをスクロールさせる方法

強制的にページをスクロールさせたいと思って調べていたのですが、なかなか思うようなものが見つからず困っ

記事を読む

【jQuery】大量の画像で重くなったページを遅延ロードで軽くする方法【Lazy Load】

画像をふんだんに使っているページでは読み込みの際に非常に時間がかかるという問題点があります。数枚なら

記事を読む

【javascript】RSSを読み込んで表示させる【Google Feed API】

jQueryで簡単にRSSフィードを表示させる方法としてGoogleFeedAPIを利用するというの

記事を読む

【Javascript】1つまたは複数のランダムな値を取得する

#shuffle1btn,#shuffle2btn{ padding: 4px 6px; }

記事を読む

【ImgToAA】画像をAA化するツール

指定の画像を読み込ませてAA化するツールです。サンプルはこちら。 (使い方) 画像ファイ

記事を読む

javascriptで画像処理をする【HTML5】

HTML5でjavascriptを使って画像処理をしてみました。このページでは手始めにグレースケール

記事を読む

【Three.js/jThree.js】カメラ内部パラメータを変更して視野などを変える

jThree.jsでカメラの内部パラメータを変更するのに手間取ったのでメモ。参考にしているjThre

記事を読む

YoutubeのURLリンクを外部プレイヤーのものに正規表現で置換する

Youtubeのアドレスを正規表現を使って抽出して外部プレイヤーのフレームに変換・置換するスクリプト

記事を読む

NVIDIA DIGITSをSupervisorを使って自動起動する

はじめに 先日Ubuntu14.04にDIGITS 5をGPUなしP

【2017年度】GeForce 1080 Ti搭載BTOパソコン比較

はじめに 最近ディープラーニング用にGPUのないPCにDIGITSを

Windows用のシンプルなストップウォッチソフト紹介

Windows(10)でも使える使いやすいKAZAMITimerという

MNISTをDIGITS 5のCPUのみで試す(GPUなし)

はじめに DIGITSを使えばGUI操作で簡単にディープラーニングが

Windowsユーザが初めてMacBookを購入したときの注意点や感想

最近12インチのMacBookを購入しました。今までWindowsしか

Redmine3.2をUbuntu14.04にインストールして躓いた所についてメモ

はじめに Ubuntu14.04 ServerにRedmine3.2

UWSCを使ったソフト自動立ち上げ【SoftEther VPN Server】

やりたいこと 最近SoftEtherという筑波大学発のベンチャー企業

→もっと見る

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