おしゃれで使いやすい
配色パターン見本集

この記事の楽しみ方

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

万人受けする配色

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

#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

あとがき

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

配色プレビュー

スクロール

プレビューを表示