サイト内で使われているカラーを解析してくれる「Web Color Data」が便利!URLを入れるだけでカラーコードが取得可能!

Web Color Data
僕はデザイナーでもなければグラフィックアーティストでもない。つまり、デザインセンスを持ちあわせていない。

ただ、gori.meは自分でデザインを調整して定期的に手直しをしている。デザインができない僕にデザインを見直すきっかけとなるのは他の人が運営するオシャレなサイトに遭遇した時。

サイトデザインで参考にしやすいのはそのサイトが使っている配色。色の使い方は特にセンスが問われるため、気に入ったサイトのカラーバランスは個人的に気になるところ。

何がきっかけでたどり着いたか思い出せないが、URLを入れるだけでサイトで使用されているカラーを解析してくれる「Colours」が面白そうだったので、紹介する!

URLを入れるだけでカラーの解析をしてくれる

使い方は簡単で、http://webcolourdata.com/にアクセスして気になるサイトのURLを入れるだけ!解析してくれる情報は以下の通り!

  • 使われている主なカラーとその割合
  • 色相分布
  • 色相環
  • 調べたサイトと類似しているサイト

試しにgori.meを解析してみた!

せっかくなのでgori.meを解析してみることにした!検索するとまずはサイト内で見受けられる主要カラーとその使用割合が表示される。僕の場合は#FD581Eが多いらしい。そんなカラーコードは記憶に無いな…。

Web Color Data gorime
以下が色相分布と色相環。正直よく分からないが、暖色系の割合が多いという認識でいいのだろうか。
Web Color Data
カラーリングが類似しているウェブサイトとしてTiragraffi MagazineHVG.huPlayfireの3つが挙げられた。オレンジ要素が目立つ点がgori.meと似ているのだろうか。

何度か試してみたところ、どうも広告で使用されるカラーも取得してしまうようなのでサイト内で使用されているカラーの厳密な解析はできないかもしれないが、参考にする分にはいいかもしれない!

気になった人は以下のリンクから試してみるべし!

Colours

あわせて読みたい
もっと読みたい

gori.meの最新情報をチェック!!

  1. 「iPhone 5s」を「iPhone 7 mini」に改造した人が登場
  2. 【保存版】iPhoneのストレージ容量不足を劇的に解消する7つの方法
  3. 「Apple Pencil 2」、新型「iPad Pro」と同時に2017年3月に発表か
  4. 「iPhone 8」、5.8インチ型の全面ディスプレイに?!各種センサーは画面内に内蔵、新センサーも搭載?!
  5. 【保存版】Macの「その他」を削除し、ストレージ容量不足を解消する方法