オブジェクトのCSSカラーを検索できるWebサービス「Picular」



物や人など、オブジェクトのCSSカラーを検索できるWebサービス「Picular」の紹介です。

 CSSやSCSS、又はHTMLの ' style ' 属性を使って 要素の色を編集する時、ほとんどのケースでは 16進数( hex ) で表記するカラーコードを使って色を指定します。

物体の色を調べる時にはカラーピッカーを使ってhexカラーを取得する事が多いと思われますが、もっと簡単にカラーコードを調べらる事が出来るWebサービスが「Picular」です。
 

Picular で出来ること 

- 目当てのオブジェクトをキーワードで検索、カラーコードを簡単に調べる事ができます

Picular上で 'Fate に登場する セイバー'の色を検索してみました 


Picular の使い方


Picularの使い方はとても簡単で、よくある検索フォームと使い勝手は変わりません。

フォーム上で調べたいオブジェクト入力 


Picularのユニークな所は ' Googleの画像検索 ' から画像を情報を取得し、画像の主要なカラー情報を結果として返します。また、検索元がグーグルなので検索ワードが日本語などのアルファベット文字以外でも問題ありません。

  ' orange ' で検索した結果


また、検索結果カラーの右下アイコンをマウスホバーすればカラー抽出したソース元の画像を表示、右下の hexコードをクリックすれば、クリップボードにコピーされます。

マウスホバーでカラー取得元ソース画像を表示


Summary

以上がPicularの紹介でした。Google画像検索が検索元なので、" ○○っぽい色 " など曖昧なイメージで簡単に調べる事が可能になります。

SCSSやLESSなどでグローバルカラー変数を作る時などに役立ちそうなライブラリです。

サービスページ : Picular

 

この記事のカテゴリ
プログラミング

この記事に付けられているタグ