WEBデザイナー向け無料電子Book >受け取りはこちら

配色に迷ったらこれ使え!配色が決まるサイトまとめ【プロ厳選】

もう配色で迷わない!配色サイト27個【厳選】

デザイン初心者さんが(おそらく)最初にぶつかる壁が「配色」だと思います。

なんか色がダサい、でも何色にすればいいのかわからん。

と、困っている方も多いのではないでしょうか?

(私もよく、こうなっていました。笑)

今回は、そんな配色迷子さんに向けて配色がサクッと決まっちゃう超便利なサイトをご紹介します。

実際に50サイトほど使ってみて、「使いにくいな」と感じたサイトは除外しています

また、使ってみて良いなと感じたポイントや、逆にちょっと使いづらいかもなと感じたポイントも書いているのでぜひ参考にしてくださいね!

\ 14364人にセミナーをして分かった!/

目次

はじめに:配色を選ぶときのポイント

配色パターンが載っているサイトを見る前に押さえておきたい、配色選びのポイントを簡単にご紹介します。

  • 色はたくさん使いすぎない
    初心者さんは3色以内にまとめるのがベスト◎
  • 色のバランスは70:25:5
    メインカラーを75%、残り2色を25%、5%の割合で使うとまとまります。
  • カラーはそのまま真似る
    同じ赤色でもカラーコードが少し違うだけで印象は大きく変わります。
    カラーコードは変えず、そのまま使いましょう!
    (カラーコードとは、「#CD5C5C」のように数字と英語でカラーを表すコードです)
  • 色が与える印象も意識しよう。
    色にはそれぞれ、見る人に与える印象があります。
    その印象も意識して色選びをすると、作るデザインがグンとよくなります。

以上4つのポイントを意識しながら、これからご紹介する配色サイトを活用してみてくださいね。

キーワードで探すなら:Color Hunt

使いやすさ★★★☆☆(3/5点)
日本語対応無し(英語)
会員登録不要
配色数4色
特徴

cold,darkのようなキーワードごとに分かれているので、好きな配色が見つけやすいです。

とにかく高機能な配色サイトが良いなら:Palette Maker

使いやすさ★★★☆☆(3/5点)
日本語対応無し(英語)
会員登録不要
配色数1~5色
特徴

こちらのサイトは英語のみですが、英語に苦手意識がある方でも使って欲しいなと思うくらい、とにかく高性能です!!!

メインのカラーを選び、「Generate Color Palette」を押すと服、ネイル、インテリア、資料、ポスター、それぞれの配色例を教えてくれます。

とにかく高機能な配色サイトが良いなら②:Dopely Colors

使いやすさ★★★☆☆(3/5点)
日本語対応無し(英語)
会員登録不要
配色数5色
特徴

5色の配色パレットやグラデーションが探せるサイト。

とにかく種類が豊富なので、眺めているだけでも楽しいです。

メインカラーを基準に探すなら:SchemeColor

使いやすさ★★★☆☆(3/5点)
日本語対応無し(英語)
会員登録不要
配色数5色
特徴

こちらも英語のサイトなので若干使いづらいですが、「赤」「オレンジ」「ピンク」のようなメインカラーから組み合わせを探せるので探しやすいです。

メインカラーを基準に探すなら②:Color meanings and symbolism

使いやすさ★★★☆☆(3/5点)
日本語対応無し(英語)
会員登録不要
配色数4色
特徴

Canvaが運営しているカラーサイト。

メインとなる色を選べば、その色を使ったカラーパレットを4つ紹介してくれます。

自分で組み合わせを見つけるなら:Colorable

使いやすさ★★★★☆(4/5点)
日本語対応無し(英語)
会員登録不要
配色数2色
特徴

自分でバーを動かしながら、良い組み合わせを探せるサイトです。

ある程度、組み合わせたい色が決まっている方は、このサイトでシミュレーションしながら探すと楽しいと思いますよ。

直感で選ぶなら:Adobe Color

使いやすさ★★★★☆(4/5点)
日本語対応
会員登録不要
配色数5色
特徴

〇を適当に動かすだけで、5色の組み合わせを作ってくれます。

時間は少々かかりますが触っていて楽しいですし、配色の勉強になるのでおすすめです。

直感で選ぶなら②:Color wheel

使いやすさ★★★☆☆(3/5点)
日本語対応無し(英語)
会員登録不要
配色数2~4色
特徴

〇を適当に動かすだけで、組み合わせを見つけることができます。

解説付きですが、英語のみ対応なので日本語では読めません…。

手元の写真から配色を決めるなら:Color Palette Generator

使いやすさ★★★★★(5/5点)
日本語対応無し(英語)
会員登録不要
配色数4色
特徴

Canvaが作っている配色パレットツール。

写真をアップロードするだけで、4色の配色パターンを組んでくれるのでとても便利です。

いろんな組み合わせが見たいなら:LOLcolors

使いやすさ★★☆☆☆(2/5点)
日本語対応無し(英語)
会員登録不要
配色数4色
特徴

しずくが連なったデザインが可愛くて、ついつい見てしまう配色パレット。検索がしにくいので、イメージしている配色を探すのは少し難しいです。

フリー素材から配色を探すなら:Image Hues

使いやすさ★★★★☆(2/5点)
日本語対応無し(英語)
会員登録不要
配色数4色
特徴

フリー素材サイト「Unsplash」の画像から配色パターンを作ってくれているサイトです。「いいね」でお気に入りの配色を残しておけるのも嬉しいポイント🎵

人気の配色から選ぶなら:ColorDrop

使いやすさ★★★☆☆(3/5点)
日本語対応無し(英語)
会員登録不要
配色数4色
特徴

「いいね」の数が載っているので、人気のパレットがすぐわかります。検索もできますが日本語には対応していないので、英単語で調べる必要があります。

人気パレットから選ぶなら②:Color palettes

使いやすさ★★★★☆(4/5点)
日本語対応無し(英語)
会員登録不要
配色数4色
特徴

Canvaが運営しているカラーパレットサイトです。こちらも「いいね」の数が載っているので、人気のパレットがすぐわかります。

テキト〜に探すなら:Coolors

使いやすさ★★★☆☆(3/5点)
日本語対応無し(英語)
会員登録不要
配色数5色
特徴

とにかくランダムにいろんな配色パターンを表示してくれるありがたいツールです。英語版のみで、かつ広告も表示されてしまうのが見づらいですが、画像を元にパターンも作成してくれるのは嬉しいポイント。

テキト〜に探すなら②:HELLO COLOR

使いやすさ★★★★☆(4/5点)
日本語対応無し(英語)
会員登録不要
配色数2色
特徴

多くのサイトは4-5色の組み合わせを教えてくれるので、2色の組み合わせが知りたい方はこのサイトがおすすめ。

クリックするだけでいろんなカラーが表示されるので、見ていて楽しいです。

ブランドカラーを参考にするなら:Brand Colors

使いやすさ★★★☆☆(3/5点)
日本語対応無し(英語)
会員登録不要
配色数
特徴

有名ブランドで使っている色の組み合わせが知れるサイト。

「あのブランドの色が真似したいな〜」と思うときはこのサイトを使ってみると良いと思います。

配色を学びながら探すなら:colorsupplyyy

使いやすさ★★★★★(5/5点)
日本語対応
会員登録不要
配色数1~4色
特徴

〇の印を動かすだけで組み合わせを提案してくれるサイト。

その色を組み合わせるとどうなるのかの例も表示してくれるのでイメージしやすいです。日本語のサイトなのも嬉しいポイント🎵

配色を学びながら探すなら②:原色大辞典

使いやすさ★★★☆☆(3/5点)
日本語対応
会員登録不要
配色数2~6色
特徴

色の名前、コード、組み合わせなどを教えてくれる学習サイト。

アナロガス配色(色相環で隣り合う色を組み合わせた配色)、ペンタード配色(色相環を正五角形で5等分した位置にある5色の配色)など、プロも知らないような色の組み合わせが知れます。

配色を学びながら探すなら③:Canva

使いやすさ★★★☆☆(3/5点)
日本語対応
会員登録不要
配色数4色
特徴

Canvaのサイト内で、100の配色パターンが紹介されています。

推しポイントはそれぞれのパレットに解説が付けられていること。解説を読むだけでもめちゃくちゃ勉強になります!!

完成イメージを見ながら探すなら:COOL COLORS

使いやすさ★★★★★(5/5点)
日本語対応
会員登録不要
配色数5色
特徴

有名なサイト「サルワカ」が運営している配色パターンサイトです。

全40パターンと少なめですが、実際に組み合わせた例も見れて使いやすいです。

完成イメージを見ながら探すなら②:Happy Hues

使いやすさ★★★★☆(4/5点)
日本語対応無し(英語)
会員登録不要
配色数5色
特徴

こちらもCOOL COLORSと同様、完成イメージを見ながら配色パターンを見つけることができます。英語のサイトですが、直感的に探せるので英語が苦手な方でも大丈夫です。

グラデーションの配色を探すなら:Grabient

使いやすさ★★★★☆(4/5点)
日本語対応無し(英語)
会員登録不要
配色数2~3色
特徴

とても綺麗なグラデーションの組み合わせを教えてくれるサイト。

掲載数はそこまで多くないですが、カラーコードも載せてくれているのでとても使いやすいです。

グラデーションの配色を探すなら②:itmemo

使いやすさ★★★☆☆(3/5点)
日本語対応無し(英語)
会員登録不要
配色数2色
特徴

2色からなるシンプルなグラデーションを探すならこのサイトがおすすめです。

とにかく掲載数が豊富で、スクロールしながら探せます。

グラデーションの配色を探すなら③:FarbVélo

使いやすさ★★★★☆(4/5点)
日本語対応無し(英語)
会員登録不要
配色数6色
特徴

ランダムでグラデーションの配色パターンを作ってくれます。

簡単で使いやすく、使っていて楽しいですが、作られたパターンはあまり実用的ではないので、「楽しむ目的」としておすすめです^^

(リロードすると、新しいパターンが表示されます。)

芸術的な色の組み合わせを探すなら:Color Lisa

使いやすさ★★☆☆☆(2/5点)
日本語対応無し(英語)
会員登録不要
配色数5色
特徴

使いやすさの点数は低めですが……、絵画等を元に作られたパレットなのは面白いポイントです。

美術が好きな方はぜひ一度使って見てください。

(サイト名はおそらく…..「モナリザ」をモチーフにしているのでしょうか?)

芸術的な色の組み合わせを探すなら②:Color Leap

使いやすさ★★★★☆(4/5点)
日本語対応無し(英語)
会員登録不要
配色数5色
特徴

こちらのサイトも、絵画を元に配色パターンを探すことができます。

派手な色の組み合わせが多いので、実際に使える機会は少ないかも知れませんが、美術好きなら見ていて楽しいはずです🎵

スポーツが好きなら:Hues

使いやすさ★★★☆☆(3/5点)
日本語対応無し(英語)
会員登録不要
配色数3色
特徴

NFL(アメフト)、NBA(バスケ)、MLB(野球)、EPL(サッカー)のチームブランドカラーがパレットになっています。

(日本版もできると良いですね…….^^)

まとめ

「いつも配色に悩んでしまう」「どうすればプロっぽいデザインになるの…?」

という方に向けて、ハイセンスな配色パターンが見つかるサイトを27個ご紹介しました。

改めて、リンクを貼っておきますね。

配色パターンサイトまとめ
  1. キーワードで探すなら:Color Hunt
  2. とにかく高機能な配色サイトが良いなら①:Palette Maker
  3. とにかく高機能な配色サイトが良いなら②:Dopely Colors
  4. メインカラーを基準に探すなら①:SchemeColor
  5. メインカラーを基準に探すなら②:Color meanings and symbolism
  6. 自分で組み合わせを見つけるなら:Colorable
  7. 直感で選ぶなら①:Adobe Color
  8. 直感で選ぶなら②:Color wheel
  9. 手元の写真から配色を決めるなら:Color Palette Generator
  10. いろんな組み合わせが見たいなら:LOLcolors
  11. フリー素材から配色を探すなら:Image Hues
  12. 人気パレットから選ぶなら①:ColorDrop
  13. 人気パレットから選ぶなら②:Color palettes
  14. テキト〜に探すなら①:Coolors
  15. テキト〜に探すなら②:HELLO COLOR
  16. ブランドカラーを参考にするなら:Brand Colors
  17. 配色を学びながら探すなら①:colorsupplyyy
  18. 配色を学びながら探すなら②:原色大辞典
  19. 配色を学びながら探すなら③:Canva
  20. 完成イメージを見ながら探すなら①:COOL COLORS
  21. 完成イメージを見ながら探すなら②:Happy Hues
  22. グラデーションの配色を探すなら①:Grabient
  23. グラデーションの配色を探すなら②:itmemo
  24. グラデーションの配色を探すなら③:FarbVélo
  25. 芸術的な色の組み合わせを探すなら①:Color Lisa
  26. 芸術的な色の組み合わせを探すなら②:Color Leap
  27. スポーツが好きなら:Hues

すべてのサイトを使いこなせるようになる必要はありません。

それぞれサイトごとに特徴も異なるので、いくつか使ってみて「良いな」と思ったものをブックマークして、デザインするときに活用してみてくださいね。

▼ ▼ 限定公開中 ▼ ▼

当メディアを運営している日本デザインスクールは、これまで14364人WEBデザイナーの仕事についてお伝えする無料セミナーを開催してきました。

その中で気づいたのが、WEBデザイナーへの誤解がある方が多いということ。中には一度勉強に失敗してからセミナーに来て「先に知りたかった」という方もいらっしゃいます。

そのような方が増えないために、特に多かった15の誤解を1つの資料にまとめました。勉強を始めてから後悔しないよう、ぜひ受け取ってください。

※非常に人気の資料であり、今後有料化する可能性もあるのでお早めに手に取ってくださいね。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

質問や感想があればご記入ください

コメントする

目次