配色はデザインにおいて重要な要素の1つですが、慣れている人でないとバランスの取れた配色を決めていくのは簡単ではありません。

そこで、今回は初心者の方でもおしゃれな配色ができるカラーパレットツール・配色パターン見本サービスをまとめました。下記のように、おすすめのツールや使用する色数ごとに分類しています。

目次

おすすめカラーパレットツール・サービス

Color Hunt

4色の配色パターンが掲載されている配色パターン見本サイト。

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

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

Color Hunt

SchemeColor

様々な種類のカラーパレットが掲載されているツール。それぞれのカラーパレットに名前が付けられていて、キーワードからカラーパレットを探すこともできます。

とにかくたくさんの種類のカラーパレットから探したい時におすすめです。

SchemeColor

Adobe Color

カラーハーモニー(色同士の関係性)から優れた配色パターンを生成することができる配色ジェネレーターの他、トレンドのカラーやキーワードからカラーパレットを探すことができるAdobe製のツール。

ログインすると、ライブラリに自分だけのカラーパレットを保存しておくことができます。

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

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

その他にも、画像からカラーパレットやグラデーションを生成できる機能や、アクセシビリティツールなども提供されていて、配色を考える時に色々と役立ちます。

Adobe Color

AIを活用したカラーパレットツール

ColorMagic

Color Magicは、AIを使ってキーワードからオリジナルのカラーパレットを作れるサービス

生成されたカラーパレットは保存することができ、自分で調整することもできます。

Color Magic

Huemint

Huemintは、AIを使って様々なカラーパレットを生成できるサービス

ただカラーパレットを生成するだけでなく、Webサイトやブランディング、グラフィックデザインなど様々なサンプルを表示することができ、具体的に配色をイメージしやすいようになっています。

Huemint

Palettemaker

Palletemakerは、AIを使って生成したカラーパレットをたくさんのサンプルで試すことができるサービスです。

サイト内で様々な種類のサンプルに当てはめることができるので、実際の配色イメージを視覚的に掴み取ることができます。

Palettemaker

Khroma

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

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

Khroma

2色の配色パターン見本

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

HELLO COLOR

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

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

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

HELLO COLOR

Pigment

Pigmentは、Pigment(顔料)とLightning(光)の2つの量を調整して自分好みの配色を見つけられるサービスです。

既存のカラーパレットだと微妙に使いたい色と違ってしまう場合がありますが、Pigmentを使えば微調整して自分好みの配色を作り出すことができるので、細部までこだわりたい人におすすめです。

Pigment

3色の配色パターン見本

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

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

COLOR SUPPLY

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

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

COLOR SUPPLY

Random Material Palette Generator

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

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

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

Random Material Palette Generator

4色の配色パターン見本

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

Palette List

Pallete Listは、好きな2色を選択すると、その色を使ったカラーパレットを提案してくれるサービスです。

配色を考える時に、メインカラーやサブカラーはある程度方針が固まっている場合も多いと思いますが、そういう時に使うとぴったりですね。

生成したカラーパレットは、CSS、Sass、SVG形式から選択してダウンロードすることができます。

Palette List

Image Hues

Unsplashのランダムに選ばれた画像から4色のカラーパレットを生成できるWebサイト。画像を見ながらカラーパレットを探すことができるので、雰囲気をイメージしやすいですね。

Image Hues

LOL Colors

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

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

LOL Colors

ColorDrop

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

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

ColorDrop

5色の配色パターン見本

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

Colorffy

Colorffyは、5色のカラーパレットが紹介されている配色パターン見本

色のトーンやテイストでフィルタをかけることができ、すでにカラーパレットのイメージがある場合に探しやすいです。

Colorffy

Colour Pallete Generator

Colour Pallete Generatorは、ランダムな5色のカラーパレットをクリックするごとに生成することができるサービス

クリックするごとに次々とカラーパレットを出力することができるので、他のサービスとは一味違った探し方が可能です。

Colour Palette Generator

Colors UI

Colors UIは、5色のイケてる配色パターンが1,000種類以上掲載されているサービス

テイストも雰囲気も異なる様々なカラーパレットが掲載されているので、お気に入りを探してみましょう。

Colors UI

Happy Hues

Happy Huesは、実際にWebデザインに配色を提供した場合のプレビューを確認しながら配色を探せるサービスです。

カラーパレットで確認した時は良さそうに見える配色でも、実際にデザインに適用するとイメージと少し違うということがよく発生しますが、Happy Huesならプレビュー表示を確認しながら色を選べるのでよりイメージに合った配色を見つけることができます。

Happy Hues

Coolors

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

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

Coolors

その他のカラーパレットツール・サービス

Color Selector

色のカタログのように、1つ1つの色を画像とともに見ることができるWebサイト。1色1色をじっくりと見ることができるので、印象的な色を探したいときに役立ちます。

Color Selector

配色パターン見本40選

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

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

配色パターン見本40選

NIPPON COLORS

日本の伝統色が紹介されているサービス。1つ1つの色に名前が付けられていて、改めて色の美しさを知ることができます。色が変化する時のアニメーションもきれいで、ずっと見ていられるようなサイトです。

NIPPON COLORS

Copy Palette

ベースカラーを選択すると、その色を含むカラーパレットを生成してくれるツール。

作成したカラーパレットは、そのままSVG形式でFigmaやSketchにコピペすることができる点が助かります。

Copy Palette

Palettable

好きか嫌いかを選択することで、カラーパレットを作成することができるツール。

メインカラーだけ決まっているような場合でも、その色に合った配色を提案してくれるので、感覚的に配色を決めていくことができます。

Palettable

HUE/360

色相・彩度・明度からカラーパレットを作成することができるツール。色相環を意識しながら配色を決めていくことができます。

HUE/360

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

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

WebGradients

webGradients

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

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

WebGradients

uiGradients

uiGradients

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

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

チェックテスト

チェックテスト下記、コードにおいて、下記表示をするために必要なcssプロパティはどれかdiscordにて共有ください。

TOP