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

関連記事

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

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

記事を読む

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

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

記事を読む

AmazonのランキングRSSから画像リンクを作る

Amazon RSS Amazonでいい感じのRSSが無いかと探していたのですが実は本家に素晴らし

記事を読む

ニコニコ動画のRSSをjavascriptで読み込んで表示させる

ニコニコ動画のランキングRSSをjQueryで読み込んで表示するプログラムを作成しました。RSSの読

記事を読む

【javascript/jQuery】Progressbarで処理の進捗状況を表示する

jQuery UIでProgressbarを使う 処理経過を表示する場合プログレスバーにより提示さ

記事を読む

jQueryのカラーピッカーライブラリFarbtastic Color Pickerを使う

.farbtastic .wheel { background: url(http://mem

記事を読む

jQueryにおけるcreateElement

jQueryでcreateElementに変わる関数は単純で、例えばvar dom = docume

記事を読む

AAアニメーション

javascriptでAAアニメーションしました。AAは以下のところから参照しました。(AAアニメー

記事を読む

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

やりたいこと 最近SoftEtherという筑波大学発のベンチャー企業が立ち上げたVPNサービスとい

記事を読む

【jQuery UI】タブの初期状態を選択するとエラーがでて失敗する

jQuery UIでタブをプログラム側から選択させるには以下のようなコードを書けばいい…といったこと

記事を読む

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 ↑