サイト内で使われているカラーを解析してくれる「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. 【大悲報】2017年のiPhone、「iPhone 7s」と「iPhone 7s Plus」に?!
  2. 僕が遭遇した15インチ型「MacBook Pro (Late 2016)」の不具合まとめ
  3. 【保存版】iPhoneのストレージ容量不足を劇的に解消する7つの方法
  4. 「MacBook Pro (Late 2016)」専用のUSB-Cハブ「HyperDrive」が登場
  5. 精算不要の「Amazon Go」、登場!万引きにしか見えない最先端スーパー