デザインの配色の参考や勉強に。HPのカラーパレットが簡単にわかるツール「Web Colour Data」

ツール

2020年09月27日 17:29　

こんにちは、stoです。

デザインするのに大事なのは、もちろんレイアウトもありますがカラーの配色も大きな要素を占めます。

レイアウトが良くても、カラー配色がおかしかったらデザインの魅力も半減してしまいます。

そこで今回紹介するツール「Web Colour Data」は、URLを入れるだけでそのサイトで使われているカラー配色が表示される便利なツールで、

デザイン配色の参考や配色の勉強に使用するのに役に立つかと思われます。

「Web Colour Data」のサイトにアクセスすると「Web Colour Data」のロゴのすぐ下にURLや画像をアップする検索窓が

あるのでそこに調べたいURLを入力します。

検索窓の下には、例として有名なサイトやサンプルサイトのカラー配色が表示されています。

今回は参考として、その中からNＴＴ西日本グループ採用WEB2020を見てみます。

こちらのサイトをクリックすると簡単にカラーパレットが表示されます。

最初にメインカラーが表示され、そのあとに他のカラーが表示されます。

また、色相分布と色相環も表示され、カラーの比率も表示さます。

一番下にはカラーが近い他のwebサイトも紹介されます。

ただ、写真や広告などのカラーも抽出されるので多くのカラーが抽出される場合もあります。

「Web Colour Data」の他にも、写真の画像などがらカラーを抽出するツール「Color Hunter」も

あります。

簡単にカラーパレットが生成できるので便利だし、配色の参考にもなるので使ってみても損はないと思います。

配色に悩んだときは利用してみてください。

この記事を書いた人

universe