用意するもの
githubでマテリアルデザインの色を扱えるCSSがすでに公開されているのでそれを利用します。
google-material-colgoogle-material-coloror
ちなみにこちら、LESSやSassでも利用できるようになっているので汎用性は高いです。
こちらをダウンロードすると「dist」の中にpalette.cssが入っているのでこれを読み込む用にすれば準備完了です。
デザインデータに使用したい人はこちらからphotoshop,illustratorパレットデータがダウンロードできます。
パレットデータ
使い方
マテリアルデザインの色にはある法則性があります。 マテリアルデザインのカラーパレットは19の系統に分類されており、その中でプライマリーカラーとアクセントカラーとなる色が用意されています。 プライマリーカラーでは、明るい方から順に、50、100、200、300、400、500、600、700、800、900のバリエーションで分けられており、 ツールバーや大きなカラーブロックには500を、ステータスバーには700を使用するよう推奨しています。 アクセントカラーはアクションボタン、スイッチ、スライダーといった小さな部分に使用するよう推奨されています。 マテリアルデザインのカラードキュメントプライマリーカラーのみの色（3系等）
- ブラウン
- グレー
- ブルーグレー
プライマリーカラー・アクセントカラーの色（16系統）
- レッド
- ピンク
- パープル
- ディープパープル
- インディゴ
- ブルー
- ライトブルー
- シアン
- ティール
- グリーン
- ライトグリーン
- ライム
- イエロー
- アンバー
- オレンジ
- ディープオレンジ
- 例）Red500の文字色を使いたい場合
-
<p class="palette-Red-500 text">Red500の文字色です。</p>
Red500の文字色です。
使えそうなシーン
インブラウザ・デザインなどコードベースで画面構成をする際は利用価値が高いかなと思っています。 色を最初に決めてしまうと、後で修正が大変のように思われがちですが、CSSなので別に上書きすれば問題無いです。 また変更を前提に、基本のclassを作っておいて、後で差し替えるのも良い手だと思います。 ※カラーコードはドキュメントから引っ張ってくると楽です。 ※LESSのようなプリプロセッサを使うともっと便利です。
.dark-primary-color { background: #0288D1; }
.default-primary-color { background: #03A9F4; }
.light-primary-color { background: #B3E5FC; }
.text-primary-color { color: #FFFFFF; }
.accent-color { background: #8BC34A; }
.primary-text-color { color: #212121; }
.secondary-text-color { color: #727272; }
.divider-color { border-color: #B6B6B6; }
あとは企画書の色付け・色選びとかにも良いですね。
色の組み合わせは下記のようなカラーパレットを作ってくれるサービスを利用すると悩みが減って良いです。
materialpalette