【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】サイドバー固定に役立つサイト集

縦スクロール 縦方向にスクロールして指定の位置に来たら要素を固定させる方法のリンク集を紹介させてい

記事を読む

【jQuery/javascript】Tweetボタンを動的に設置する

Twitterボタンをブログやサイトに設置するとき読み込みに時間がかかってしまって困るといったことや

記事を読む

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

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

記事を読む

【jQuery UI】Sliderのオプション変更やイベントを取得をする方法

jQuery UIを使ってスライダー(トラックバー)を作ります。その際に起こるイベントとしてスライダ

記事を読む

monacaでWebサイトをアプリ化

monacaを使ってWebサイトをアプリ化するための叩き台としてのメモです。 Webサイトのア

記事を読む

【jQuery】hasClass is not a functionエラー

jQueryでセレクタを使って取得してきたjQueryオブジェクトからその子要素をchildrenで

記事を読む

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

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

記事を読む

jThree.jsやThree.jsでcanvasの画面をキャプチャして画像にする方法

WebGLのライブラリであるThree.jsやそのラッパーライブラリのjThree.jsでcanva

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

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

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

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

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

【PHP】headerでContent-Typeを指定したのに効かない場合の対処法

PHPでサイトマップを作ろうと思い、XML形式のファイルを出力しようと

スマホ向け幅固定サイトの回転時の幅対応方法

幅固定サイトでのスマホ回転時Webサイトの横幅を合わせる方法のメモ。

【PHP】特定のURLからそのAtomやRSSのフィードを抽出する方法

特定のURLからRSSやATOMのフィードを抽出する方法をメモ。 流

フィード抽出ツール(RSS1.0、RSS2.0、atom)

任意URL サイト名 サイトURL RSS1.0

→もっと見る

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