配色に関するツール知っていると便利な10個を用途別にまとめてみた

サイトの配色を決める際にはどうしていますか。配色のアイデアを得るために配色ツールを活用している方も多いのではないでしょうか。本日はお気に入りの配色ツールがすでにある場合でも、知っておいて役立ちそうな配色ツールについてまとめてみました。

配色を決めるのに使える便利なwebツールを用途別に10個まとめてみた

サイトの配色を決める際に活用している方も多い配色に関するツールは探せばたくさん見つかると思います。それぞれお気に入りのツールがあるかもしれません。

そんなお気に入りのツールとは別に特定サイトの配色を確認したい、有名サイト・webサービスの配色、雑誌の表紙の配色、画像を元に配色チェック、キーワードを元に配色を確認など少し使い勝手の違う配色ツールなど普段はあまり使わないかもしれませんが知っておくと役に立ちそうなツールをまとめてみました。

キーワードを入力して配色を確認

色色 [:iroiro]

入力したキーワードのイメージカラーを自動生成してくれるツールです。日本語の入力にも対応してます。

ランダムに配色を確認

Coolors – The super fast color palettes generator!

キーボードのスペースキーを押すだけで自動的にカラーパレットが切り替わっていきます。気に入った色がある場合は「Lock」して他の色だけを切り替えていくことが出来ます。また、生成されたURLを使ってカラーパレットを共有することが可能です。

ベースの色を選択するだけ配色を自動生成

Paletta – HSV Color palette for every Programmer

ベースになる色を選択するだけで周囲の色が同系統の色に変わり「調和のとれた色」でカラーパレットが生成されます。カラーコードをクリックするだけでコードをクリップボードへ簡単にコピーすることが可能です。

グラデーションのカラー配色を確認

0to255

ベースになるカラーを選択すると、そのカラーを基にきれいなグラデーションが生成されます。各カラーをクリックするとクリップボードにコピーされます。

画像を元に配色を確認

Color Hunter

指定した画像を元にカラーパレットを生成してくれるサービスです。画像はURLを指定やアップロードにも対応してます。

サイトURLを指定して配色を確認

Colours

指定したサイトの配色を一覧化してくれます。、詳細ページでは似たような配色のサイトの情報も確認できます。

有名サイト・サービスの配色を確認

BrandColors

有名サイトやサービスのカラー配色を一覧化しているサイトです。

有名サイト・サービスの配色を確認

Color of Book – 雑誌の色からhtml,cssで利用できるカラーチャートの紹介

雑誌や本の表紙を元に配色を確認することが可能です。サイト内の検索機能で探す以外にも、Amazonにある本のタイトル検索もできます。

配色投稿サイトで色んな配色を確認

Browse Palettes :: COLOURlovers

投稿型の配色アイデアサイトです。大量の配色アイデアが投稿されており、人気のある色などソート機能もあるので見ているだけでも参考になります。

カラー名称を確認

WEB色見本 原色大辞典 – HTML Color Names

色について調べる場合は定番のサイトかもしれません。カラーについて様々なカテゴライズもされており、色に関するツールなど豊富にもそろっています。