日記

色番号をパパっと取得するのが10倍速くなる「トリカラーパレット」

Webサイトを作っている時に、人の作ったものを複製したり、ちょっとボタンを追加したり、果ては自分で作ったのに元素材が無くなった、とかって時に意外と困る二大要素が「フォントがどれか分からなくなる」というのと「色番号が何か正確に分からない」ってことだったりしないでしょうか?

その中で今回は「色番号を正確に取得する」のに便利なツールのご紹介。

いざ「このフォントと同じ色で、マウスオンのフォントカラー指定をCSSに設定・・・・」って時に「フォントの色」を調べる時、これまで名村は、


  1. 画面をキャプチャ
  2. PhotoshopやFireworksに貼り付け
  3. スポイトで色を取って、番号取得

って流れを取ることが殆どでした。

もちろん画像だったりしたら元素材とか、CSSを簡単に展開してフォントのカラー指定の場所がすぐに分かればいいのですが、細かい作業においては往々にして元素材もないとか、別の制作会社が作ったものにならって複製(やっぱり元素材なんていいものは無い)なんて場合にはそうした方が早かったりしました。

それを便利にさくっと色番号を取得できるのがこのツール。


色の組み合わせを比較しながらカラーコードを取得「トリカラーパレット


トリカラーパレット

トリカラーパレット

このツールは基本的には地色とフォントの色とかのコントラストとかをさくっと見るためのツールかは始まっていたっぽいのですが、何が便利かって、「画面の色」を取得する機能があるってことです。

ツールを立ち上げると、横の様な画面がでるのですが、その中段ぐらいにある「画面の色」ボタンを押すと、


色取得画面

色取得画面

横の様な画面が出てきて、マウスカーソルのある場所がもの凄いズームされています。

その画面を見ながら、1ピクセル単位で色を取得できるのがこのツールの便利な所です。

もちろんこれは画像ソフトでもできるのですが、この用途のみに特化している意味では、アプリケーションとしての起動も一瞬ですし、レジストリに登録をしない単体稼働するアプリケーションですし、特にCSSでのフォントカラーとか背景色指定の為に色番号を調べるってことではかなり便利です。

もちろん本来の目的として、地色とフォントカラーの調整をするって意味では、それもかなり便利ですし。

色番号系で毎回「面倒だなぁ・・・」と思っている方は是非一度お試しください!


著者・名村晋治のプロフィール

名村晋治

株式会社サービシンク

代表取締役 / テクニカルディレクター

名村晋治

不動産業界に特化したWebサイト制作・システム開発をおこなうサービシンクでプロデュース、ディレクションからテクニカル・ディレクターまでを担当。
元プロの声優であり、Webディレクターとして22年のキャリアを持つ。
(詳細は下の「詳しいプロフィール」をクリックしてみてください。

Webブランディングの入門教科書」、「変革期のウェブ」を毎日コミュニケーションズから出版してます。

詳しいプロフィール

大学二年生の96年からWebの制作集団ネイムヴィレッジを主催。
大学卒業の99年までの間に100社ほどのサイト制作の企画、ディレクション、デザイン、Perlでの開発、マークアップに携わる。
大学卒業と同時に俳優になるために上京し俳優修業開始。
2000年からは俳優修業の傍ら不動産検索サイトHOME'Sを運営している株式会社LIFULL(旧:ネクスト)に合流。
俳優としては、舞台演劇、プロの声優としても活動したが最終的30歳を目前に足を洗う。

2005年に株式会社LIFULLが自社媒体に注力するためSips業から撤退する事をきっかけとして、代表の井上とシェイクハンドをして退社。

2005年から株式会社ソナーに合流し取締役なども歴任し不動産業界のサイト制作のディレクションからフロント実装を担当。

2010年1月12日から株式会社サービシンクを立ち上げ、代表取締役に就任。
不動産業界に特化したサイト制作のアートディレクション~HTML実装設計~システム設計のすべてに携わるジェネラリスト。
基軸としてはクライアントの商売に寄り添うために、徹底的に思考を巡らせるためのディレクションを行う。
Webブランディングの入門教科書」、「変革期のウェブ」を毎日コミュニケーションズから出版してます。

最新の記事