マテリアルデザインカラー
色の組み合わせ見本集
使用例を見ながら配色を探そう
配色見本をクリックすると、マテリアルデザインでの使用例を確認することができます。
マテリアルデザインの色の構成
どの配色もメインカラー、サブカラー、アクセントカラーの3つで構成されています。使用色はGoogleが提供する マテリアルデザイン用のカラーパレットから選んでいます。詳しくは以下の記事を読んでみてください。
配色ジャンルの目次
青系統の色の組み合わせ
はじめに青をメインカラーとした配色を紹介します。アクセントカラーには、青とのコントラストが鮮やかな色を選んでいます。
#2196F3 #1976D2 #EF5350
#03A9F4 #039BE5 #FFC107
#03A9F4 #64B5F6 #FF80AB
#00BCD4 #4DD0E1 #FDD835
#00BCD4 #00ACC1 #FFA726
#3F51B5 #5C6BC0 #FFC107
紫系統の色の組み合わせ
「大人っぽさ」や「落ち着いた印象」を出したいときには紫色が効果的です。好みが分かれるため使用時には注意が必要です。
#673AB7 #512DA8 #2196F3
#9C27B0 #BA68C8 #FFCA28
#673AB7 #9575CD #2196F3
赤系統の色の組み合わせ
エネルギッシュで活気のある印象を出したいときには赤を使うと良いでしょう。メインカラーには思い切って明るめの色を使用します。
#f44336 #ff5252 #FFA726
#f44336 #e53935 #FDD835
#E91E63 #F06292 #42A5F5
橙系統の色の組み合わせ
温かみがあり、親近感を感じやすいのが橙色をベースにしたい配色です。元気で健康的な印象を与えることもできます。アクセントカラーには水色や赤色がよく合います。
#FF5722 #FF6E40 #FBC02D
#FF5722 #E64A19 #3F51B5
#FF9800 #FB8C00 #f44336
#FF9800 #FFB74D #29B6F6
#FFC107 #FFA000 #26C6DA
#FFC107 #FFD54F #4FC3F7
緑系統の色の組み合わせ
「ナチュラル」や「エコ」を表現したいときには、緑色を使うのが効果的です。黄緑にすると優しい印象に、深緑にするとシャープで大人っぽい印象となります。
#CDDC39 #C0CA33 #009688
#8BC34A #9CCC65 #FF8A65
#CDDC39 #689F38 #FFD740
#4CAF50 #66BB6A #FFC107
#009688 #00897B #4DD0E1
#009688 #80CBC4 #FDD835
低彩度色
マテリアルデザインでは、カラフルで派手な色がメインカラーに使われることが多いですが、彩度の低い色を使うこともできます。これらの色は、長時間見ていても疲れない「負担の少ない配色」と言えるでしょう。
#607D8B #455A64 #FDD835
#607D8B #37474F #F06292
#9E9E9E #757575 #42A5F5
#9E9E9E #BDBDBD #FF7043
#795548 #A1887F #FFCA28
#795548 #5D4037 #4CAF50