配色パターン見本40選：ベストな色の組み合わせ確認ツール

気になる配色があれば、見本をクリック/タップしてみましょう。その配色の使用イメージを確認することができます。気に入った色の組み合わせはコピペして使って頂いて構いません。

まずはシーン問わず使いやすい色の組み合わせを紹介します。青や橙色などは老若男女問わず受け入れやすい色ですね。

#4072B3 #6088C6 #AEC4E5 #EB8686 #C0C0C0

#AAD6EC #EEF9FF #FC9D9D #5B5B5B

#77AF9C #8CD790 #C5E99B #757575

#1B435D #78BBE6 #D5EEFF #F99F48

#517D99 #6AC1B7 #BFE9DB #DFEFED

#B4CCE3 #454545 #DBDBDB

#5DA797 #454545 #E9E9E9

#928484 #EE817B #F6AFAA #ffb2ae #FCECEA

#454545 #79A1D4 #9fbcdf #abcae8 #ffeed5

#6495ED #67C7D4 #B2E2EC #888897 #38383e

#37ab9d #4dc0b2 #ffc042 #586365

#64BCFC #68c5f3 #454545 #dfdfdf

次に温かみがあり親近感を感じさせるような配色パターンを紹介します。家庭、愛情、秋などのキーワードが関係するデザインによく合うはずです。

#ef866b #f7b46b #f7d76b #bcb5b5

#FB7D79 #AE9890

#F99292 #FFBC61 #FFC679 #FFF4E0

#79BD9A #A8DBA8 #EFEFEF #757575

#FCAA00 #767676 #FEEABC #61C359

#F6B352 #FC913A #F68655 #4C4C4C

格好良いイメージや、先進感を出したいときにおすすめの配色です。明度が低い色の組み合わせを選べば、落ち着いた大人らしい印象を与えることができます。

#516C9D #7B9AD0 #DEDEDE

#28385E #516C8D #6a91c1 #CCCCCC

#454C50 #6E777C #D7E6EF

#4790bb #b0d7d5 #2a5772

#FF9800 #235180 #B6B6B6

#31444d #597c8b #94a4a5

#333333 #9DA5A0 #e9e9e9 #60CAAD

力強くアクティブな印象を与える組み合わせです。長時間見ると疲れやすい高明度色が中心ですが、目をひくようなデザインにしたいときにはピッタリでしょう。

#2E2E2E #626262 #FF5722 #FF9800 #FFC107

#FFC93C #204495 #6495ED

#1C75BC #5cc0ef #F9A638

#F17816 #ffb23b #ffbf5d #16c4fd #4a4a4a

柔らかくかわいい印象を与えたいとき、女性を主なターゲットとしているときに使いたい組み合わせです。

#7EC2C2 #9DDCDC #FFF4E1 #E67A7A

#383838 #665990 #AAA5D1 #F8ACAC #F7C9CE

#8edae5 #f99695 #F0E68C #676f74

#FA776D #FC9D9A #F9CDAD #757575

#e57f75 #bc9692 #d7bfaf #b8b1ab #f0e3e3

ユニークで目をひく配色です。好みは分かれるかもしれませんが、まわりと異なる個性的な印象を与えることができます。

#574B90 #885988 #FFB1BC #3C474E

#f6e5d7 #73d0c2 #ed8d49 #ffc530 #978d86

#E85A70 #4EA1D5 #EAEAEA #454552

#000000 #454545 #FFD100 #FFF6D1

#F43E43 #454545 #c8c8c8

#312114 #4d4136 #f08f00 #CD853F #fbe9d6

僕自身、配色ツールを使う中で「色だけを並べられても、実際に使用したときのイメージが湧かない」と感じていました。使用例も合わせて確認できれば、使いたい色がより探しやすくなるのではないかと考え、この記事を書きました。なお、マテリアルデザイン用の配色リストも作りました。是非ご覧になってみてください。

マテリアルデザインカラー：使用例までチェックできる配色見本集