配色はデザインにおいて重要な要素の1つですが、優れた配色を作る方法が分からないという方も多いのではないでしょうか。

そこで、今回は初心者の方でも優れた配色ができる配色パターン見本サービスをまとめました。下記のように、色の数ごとにおすすめのサービスをまとめています。

  • 2色の配色パターン見本
  • 3色の配色パターン見本
  • 4色の配色パターン見本
  • 5色の配色パターン見本
  • グラデーションの配色パターン見本

2色の配色パターン見本

まず最初にご紹介するのは2色の配色パターン見本サービスです。2色の組み合わせは配色の基本ですね。まずは2色のベースとなる配色を決めて、そこから次の色を探すようにするとイメージに合った配色を作りやすくなります。

Khroma

Khromaは、好みの色を自分で選ぶことで人工知能があなたに合った配色を提案してくれる配色ジェネレーターサービスです。

2色の配色パターンがメインですが、4色のカラーパレットも見つけることができます。一度自分の好みの色がどんな色なのか探してみてはいかがですか?

HELLO COLOR

HELLO COLORは、画面をクリックするたびに2色の配色パターン見本が表示されるサービスです。

画面に大きく表示されるのでイメージが直感的に分かりやすいですね。

落ち着いた組み合わせからポップでおしゃれな組み合わせまで、様々な2色の配色パターンから探すことができます。

3色の配色パターン見本

次は3色の配色パターン見本サービスです。ベースカラー、メインカラー、アクセントカラーの3色で構成されているデザインは多く見かけられます。

Webデザインやアプリのデザインなど、UIデザインも3色の組み合わせで構成されているものがたくさんありますね。

COLOR SUPPLY

COLOR SUPPLYは、類似色やトライアドなど色相環から優れた色の組み合わせを探すことができるサービスです。

2色、3色、4色の組み合わせから探すことができますが、3色の組み合わせを探せるサービスは他に少なく、COLOR SUPPLYを使って3色の配色パターンを探すことが多いです。

Random Material Palette Generator

Random Material Palette Generatorは、画面をクリックするたびに異なる4色の配色パターンが表示される配色ジェネレーターです。

表示は下記のテンプレートから切り替えて表示することができます。

  • テキストテンプレート
  • カードテンプレート
  • バーティカルテンプレート
  • サーキュラーテンプレート
  • ロゴテンプレート

4色の配色パターン見本

次は4色の配色パターン見本サービスです。類似色の組み合わせなどを探す時にも、4色の配色パターン見本サービスを活用することで居心地の良い組み合わせを見つけることができます。

Color Hunt

Color Huntは、4色の配色パターンが掲載されている配色パターン見本サービスです。

世界中のユーザーが投稿した配色パターン見本が掲載されていて、お気に入りの登録数によってそれぞれの配色パターン見本の人気が分かるようになっています。

おしゃれな配色パターンを探したい時は、画面上部のプルダウンで並び順を「Popular」にしてみましょう。

LOL Colors

LOL Colorsは、涙のような「ドロップ型」がかわいらしい4色の配色パターン見本サービスです。

こちらもお気に入り登録数によって配色パターンごとの人気が分かるようになっています。

ColorDrop

Color Dropは、グリッド上に並べられた図形の色の組み合わせで表示された4色の配色パターン見本サービスです。

画面上部のプルダウンで人気順に並び替えることもできるので、おしゃれな配色を探したい時はそれに切り替えるのがおすすめです。

5色の配色パターン見本

次は、5色の配色パターン見本サービスです。1つのデザインにあまり多くの色を詰め込みすぎるとごちゃごちゃした印象となってしまいますが、うまく組み合わせれば明るくて元気なデザインを作り上げることができます。

Coolors

Coolersは、「スペースバー」を押すたびに異なる5色の配色パターン見本が表示される配色ジェネレーターサービスです。

気に入った色が見つかったらその色をLockして他の4色を切り替えることも可能なので、自分好みの配色パターンを見つけることができます。

Adobe Color CC

adobe color cc

Adobe Color CCは、カラーハーモニー(色同士の関係性)から優れた配色パターンを生成することができる配色ジェネレーターです。

カラーハーモニーは以下から切り替えることが可能です。

  • 類似色
  • モノクロマティック
  • トライアド
  • 補色
  • コンパウンド
  • シェード
  • カスタム

グラデーションの配色パターン見本

最後に、グラデーションの配色パターン見本の紹介です。グラデーションは最近のデザインによく取り入れられているトレンドで、幻想的な雰囲気や魅力的なデザインを引き立ててくれるような効果を持っています。

WebGradients

webGradients

WebGradientsは、様々なグラデーションの配色パターン見本が紹介されているサービスです。

類似色を使用した優しいグラデーションパターンから、補色を使用したメリハリのあるグラデーションパターンまで様々な種類のグラデーションの配色アイデアを探すことができます。

uiGradients

uiGradients

「uiGradients」は、2色の様々なグラデーションの配色パターンが紹介されているサービスです。

エンターキーを押すとCSSのコードを出力することができるので、そのままCSSファイルに貼り付けるだけでWebデザインにグラデーションを取り入れることが可能です。

この他のグラデーションの配色パターン見本におすすめのサービスは下記のページでご紹介しています。

その他のおすすめ配色パターン見本サービス

上記で色の数ごとに配色パターン見本サービスをご紹介しましたが、異なる色数の配色パターンが掲載されているサービスをご紹介します。

配色パターン見本40選

「万人受けする配色」や「親近感を感じさせる配色」など、配色パターン見本が40種類紹介されているページです。

配色パターンをクリックすると、右側にプレビューが表示されるので実際のデザイン例を見ながら配色パターンを探すことができるのは便利ですね。

Chrome拡張機能を使って配色パターンを探そう

Chromeの拡張機能を使えば、カラーピッカーを使って表示しているWebページからカラーコードを抽出したり、表示されている画像からカラーパレットを出力することができます。

デベロッパーツールを使用すればカラーコードを調べることはできますが、カラーピッカーの拡張機能を入れておけばもっと簡単にカラーコードを調べることができるので、より効率よくアイデア探しを行えます。

まとめ

配色は簡単に思えるかもしれませんが、実は奥が深い世界です。慣れてくるまでは配色パターン見本を使って優れた配色を探すのがいいかもしれませんね。

配色パターンに関する書籍もたくさん販売されています。手元に1冊置いておけば、配色を考える時にとても役立ちます。

おすすめの記事