マテリアルデザインカラー
色の組み合わせ見本集

使用例を見ながら配色を探そう

配色見本をクリックすると、マテリアルデザインでの使用例を確認することができます。

色の構成

どの配色もメインカラー、サブカラー、アクセントカラーの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

配色プレビュー

 配色プレビュー