こんにちは、デザイナー・ブロガーの
ゆっきー（@elcielo_design）です。
この記事では、マテリアルデザイン系
無料カラーツールをまとめています。
この記事の目次
マテリアルデザイン系カラーツール
「マテリアルデザイン系カラーツール」
| ジャンル | カラーツール名 |
| マテリアルデザイン系 ① 〜 ⑤ |
Random Material Palette Generator |
| Material Design Colors | |
| Colors – Material-UI | |
| Material Mixer | |
| Material Design Palette |
Googleのマテリアルデザインで
採用されている配色を用いたツール。
ランダムに色を表示してくれたり、
UIデザイン等で利用しやすい色も
すぐに分かったりと何かと便利です。
それにHEX値をコピー&ペーストで、
簡単にマテリアルカラーを利用可能。
① Random Material Palette Generator
Random Material Palette Generatorは、
クリックするだけでマテリアル(素材)から
自動でカラーを選んでくれるツール。
| 特徴 | ・3色の配色パターン見本サイト ・ランダムでカラーを決めれる。 ・ワンクリックする度に下に配色を保存。 ・5つのテンプレートに切り替え可能。 |
| その他 | ・5つのテンプレート 「Text template」「Card template」 「Vertical template」「Circular template」 「Logo Threebu template」 |
Random Material Palette Generator
② Material Design Colors
Material Design Colorsは、
Googleデザインガイドの
「マテリアルデザイン」の色をまとめて
閲覧できるカラーパレットサイトの1つ。
| 特徴 | ・マテリアルデザインのカラー参考サイト ・メインカラーとアクセントを一度に 確認できるのでデザイン作成にも便利。 |
| その他 |
Material Design Colors
③ Colors – Material-UI
Colors – Material-UIも、
Googleデザインガイドの
「マテリアルデザイン」の色一覧を
見ることができるサイトになります。
| 特徴 | ・マテリアルデザインのカラー参考サイト ・「Material Design Colors」と似ている。 ・カラー名とカラーコードを一緒に見れる。 |
| その他 |
Colors – Material-UI
④ Material Mixer
Material Mixerは、
Googleのマテリアルデザインの配色を基に
自動で類似色の配色を示してくれるツール。
| 特徴 | ・マテリアルデザインの配色見本サイト ・「Colors – Material-UI 」と 合わせて覚えておきたいツール。 |
| その他 |
Material Mixer
⑤ Material Design Palette
Material Design Paletteは、
その名の通りマテリアルデザインに
特化しているカラーパレットの１つ。
| 特徴 | ・マテリアルデザインの配色見本サイト ・2色選択するとそれに合った6色が表示され 8色の調和したカラーパレットができる。 ・カラーパレットとは別に多くの SVGアイコンをダウンロードが可能。 |
| その他 |
Material Design Palette
まとめ
以上が、マテリアルデザイン系
カラーツール5選まとめでした。
なお、その他の無料カラーツールは
下の記事に一通りまとめています。
また、配色に関わる書籍・本は
次の記事を参考にしてみてください。
