こんにちは、デザイナー・ブロガーの
ゆっきー（@elcielo_design）です。
この記事では、マテリアルデザイン系
無料カラーツールをまとめています。
この記事の目次
マテリアルデザイン系カラーツール
Googleのマテリアルデザインで
採用されている配色を用いたツールを
紹介しています。
ランダムに色を表示してくれたり、
UIデザイン等で利用しやすい色も
すぐに分かったりと何かと便利です。
それにHEX値をコピー&ペーストで、
簡単にマテリアルカラーを利用可能。
特に、次のような人は読んでみて下さい。
- マテリアルデザイン系の
カラーツールが知りたい。 -
マテリアルデザイン系の
カラーツールを使いたい。 -
デザインに使えるカラーツールを探している。
マテリアルデザイン系
カラーツールまとめ
「マテリアルデザイン系のカラーツール一覧」
| 系統 | カラーツール名 |
| クリックするだけでマテリアルから 自動でカラーを選んでくれるツール |
Random Material Palette Generator |
| マテリアルデザインの色をまとめて 閲覧できるカラーパレットサイト |
Material UI |
| 2色選択すると、調和したカラー パレットが 表示されるツール |
Material Design Palette |
| 終了したカラーツール | Colors – Material-UI |
| Material Mixer |
下でそれぞれ詳しく紹介しています。
Random Material
Palette Generator
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 UI
Material UIは、Googleデザインガイドの
「マテリアルデザイン」の色をまとめて
閲覧できるカラーパレットサイトの1つ。
| ツール名 | Material UI |
| 特徴 | ・マテリアルデザインのカラー参考サイト ・マテリアルカラーやフラットUIカラー、 ソーシャルカラー等のマテリアデザインの カラーを見ることができる。 |
| おすすめの人 |
・マテリアルデザインの色をまとめて 閲覧できるカラーパレットサイト |
| その他 |
Material UI
Material Design Palette
Material Design Paletteは、
その名の通りマテリアルデザインに
特化しているカラーパレットの1つ。
| ツール名 | Material Design Palette |
| 特徴 | ・マテリアルデザインの配色見本サイト ・2色選択するとそれに合った6色が表示され 8色の調和したカラーパレットができる。 ・カラーパレットとは別に多くの SVGアイコンをダウンロードが可能。 |
| おすすめの人 | ・2色選択するとそれに合った6色が表示され 8色の調和したマテリアルカラーパレットが 表示されるツールを使いたい人 |
| その他 |
Material Design Palette
終了したマテリアルデザイン系の
カラーツール
「終了したカラーツール」
- Colors – Material-UI
-
Material Mixer
今まで大変お世話になった
マテリアルデザイン系のカラーツール。
本当にありがとうございました。
Colors – Material-UI
Colors – Material-UIも、
Googleデザインガイドの
「マテリアルデザイン」の色一覧を
見ることができるサイトでした。
| ツール名 | Colors – Material-UI |
| 特徴 | ・マテリアルデザインのカラー参考サイト ・「Material UI」と似ていた。 ・カラー名とカラーコードを一緒に見れた。 |
| おすすめの人 | ・マテリアルデザインのカラー参考サイトを 見たい人 |
| その他 |
Material Mixer
Material Mixerは、
Googleのマテリアルデザインの配色を基に
自動で類似色の配色を示してくれたツール。
| ツール名 | Material Mixer |
| 特徴 | ・マテリアルデザインの配色見本サイト ・「Material UI」と 合わせて覚えておきたいツール。 |
| おすすめの人 | ・Googleのマテリアルデザインの配色を基に 自動で類似色の配色を示してくれるツールを 使いたい人 |
| その他 |
まとめ
以上が、マテリアルデザイン系
カラーツール5選まとめでした。
なお、その他の無料カラーツールは、
下の記事に一通りまとめています。
また、配色に関わる書籍・本は、
次の記事を参考にしてみて下さい。
